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

import { useVbenModal } from '@vben/common-ui';

import {
  Avatar,
  Descriptions,
  DescriptionsItem,
  Image,
  Spin,
  message,
} from 'ant-design-vue';

import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';

import { getStoreInputDetail } from '../api';
import DoctorInputCardGrid from './DoctorInputCardGrid.vue';
import { getLinkedDoctors } from '../utils/doctorInputDisplay';
import {
  inputUserDisplayName,
  normalizeInputUser,
  resolveAvatarUrl,
} from '../utils/inputUser';

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

const linkedDoctorList = computed(() =>
  detailData.value ? getLinkedDoctors(detailData.value) : [],
);

const loadDetail = async (id: number) => {
  loading.value = true;
  detailData.value = null;
  try {
    const res = await getStoreInputDetail(id);
    detailData.value = res;
    normalizeInputUser(detailData.value);
  } catch (error) {
    console.error('获取详情失败:', error);
    message.error('获取详情失败');
  } finally {
    loading.value = false;
  }
};

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      detailData.value = null;
      loading.value = false;
      return;
    }
    const { values } = modalApi.getData<Record<string, any>>();
    if (values?.id) {
      await loadDetail(values.id);
    } else {
      detailData.value = values || null;
      normalizeInputUser(detailData.value);
    }
  },
});
</script>

<template>
  <Modal title="录入详情" class="w-[70%]">
    <Spin :spinning="loading">
      <div v-if="detailData" class="p-4">
        <Descriptions :column="2" bordered>
          <DescriptionsItem label="ID">{{ detailData.id }}</DescriptionsItem>
          <DescriptionsItem label="名称">{{ detailData.name }}</DescriptionsItem>
          <DescriptionsItem label="类型">
            {{ detailData.type === 0 ? '诊所' : '药店' }}
          </DescriptionsItem>
          <DescriptionsItem label="诊所类型">
            {{
              detailData.clinic_type === 1
                ? '西医诊所'
                : detailData.clinic_type === 2
                  ? '中医诊所'
                  : '未设置'
            }}
          </DescriptionsItem>
          <DescriptionsItem label="联系人">{{ detailData.contact }}</DescriptionsItem>
          <DescriptionsItem label="联系电话">
            <SensitiveText :record="detailData" field="mobile" />
          </DescriptionsItem>
          <DescriptionsItem label="省市区">
            {{ detailData.province?.name }} {{ detailData.city?.name }}
          </DescriptionsItem>
          <DescriptionsItem label="详细地址">{{ detailData.position }}</DescriptionsItem>
          <DescriptionsItem label="录入人">
            <div class="flex items-center gap-2">
              <Avatar
                v-if="resolveAvatarUrl(detailData.inputUser?.avatar)"
                :src="resolveAvatarUrl(detailData.inputUser?.avatar)"
                :size="40"
              />
              <Avatar v-else :size="40">
                {{ inputUserDisplayName(detailData.inputUser).charAt(0) }}
              </Avatar>
              <span>{{ inputUserDisplayName(detailData.inputUser) }}</span>
            </div>
          </DescriptionsItem>
          <DescriptionsItem label="审核状态">
            <span
              :class="{
                'text-orange-500': detailData.status === 0,
                'text-green-500': detailData.status === 1,
                'text-red-500': detailData.status === 2,
              }"
            >
              {{
                detailData.status === 0
                  ? '待审核'
                  : detailData.status === 1
                    ? '审核通过'
                    : '审核拒绝'
              }}
            </span>
          </DescriptionsItem>
          <DescriptionsItem v-if="detailData.auditAdmin" label="审核人">
            {{ detailData.auditAdmin.nick_name }}
          </DescriptionsItem>
          <DescriptionsItem v-if="detailData.audit_time" label="审核时间">
            {{ new Date(detailData.audit_time * 1000).toLocaleString() }}
          </DescriptionsItem>
          <DescriptionsItem
            v-if="detailData.audit_remark"
            label="审核备注"
            :span="2"
          >
            {{ detailData.audit_remark }}
          </DescriptionsItem>
          <DescriptionsItem v-if="detailData.see_rate" label="公章" :span="2">
            <Image
              :src="detailData.see_rate"
              :width="100"
              :height="100"
              :preview="true"
            />
          </DescriptionsItem>
          <DescriptionsItem
            v-if="detailData.url && detailData.url.length > 0"
            label="轮播图"
            :span="2"
          >
            <div class="flex flex-wrap gap-2">
              <Image
                v-for="(url, index) in detailData.url"
                :key="index"
                :src="url"
                :width="100"
                :height="100"
                :preview="true"
              />
            </div>
          </DescriptionsItem>
          <DescriptionsItem
            v-if="detailData.contract_files && detailData.contract_files.length > 0"
            label="合同文件"
            :span="2"
          >
            <div class="flex flex-col gap-2">
              <a
                v-for="(file, index) in detailData.contract_files"
                :key="index"
                :href="file.file_url"
                target="_blank"
                class="text-blue-500 hover:underline"
              >
                {{ file.file_name || '合同文件' }}
              </a>
            </div>
          </DescriptionsItem>
          <DescriptionsItem label="关联医生" :span="2">
            <div v-if="linkedDoctorList.length === 0" class="text-gray-400">
              暂无关联医生预填
            </div>
            <DoctorInputCardGrid v-else :doctors="linkedDoctorList" />
          </DescriptionsItem>
        </Descriptions>
      </div>
      <div v-else-if="!loading" class="p-8 text-center text-gray-400">
        暂无详情数据
      </div>
    </Spin>
  </Modal>
</template>
