<template>
  <a-modal
    v-model:visible="visible"
    title="审批详情"
    width="800px"
    :footer="false"
    @cancel="handleCancel"
  >
    <div class="approval-detail" v-if="approvalData">
      <!-- 基本信息 -->
      <div class="detail-section">
        <h3 class="section-title">
          <IconInfoCircle style="margin-right: 8px; color: var(--color-primary);" />
          基本信息
        </h3>
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="设备名称">
            {{ approvalData.equipmentName }}
          </a-descriptions-item>
          <a-descriptions-item label="设备类型">
            {{ approvalData.equipmentType }}
          </a-descriptions-item>
          <a-descriptions-item label="业务类型">
            <a-tag :color="getBusinessTypeColor(approvalData.businessType)">
              {{ getBusinessTypeText(approvalData.businessType) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="设备型号">
            {{ approvalData.equipmentModel }}
          </a-descriptions-item>
          <a-descriptions-item label="品牌">
            {{ approvalData.brand || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="供应商">
            {{ approvalData.supplierName || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="数量">
            {{ approvalData.quantity || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <!-- 价格信息 -->
      <div class="detail-section">
        <h3 class="section-title">
          <IconFile style="margin-right: 8px; color: var(--color-success);" />
          价格信息
        </h3>
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="采购价格">
            <span v-if="approvalData.purchasePrice" class="price-text">
              ¥{{ formatPrice(approvalData.purchasePrice) }}
            </span>
            <span v-else class="no-data">-</span>
          </a-descriptions-item>
          <a-descriptions-item label="总价">
            <span v-if="approvalData.totalPrice" class="price-text">
              ¥{{ formatPrice(approvalData.totalPrice) }}
            </span>
            <span v-else class="no-data">-</span>
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <!-- 申请信息 -->
      <div class="detail-section">
        <h3 class="section-title">
          <IconUser style="margin-right: 8px; color: var(--color-warning);" />
          申请信息
        </h3>
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="申请人">
            {{ approvalData.applicantName }}
          </a-descriptions-item>
          <a-descriptions-item label="申请时间">
            {{ formatDateTime(approvalData.applyTime) }}
          </a-descriptions-item>
          <a-descriptions-item label="申请原因" :span="2">
            {{ approvalData.applyReason || '暂无申请原因' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <!-- 审批信息 -->
      <div class="detail-section" v-if="approvalData.approvalStatus !== ApprovalStatus.PENDING">
        <h3 class="section-title">
          <IconCheckCircle style="margin-right: 8px; color: var(--color-success);" />
          审批信息
        </h3>
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="审批状态">
            <a-tag :color="getApprovalStatusColor(approvalData.approvalStatus)">
              {{ getApprovalStatusText(approvalData.approvalStatus) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="审批人">
            {{ approvalData.approverName || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="审批时间">
            {{ formatDateTime(approvalData.approvalTime) }}
          </a-descriptions-item>
          <a-descriptions-item label="审批意见" :span="2">
            {{ approvalData.approvalComment || '暂无审批意见' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <!-- 审批状态 -->
      <div class="detail-section" v-else>
        <h3 class="section-title">
          <IconClockCircle style="margin-right: 8px; color: var(--color-warning);" />
          审批状态
        </h3>
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="当前状态">
            <a-tag :color="getApprovalStatusColor(approvalData.approvalStatus)">
              {{ getApprovalStatusText(approvalData.approvalStatus) }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <!-- 操作按钮 -->
      <div class="detail-footer">
        <a-space>
          <a-button 
            v-if="approvalData.approvalStatus === ApprovalStatus.PENDING"
            type="primary"
            @click="handleApprove"
          >
            <template #icon><IconCheckCircle /></template>
            审批通过
          </a-button>
          <a-button 
            v-if="approvalData.approvalStatus === ApprovalStatus.PENDING"
            status="danger"
            @click="handleReject"
          >
            <template #icon><IconCloseCircle /></template>
            审批拒绝
          </a-button>
          <a-button @click="handleCancel">
            关闭
          </a-button>
        </a-space>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import {
  IconInfoCircle,
  IconFile,
  IconUser,
  IconCheckCircle,
  IconCloseCircle,
  IconClockCircle
} from '@arco-design/web-vue/es/icon'
import type { EquipmentApprovalResp } from '@/apis/equipment/type'
import { ApprovalStatus, BusinessType } from '@/apis/equipment/type'

defineOptions({ name: 'ApprovalDetailModal' })

// Props
interface Props {
  visible: boolean
  approvalData: EquipmentApprovalResp | null
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  'update:visible': [value: boolean]
  success: []
  approve: [data: EquipmentApprovalResp]
  reject: [data: EquipmentApprovalResp]
}>()

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 格式化价格
const formatPrice = (price: number) => {
  return price.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  })
}

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

// 获取业务类型颜色
const getBusinessTypeColor = (type: BusinessType) => {
  const colorMap: Record<string, string> = {
    [BusinessType.PROCUREMENT]: 'blue',
    [BusinessType.BORROW]: 'green',
    [BusinessType.RETURN]: 'orange',
  }
  return colorMap[type] || 'gray'
}

// 获取业务类型文本
const getBusinessTypeText = (type: BusinessType) => {
  const textMap: Record<string, string> = {
    [BusinessType.PROCUREMENT]: '采购',
    [BusinessType.BORROW]: '借用',
    [BusinessType.RETURN]: '归还',
  }
  return textMap[type] || '未知'
}

// 获取审批状态颜色
const getApprovalStatusColor = (status: ApprovalStatus) => {
  const colorMap: Record<string, string> = {
    [ApprovalStatus.PENDING]: 'orange',
    [ApprovalStatus.APPROVED]: 'green',
    [ApprovalStatus.REJECTED]: 'red',
  }
  return colorMap[status] || 'blue'
}

// 获取审批状态文本
const getApprovalStatusText = (status: ApprovalStatus) => {
  const textMap: Record<string, string> = {
    [ApprovalStatus.PENDING]: '待审批',
    [ApprovalStatus.APPROVED]: '已通过',
    [ApprovalStatus.REJECTED]: '已拒绝',
  }
  return textMap[status] || '未知'
}

// 审批通过
const handleApprove = () => {
  if (props.approvalData) {
    emit('approve', props.approvalData)
  }
}

// 审批拒绝
const handleReject = () => {
  if (props.approvalData) {
    emit('reject', props.approvalData)
  }
}

// 取消
const handleCancel = () => {
  visible.value = false
}
</script>

<style scoped lang="scss">
.approval-detail {
  .detail-section {
    margin-bottom: 24px;
    
    .section-title {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 600;
      color: var(--color-text-1);
      border-bottom: 2px solid var(--color-border);
      padding-bottom: 8px;
    }
    
    .arco-descriptions {
      .arco-descriptions-item-label {
        font-weight: 500;
        color: var(--color-text-1);
        background-color: var(--color-fill-1);
      }
      
      .arco-descriptions-item-value {
        color: var(--color-text-2);
      }
    }
  }
  
  .price-text {
    color: #f56c6c;
    font-weight: 500;
  }
  
  .no-data {
    color: var(--color-text-4);
    font-style: italic;
  }
  
  .detail-footer {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    
    .arco-btn {
      border-radius: 6px;
      font-weight: 500;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .approval-detail {
    .detail-section {
      .arco-descriptions {
        .arco-descriptions-item {
          display: block;
          
          .arco-descriptions-item-label {
            display: block;
            width: 100%;
            text-align: left;
            padding: 8px 12px;
          }
          
          .arco-descriptions-item-value {
            display: block;
            width: 100%;
            padding: 8px 12px;
          }
        }
      }
    }
    
    .detail-footer {
      flex-direction: column;
      align-items: center;
      
      .arco-space {
        flex-direction: column;
        width: 100%;
        
        .arco-btn {
          width: 100%;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>
