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

import { useVbenModal } from '@vben/common-ui';
import { Timeline, TimelineItem } from 'ant-design-vue';

import {
  FileTextOutlined,
  MedicineBoxOutlined,
  ShopOutlined,
  UserOutlined,
} from '@ant-design/icons-vue';

import { getPrescriptionSourceApi } from '../api';

defineOptions({ name: 'PrescriptionSource' });

// 处方溯源信息
const data = ref();

// 格式化时间戳
const formatTime = (timestamp) => {
  if (!timestamp) return '--';
  return new Date(timestamp * 1000).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });
};

// 处方类型
const prescriptionTypeMap = {
  1: '西药处方',
  2: '中成药处方',
  3: '中药处方',
};

// 处方状态
const statusMap = {
  0: '待审核',
  1: '已审核',
  2: '已驳回',
  3: '已过期',
};

// 计算属性：处方类型文本
const prescriptionTypeText = computed(() => {
  return data.value
    ? prescriptionTypeMap[data.value.prescription_type] || '未知'
    : '--';
});

// 计算属性：处方状态文本
const statusText = computed(() => {
  return data.value ? statusMap[data.value.status] || '未知' : '--';
});

// 计算属性：状态颜色
const statusColor = computed(() => {
  if (!data.value) return 'gray';

  const statusColors = {
    0: 'orange',
    1: 'green',
    2: 'red',
    3: 'gray',
  };

  return statusColors[data.value.status] || 'gray';
});

// 计算属性：过期时间
const expireTime = computed(() => {
  return data.value ? formatTime(data.value.auto_expire_time) : '--';
});

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    const { id } = modalApi.getData<Record<string, any>>();
    if (isOpen && id) {
      getPrescriptionSourceApi({ id }).then((res) => {
        data.value = res;
      });
    } else {
      data.value = null; // Reset data when modal is closed or id is missing
    }
  },
});
</script>

