<template>
  <a-modal
    :visible="visible"
    title="支付详情"
    width="800px"
    @cancel="handleCancel"
    :footer="false"
  >
    <div class="payment-detail">
      <!-- 基本信息 -->
      <a-card title="基本信息" class="detail-card" :bordered="false">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="设备名称">
            {{ paymentData?.equipmentName || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="设备类型">
            {{ paymentData?.equipmentType || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="设备型号">
            {{ paymentData?.equipmentModel || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="品牌">
            {{ paymentData?.brand || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="供应商">
            {{ paymentData?.supplierName || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="采购订单">
            {{ paymentData?.purchaseOrder || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <!-- 采购信息 -->
      <a-card title="采购信息" class="detail-card" :bordered="false">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="采购价格">
            ¥{{ paymentData?.purchasePrice || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="采购数量">
            {{ paymentData?.quantity || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="总金额">
            ¥{{ paymentData?.totalPrice || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="采购日期">
            {{ paymentData?.purchaseTime || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <!-- 支付信息 -->
      <a-card title="支付信息" class="detail-card" :bordered="false">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="支付状态">
            <a-tag :color="getPaymentStatusColor(paymentData?.paymentStatus)">
              {{ getPaymentStatusText(paymentData?.paymentStatus) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="支付方式">
            {{ paymentData?.paymentMethod || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="支付金额">
            ¥{{ paymentData?.paymentAmount || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="支付时间">
            {{ paymentData?.paymentTime || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="支付人">
            {{ paymentData?.paymentPerson || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="支付备注">
            {{ paymentData?.paymentRemark || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <!-- 发票信息 -->
      <a-card title="发票信息" class="detail-card" :bordered="false">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="发票状态">
            <a-tag :color="getInvoiceStatusColor(paymentData?.invoiceStatus)">
              {{ getInvoiceStatusText(paymentData?.invoiceStatus) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="发票类型">
            {{ paymentData?.invoiceType || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="发票号码">
            {{ paymentData?.invoiceNumber || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="开票日期">
            {{ paymentData?.invoiceDate || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="发票金额">
            ¥{{ paymentData?.invoiceAmount || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="税率">
            {{ paymentData?.taxRate || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="税额">
            ¥{{ paymentData?.taxAmount || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="不含税金额">
            ¥{{ paymentData?.amountWithoutTax || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <!-- 合同信息 -->
      <a-card title="合同信息" class="detail-card" :bordered="false">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="合同编号">
            {{ paymentData?.contractNumber || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="合同状态">
            <a-tag :color="getContractStatusColor(paymentData?.contractStatus)">
              {{ getContractStatusText(paymentData?.contractStatus) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="合同金额">
            ¥{{ paymentData?.contractAmount || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="签订日期">
            {{ paymentData?.contractDate || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="付款条件">
            {{ paymentData?.paymentTerms || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="付款期限">
            {{ paymentData?.paymentDeadline || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import type { EquipmentResp } from '@/apis/equipment/type'

interface Props {
  visible: boolean
  paymentData?: EquipmentResp | null
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  paymentData: null,
})

const emit = defineEmits<{
  'update:visible': [value: boolean]
}>()

// 获取支付状态颜色
const getPaymentStatusColor = (status?: string) => {
  const colorMap: Record<string, string> = {
    NOT_PAID: 'gray',
    PAID: 'green',
    PARTIALLY_PAID: 'orange',
    REJECTED: 'red',
  }
  return colorMap[status || ''] || 'blue'
}

// 获取支付状态文本
const getPaymentStatusText = (status?: string) => {
  const textMap: Record<string, string> = {
    NOT_PAID: '未支付',
    PAID: '已支付',
    PARTIALLY_PAID: '部分支付',
    REJECTED: '已拒付',
  }
  return textMap[status || ''] || '未知'
}

// 获取发票状态颜色
const getInvoiceStatusColor = (status?: string) => {
  const colorMap: Record<string, string> = {
    NOT_ISSUED: 'gray',
    ISSUED: 'green',
    PENDING: 'orange',
    REJECTED: 'red',
  }
  return colorMap[status || ''] || 'blue'
}

// 获取发票状态文本
const getInvoiceStatusText = (status?: string) => {
  const textMap: Record<string, string> = {
    NOT_ISSUED: '未开票',
    ISSUED: '已开票',
    PENDING: '待开票',
    REJECTED: '已拒开',
  }
  return textMap[status || ''] || '未知'
}

// 获取合同状态颜色
const getContractStatusColor = (status?: string) => {
  const colorMap: Record<string, string> = {
    DRAFT: 'gray',
    SIGNED: 'green',
    EXECUTING: 'blue',
    COMPLETED: 'purple',
    TERMINATED: 'red',
  }
  return colorMap[status || ''] || 'blue'
}

// 获取合同状态文本
const getContractStatusText = (status?: string) => {
  const textMap: Record<string, string> = {
    DRAFT: '草稿',
    SIGNED: '已签订',
    EXECUTING: '执行中',
    COMPLETED: '已完成',
    TERMINATED: '已终止',
  }
  return textMap[status || ''] || '未知'
}

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

<style scoped lang="scss">
.payment-detail {
  .detail-card {
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .arco-descriptions-item-label {
    font-weight: 600;
    color: var(--color-text-1);
  }
  
  .arco-descriptions-item-value {
    color: var(--color-text-2);
  }
}
</style>
