<template>
  <view>
    <!-- #ifdef MP-WEIXIN -->
    <page-container
      v-if="visible"
      :show="visible"
      :overlay="false"
      @leave="close"
    />
    <!-- #endif -->
    <u-popup
      v-model="visible"
      mode="bottom"
      border-radius="24"
      height="80%"
      z-index="10080"
      @close="close"
    >
      <view class="drawer">
        <view class="header">
          <text class="title">传方详情</text>
          <u-icon name="close" size="36" @click="close"></u-icon>
        </view>
        <scroll-view scroll-y class="body">
          <view v-if="loading" class="tip">加载中...</view>
          <template v-else-if="detail">
            <view class="section">
              <view class="row"><text class="label">状态</text><u-tag :text="detail.status_text" size="mini" :type="statusType" /></view>
              <view class="row"><text class="label">方式</text><text>{{ detail.transfer_mode_text }}</text></view>
              <view class="row"><text class="label">收货人</text><text>{{ detail.patient_name }} {{ detail.patient_mobile }}</text></view>
              <view class="row"><text class="label">地址</text><text>{{ detail.patient_address || '—' }}</text></view>
              <view v-if="detail.remark" class="row"><text class="label">备注</text><text>{{ detail.remark }}</text></view>
              <view v-if="detail.status === 3 && detail.exception_message" class="row exception">
                <text class="label">异常</text><text>{{ detail.exception_message }}</text>
              </view>
            </view>
            <view v-if="detail.drug_text_lines && detail.drug_text_lines.length" class="section">
              <text class="section-title">药方</text>
              <text v-for="(line, i) in detail.drug_text_lines" :key="i" class="drug-line">{{ line }}</text>
            </view>
            <view v-if="detail.prescription_images && detail.prescription_images.length" class="section">
              <text class="section-title">处方图片</text>
              <view class="img-row">
                <image
                  v-for="(img, idx) in detail.prescription_images"
                  :key="idx"
                  :src="img"
                  mode="aspectFill"
                  class="thumb"
                  @click="preview(img)"
                />
              </view>
            </view>
            <view class="section">
              <text class="time">{{ detail.transfer_time_text }}</text>
            </view>
          </template>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getClinicSalespersonTransferPrescriptionDetail } from '@/api/clinicSalesperson.js'

/**
 * 传方详情抽屉
 */
export default {
  name: 'TransferDetailDrawer',
  data() {
    return {
      visible: false,
      loading: false,
      detail: null,
    }
  },
  computed: {
    statusType() {
      const map = { 0: 'warning', 1: 'primary', 2: 'success', 3: 'error' }
      return map[Number(this.detail?.status)] || 'info'
    },
  },
  methods: {
    async open(id) {
      this.visible = true
      this.loading = true
      this.detail = null
      try {
        const wrap = await getClinicSalespersonTransferPrescriptionDetail(id)
        if (wrap && wrap.ok) {
          this.detail = wrap.data
        }
      } finally {
        this.loading = false
      }
    },
    close() {
      this.visible = false
    },
    preview(url) {
      const urls = this.detail?.prescription_images || []
      uni.previewImage({ urls, current: url })
    },
  },
}
</script>

<style lang="scss" scoped>
.drawer { height: 100%; display: flex; flex-direction: column; background: #f5f5f5; }
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 32rpx;
  background: #fff;
  border-bottom: 1rpx solid #eee;
}
.title { font-size: 32rpx; font-weight: 600; }
.body { flex: 1; height: 0; padding: 24rpx; }
.tip { text-align: center; color: #999; padding: 40rpx; }
.section {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
}
.section-title { font-size: 28rpx; font-weight: 600; display: block; margin-bottom: 12rpx; }
.row {
  display: flex;
  font-size: 26rpx;
  margin-bottom: 12rpx;
  line-height: 1.5;
}
.label { color: #86909c; width: 120rpx; flex-shrink: 0; }
.exception .label, .exception text:last-child { color: #ef4444; }
.drug-line { display: block; font-size: 26rpx; color: #008771; margin-bottom: 8rpx; }
.img-row { display: flex; flex-wrap: wrap; gap: 16rpx; }
.thumb { width: 160rpx; height: 160rpx; border-radius: 8rpx; }
.time { font-size: 24rpx; color: #999; }
</style>