<template>
  <Modal class="w-[80%]" title="处方溯源">
    <div v-if="data" class="prescription-source-container">
      <!-- 药店信息 -->
      <div
        class="mb-6 transform rounded-lg p-6 shadow-md transition-all duration-300 hover:shadow-lg"
      >
        <div class="mb-4 flex items-center">
          <ShopOutlined class="mr-2 text-xl text-purple-500" />
          <h2 class="text-xl font-bold">药店信息</h2>
        </div>
        <div v-if="data.store" class="grid grid-cols-1 gap-4">
          <div class="info-item">
            <span class="label">药店名称:</span>
            <span class="value">{{ data.store.name }}</span>
          </div>
        </div>
        <div v-else class="italic text-gray-500">暂无药店信息</div>
      </div>

      <!-- 时间线 -->
      <div
        class="mb-6 transform rounded-lg p-6 shadow-md transition-all duration-300 hover:shadow-lg"
      >
        <div class="mb-4 flex items-center">
          <FileTextOutlined class="mr-2 text-xl text-blue-500" />
          <h2 class="text-xl font-bold">时间线</h2>
        </div>
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 mt-5">
          <Timeline>
            <TimelineItem v-if="data.pharmacist_view_time">
              {{ data.pharmacist_view_time }}
              <template v-if="data.pharmacist_info">
                【{{ data.pharmacist_info.name }}】 审核
              </template>
              <template v-else> -- </template>
            </TimelineItem>
            <TimelineItem v-else>
              {{ statusText }}
              {{ data.cancel_remark }}
            </TimelineItem>
            <TimelineItem>
              {{ data.created_at }}
              <template v-if="data.doctor_info">
                【{{ data.doctor_info.name }}】 开方，诊断：{{
                  data.clinical_diagnose
                }}
              </template>
              <template v-else> -- </template>
            </TimelineItem>
            <TimelineItem>
              {{ data.register.created_at }}
              <template v-if="data.doctor_info">
                【{{ data.user_patient.name }}】 挂号
              </template>
              <template v-else> -- </template>
            </TimelineItem>
          </Timeline>
        </div>
      </div>

      <!-- 处方基本信息 -->
      <div
        class="mb-6 transform rounded-lg p-6 shadow-md transition-all duration-300 hover:shadow-lg"
      >
        <div class="mb-4 flex items-center">
          <FileTextOutlined class="mr-2 text-xl text-blue-500" />
          <h2 class="text-xl font-bold">处方基本信息</h2>
        </div>
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
          <div class="info-item">
            <span class="label">处方编号:</span>
            <span class="value">{{ data.prescription_no }}</span>
          </div>
          <div class="info-item">
            <span class="label">处方类型:</span>
            <span class="value">{{ prescriptionTypeText }}</span>
          </div>
          <div class="info-item">
            <span class="label">处方状态:</span>
            <span :class="`text-${statusColor}-500`" class="value">{{
                statusText
              }}</span>
          </div>
          <div class="info-item">
            <span class="label">总金额:</span>
            <span class="value font-bold text-red-500">¥{{ data.total_pay_price }}</span>
          </div>
          <div class="info-item">
            <span class="label">过期时间:</span>
            <span class="value">{{ expireTime }}</span>
          </div>
        </div>
      </div>

      <!-- 医生信息 -->
      <div
        class="mb-6 transform rounded-lg p-6 shadow-md transition-all duration-300 hover:shadow-lg"
      >
        <div class="mb-4 flex items-center">
          <MedicineBoxOutlined class="mr-2 text-xl text-green-500" />
          <h2 class="text-xl font-bold">医生信息</h2>
        </div>
        <div
          v-if="data.doctor_info"
          class="grid grid-cols-1 gap-4 md:grid-cols-2"
        >
          <div class="info-item">
            <span class="label">医生姓名:</span>
            <span class="value">{{ data.doctor_info.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">所属科室:</span>
            <span class="value">{{
                data.doctor_info.depart?.name || '--'
              }}</span>
          </div>
        </div>
        <div v-else class="italic text-gray-500">暂无医生信息</div>
      </div>

      <!-- 患者信息 -->
      <div
        class="transform rounded-lg p-6 shadow-md transition-all duration-300 hover:shadow-lg"
      >
        <div class="mb-4 flex items-center">
          <UserOutlined class="mr-2 text-xl text-amber-500" />
          <h2 class="text-xl font-bold">患者信息</h2>
        </div>
        <div
          v-if="data.user_patient"
          class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
        >
          <div class="info-item">
            <span class="label">患者姓名:</span>
            <span class="value">{{ data.user_patient.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">年龄:</span>
            <span class="value">{{ data.user_patient.age }}岁</span>
          </div>
          <div class="info-item">
            <span class="label">性别:</span>
            <span class="value">{{
                data.user_patient.sex === 1 ? '男' : '女'
              }}</span>
          </div>
        </div>
        <div v-else class="italic text-gray-500">暂无患者信息</div>
      </div>

    </div>

    <!-- 加载状态 -->
    <div v-else class="flex h-64 items-center justify-center">
      <div
        class="h-12 w-12 animate-spin rounded-full border-b-2 border-t-2 border-blue-500"
      ></div>
    </div>
  </Modal>
</template>

<style lang="scss" scoped>
.prescription-source-container {
  @apply max-h-[70vh] overflow-auto p-4;
}

.info-item {
  @apply flex flex-col rounded-md p-3 transition-all duration-300;
}

.label {
  @apply mb-1 text-sm text-gray-500;
}

.value {
  @apply font-medium;
}

/* 添加动感效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.prescription-source-container > div {
  animation: fadeIn 0.5s ease-out forwards;
}

.prescription-source-container > div:nth-child(1) {
  animation-delay: 0.1s;
}

.prescription-source-container > div:nth-child(2) {
  animation-delay: 0.2s;
}

.prescription-source-container > div:nth-child(3) {
  animation-delay: 0.3s;
}

.prescription-source-container > div:nth-child(4) {
  animation-delay: 0.4s;
}
</style>
