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

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

import { getPharmacistInfo } from '../api';
import { Image } from 'ant-design-vue';

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

const data = ref();
const loading = ref(false);
const error = ref('');

// 日期格式化工具函数
const formatDate = (dateStr: string) => {
  if (!dateStr) return '';
  return new Date(dateStr).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  });
};

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const { values } = modalApi.getData<Record<string, any>>();
      if (values && values.id) {
        fetchPharmacistInfo(values.id);
      }
    }
  },
});

// 获取药师信息
const fetchPharmacistInfo = async (id: number) => {
  loading.value = true;
  error.value = '';
  try {
    const res = await getPharmacistInfo(id);
    data.value = res;
  } catch (error_: any) {
    error.value = error_.message || '获取药师信息失败';
  } finally {
    loading.value = false;
  }
};

// 计算属性：处理资格证图片URL
const qualificationImages = computed(() => {
  if (!data.value?.pharmacist_practicing?.qualification) return [];
  try {
    // 解析资格证图片数组（假设为JSON字符串）
    return JSON.parse(data.value.pharmacist_practicing.qualification);
  } catch {
    return [data.value.pharmacist_practicing.qualification];
  }
});
</script>

<template>
  <Modal v-if="data" class="w-[60%]" title="药师详情">
    <!-- 加载状态 -->
    <div v-if="loading" class="py-20 text-center">
      <div
        class="border-primary inline-block h-8 w-8 animate-spin rounded-full border-4 border-t-transparent"
      ></div>
      <p class="mt-2 text-gray-500">正在加载药师信息...</p>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="py-20 text-center">
      <div class="mb-2 text-3xl text-red-500">
        <i class="fa fa-exclamation-circle"></i>
      </div>
      <p class="text-gray-600">{{ error }}</p>
      <button
        class="bg-primary hover:bg-primary/90 mt-4 rounded px-4 py-2 text-white transition"
        @click="fetchPharmacistInfo(modalApi.getData().values.id)"
      >
        重试
      </button>
    </div>

    <!-- 内容区域 -->
    <div
      v-else
      class="mx-auto mt-8 max-w-4xl rounded-lg bg-white p-6 shadow-md md:p-10"
    >
      <!-- 头部信息栏 -->
      <div class="mb-8 flex flex-col items-center">
        <!-- 头像 -->
        <div
          class="mb-4 h-32 w-32 overflow-hidden rounded-full border-4 border-gray-200"
        >
          <Image
            :src="data.avatar"
            alt="药师头像"
            class="h-full w-full object-cover"
            onerror="this.src='https://picsum.photos/200/200'"
          />
        </div>
        <!-- 姓名及编号 -->
        <h2 class="mb-2 text-2xl font-bold text-gray-800">
          {{ data.name }}
          <span class="ml-2 text-sm text-gray-500">药师编号: {{ data.id }}</span>
        </h2>
        <div class="text-sm text-gray-600">
          注册时间: {{ formatDate(data.created_at) }}
          <span class="ml-4">最近更新: {{ formatDate(data.updated_at) }}</span>
        </div>
      </div>

      <!-- 基础信息卡片 -->
      <div class="mb-8 rounded-lg bg-gray-50 p-6">
        <h3 class="mb-4 text-lg font-medium text-gray-800">基础信息</h3>
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div class="flex items-center">
            <span class="w-24 text-sm font-medium text-gray-600">姓名:</span>
            <span class="text-gray-700">{{ data.name }}</span>
          </div>
          <div class="flex items-center">
            <span class="w-24 text-sm font-medium text-gray-600">手机号:</span>
            <SensitiveText :record="data" field="mobile" />
          </div>
          <div class="flex items-center">
            <span class="w-24 text-sm font-medium text-gray-600">身份证号:</span>
            <SensitiveText :record="data" field="idcard" empty-text="未填写" />
          </div>
          <div class="flex items-center">
            <span class="w-24 text-sm font-medium text-gray-600">门店ID:</span>
            <span class="text-gray-700">{{ data.store_id }}</span>
          </div>
          <div class="flex items-center">
            <span class="w-24 text-sm font-medium text-gray-600">状态:</span>
            <span class="text-gray-700">
              {{ data.service_user?.status === 2 ? '已审核' : '未审核' }}
            </span>
          </div>
        </div>
      </div>

      <!-- 证件展示区域 -->
      <div>
        <h3 class="mb-4 text-lg font-medium text-gray-800">执业证件</h3>
        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
          <!-- 身份证正面 -->
          <div class="rounded-lg border p-4 transition-all hover:shadow-lg">
            <h4 class="mb-2 text-sm font-medium text-gray-700">身份证正面</h4>
            <Image
              :src="data.identity?.card_up"
              alt="身份证正面"
              class="mb-2 h-48 w-full object-cover"
              onerror="this.src='https://picsum.photos/400/300'"
            />
          </div>

          <!-- 身份证反面 -->
          <div class="rounded-lg border p-4 transition-all hover:shadow-lg">
            <h4 class="mb-2 text-sm font-medium text-gray-700">身份证反面</h4>
            <Image
              :src="data.identity?.card_down"
              alt="身份证反面"
              class="mb-2 h-48 w-full object-cover"
              onerror="this.src='https://picsum.photos/400/300'"
            />
          </div>
        </div>

        <!-- 执业药师资格证 -->
        <div class="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2">
          <div
            v-for="(img, index) in qualificationImages"
            :key="index"
            class="rounded-lg border p-4 transition-all hover:shadow-lg"
          >
            <h4 class="mb-2 text-sm font-medium text-gray-700">
              {{ index === 0 ? '资格证封面' : '资格证详情页' }}
            </h4>
            <Image
              :alt="index === 0 ? '资格证封面' : '资格证详情页'"
              :src="img"
              class="mb-2 h-48 w-full object-cover"
              onerror="this.src='https://picsum.photos/400/300'"
            />
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>

<style lang="scss">
/* 自定义样式 */
.hover-scale {
  transition: transform 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.02);
}
</style>
