<template>
  <a-modal
    :visible="visible"
    title="供应商详情"
    width="800px"
    @cancel="handleCancel"
    @update:visible="handleVisibleChange"
    :footer="false"
  >
    <a-tabs v-model:active-key="activeTab" v-if="supplier">
      <!-- 基本信息 -->
      <a-tab-pane key="basic" title="基本信息">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="供应商名称" :span="2">
            {{ supplier.name || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="供应商编码">
            {{ supplier.code || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="简称">
            {{ supplier.short_name || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="供应商类型">
            {{ supplier.supplier_type || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="供应商级别">
            {{ supplier.supplier_level || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="状态">
            <a-tag :color="getStatusColor(supplier.status)">
              {{ getStatusText(supplier.status) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="供应商描述" :span="2">
            {{ supplier.description || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>

      <!-- 联系信息 -->
      <a-tab-pane key="contact" title="联系信息">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="联系人">
            {{ supplier.contact_person || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="联系电话">
            {{ supplier.contact_phone || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="备用联系电话">
            {{ supplier.contact_mobile || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="联系邮箱">
            {{ supplier.contact_email || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>

      <!-- 地址信息 -->
      <a-tab-pane key="address" title="地址信息">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="省份">
            {{ supplier.province || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="城市">
            {{ supplier.city || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="邮编">
            {{ supplier.postal_code || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="详细地址">
            {{ supplier.address || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>

      <!-- 企业信息 -->
      <a-tab-pane key="company" title="企业信息">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="法定代表人">
            {{ supplier.legal_representative || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="注册资本">
            {{ supplier.registered_capital || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="营业执照号">
            {{ supplier.business_license || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="税号">
            {{ supplier.tax_id || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="企业类型">
            {{ supplier.company_type || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="官网地址">
            {{ supplier.website || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>

      <!-- 统计信息 -->
      <a-tab-pane key="statistics" title="统计信息">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="订单数量">
            {{ supplier.order_count ?? 0 }}
          </a-descriptions-item>
          <a-descriptions-item label="累计交易金额">
            {{ formatMoney(supplier.total_amount) }}
          </a-descriptions-item>
          <a-descriptions-item label="合作开始日期">
            {{ formatDate(supplier.cooperation_start_date) }}
          </a-descriptions-item>
          <a-descriptions-item label="合作结束日期">
            {{ formatDate(supplier.cooperation_end_date) }}
          </a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>

      <!-- 系统信息 -->
      <a-tab-pane key="system" title="系统信息">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="创建时间">
            {{ formatDateTime(supplier.created_at) }}
          </a-descriptions-item>
          <a-descriptions-item label="更新时间">
            {{ formatDateTime(supplier.updated_at) }}
          </a-descriptions-item>
          <a-descriptions-item label="创建人">
            {{ supplier.created_by || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="更新人">
            {{ supplier.updated_by || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="备注" :span="2">
            {{ supplier.remarks || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>
    </a-tabs>

    <a-empty v-else description="暂无数据" />
  </a-modal>
</template>

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

interface Supplier {
  id?: number
  name?: string
  code?: string
  short_name?: string
  description?: string
  contact_person?: string
  contact_phone?: string
  contact_email?: string
  contact_mobile?: string
  province?: string
  city?: string
  address?: string
  postal_code?: string
  website?: string
  legal_representative?: string
  registered_capital?: string
  business_license?: string
  tax_id?: string
  company_type?: string
  supplier_type?: string
  supplier_level?: string
  status?: string
  order_count?: number
  total_amount?: number
  cooperation_start_date?: string
  cooperation_end_date?: string
  created_at?: string
  updated_at?: string
  created_by?: string
  updated_by?: string
  remarks?: string
}

interface Props {
  visible: boolean
  supplier: Supplier | null
}

interface Emits {
  (e: 'update:visible', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const activeTab = ref('basic')

// 获取状态颜色
const getStatusColor = (status?: string) => {
  const colorMap: Record<string, string> = {
    active: 'green',
    paused: 'orange',
    blacklist: 'red',
    inactive: 'gray',
  }
  return colorMap[status || ''] || 'gray'
}

// 获取状态文本
const getStatusText = (status?: string) => {
  const textMap: Record<string, string> = {
    active: '合作中',
    paused: '暂停合作',
    blacklist: '黑名单',
    inactive: '停止合作',
  }
  return textMap[status || ''] || status || '-'
}

// 格式化金额
const formatMoney = (value?: number | string | null) => {
  if (value === null || value === undefined || value === '') return '-'
  const num = Number(value)
  if (isNaN(num)) return '-'
  return num.toLocaleString('zh-CN', {
    style: 'currency',
    currency: 'CNY',
    minimumFractionDigits: 2,
  })
}

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

// 格式化日期时间
const formatDateTime = (dateStr?: string) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  })
}

// 取消
const handleCancel = () => {
  emit('update:visible', false)
}

// 处理对话框可见性变化
const handleVisibleChange = (visible: boolean) => {
  emit('update:visible', visible)
}
</script>

<script lang="ts">
export default {
  name: 'SupplierDetailDialog',
}
</script>

<style scoped lang="less">
:deep(.arco-descriptions) {
  margin-top: 16px;
}
</style>