<script setup lang="ts">
import { computed, ref } from 'vue';

import { Image, Modal, Table, Tag } from 'ant-design-vue';

import { getSalespersonTransferDetailApi } from '../api';
import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';

const visible = ref(false);
const loading = ref(false);
const detail = ref<any>(null);

const drugColumns = [
  {
    title: '药品',
    key: 'drug_text',
    customRender: ({ record }: any) => {
      const name = record.drug_name || record.name || '—';
      const num = record.number ?? 1;
      const unit = record.drug_unit || record.unit || record.unit_name || 'g';
      return `${name}/${num}/${unit}`;
    },
  },
  { title: '数量', dataIndex: 'number', key: 'number', width: 80 },
];

const drugList = computed(() => {
  const d = detail.value;
  if (!d) return [];
  if (Array.isArray(d.drug_list) && d.drug_list.length) return d.drug_list;
  if (d.prescription?.content && Array.isArray(d.prescription.content)) {
    return d.prescription.content;
  }
  const content = d.content;
  if (!content || typeof content !== 'object') return [];
  const list: any[] = [];
  if (Array.isArray(content.repice)) {
    for (const recipe of content.repice) {
      let rc = recipe.content;
      if (typeof rc === 'string') {
        try {
          rc = JSON.parse(rc);
        } catch {
          rc = [];
        }
      }
      if (Array.isArray(rc)) list.push(...rc);
    }
  }
  return list;
});

const statusColor = computed(() => {
  const map: Record<number, string> = {
    0: 'warning',
    1: 'processing',
    2: 'success',
    3: 'error',
  };
  return map[Number(detail.value?.status)] || 'default';
});

async function open(id: number) {
  visible.value = true;
  loading.value = true;
  try {
    detail.value = await getSalespersonTransferDetailApi(id);
  } finally {
    loading.value = false;
  }
}

function close() {
  visible.value = false;
  detail.value = null;
}

defineExpose({ open });
</script>

<template>
  <Modal
    v-model:open="visible"
    title="传方详情"
    width="720"
    :footer="null"
    destroy-on-close
    @cancel="close"
  >
    <div v-if="detail" class="mb-4 space-y-2 text-sm">
      <div class="flex items-center gap-2">
        <span class="text-gray-500">处理状态：</span>
        <Tag :color="statusColor">{{ detail.status_text || '—' }}</Tag>
        <Tag>{{ detail.transfer_mode_text || '—' }}</Tag>
      </div>
      <div class="flex items-center gap-1 flex-wrap">
        <span>患者：{{ detail.patient_name }}</span>
        <SensitiveText :record="detail" field="patient_mobile" :show-eye="false" />
      </div>
      <div>地址：{{ detail.patient_address || '—' }}</div>
      <div v-if="detail.remark">备注：{{ detail.remark }}</div>
      <div v-if="detail.status === 3 && detail.exception_message" class="text-red-500">
        异常说明：{{ detail.exception_message }}
      </div>
      <div v-if="detail.prescription_images?.length" class="flex flex-wrap gap-2 pt-2">
        <Image
          v-for="(img, idx) in detail.prescription_images"
          :key="idx"
          :src="img"
          :width="80"
          :height="80"
          class="rounded object-cover"
        />
      </div>
    </div>
    <Table
      :loading="loading"
      :columns="drugColumns"
      :data-source="drugList"
      :pagination="false"
      row-key="drug_id"
      size="small"
    />
  </Modal>
</template>
