<!--
  预算详情弹窗组件
-->
<template>
  <a-modal
    v-model:visible="visible"
    :title="budgetRecord?.projectName || '项目一'"
    width="1200px"
    :mask-closable="false"
    :footer="false"
  >
    <!-- 项目概览卡片 -->
    <div class="project-overview">
      <a-descriptions 
        :column="8" 
        bordered 
        size="small"
        class="overview-info"
      >
        <a-descriptions-item label="项目编号">{{ budgetRecord?.projectCode }}</a-descriptions-item>
        <a-descriptions-item label="项目金额(万)">{{ budgetRecord?.projectAmount }}</a-descriptions-item>
        <a-descriptions-item label="项目负责人">{{ budgetRecord?.projectManager }}</a-descriptions-item>
        <a-descriptions-item label="立项日期">{{ budgetRecord?.establishDate }}</a-descriptions-item>
        <a-descriptions-item label="客户">{{ budgetRecord?.client }}</a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag color="orange">进行中</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="整体进度">
          <span>25%</span>
        </a-descriptions-item>
        <a-descriptions-item label="预算总金额(万)">{{ budgetRecord?.usedBudgetAmount }}</a-descriptions-item>
        <a-descriptions-item label="已用预算金额(万)">{{ budgetRecord?.usedBudgetAmount }}</a-descriptions-item>
        <a-descriptions-item label="剩余预算金额(万)">{{ budgetRecord?.remainingBudgetAmount }}</a-descriptions-item>
      </a-descriptions>
    </div>

    <!-- 选项卡内容 -->
    <div class="detail-tabs">
      <a-tabs v-model:active-key="activeTab" type="line">
        <!-- 基础信息 -->
        <a-tab-pane key="basic" title="基础信息">
          <div class="tab-content">
            <a-card title="基础信息" class="info-card">
              <a-descriptions :column="2" bordered>
                <a-descriptions-item label="项目名称">{{ projectDetailInfo.projectName }}</a-descriptions-item>
                <a-descriptions-item label="项目编号">{{ projectDetailInfo.projectCode }}</a-descriptions-item>
                <a-descriptions-item label="项目金额(万)">{{ projectDetailInfo.projectAmount }}</a-descriptions-item>
                <a-descriptions-item label="项目负责人">{{ projectDetailInfo.projectManager }}</a-descriptions-item>
                <a-descriptions-item label="负责人电话">{{ projectDetailInfo.managerPhone }}</a-descriptions-item>
                <a-descriptions-item label="立项日期">{{ projectDetailInfo.establishDate }}</a-descriptions-item>
                <a-descriptions-item label="交付日期">{{ projectDetailInfo.deliveryDate }}</a-descriptions-item>
                <a-descriptions-item label="联系人">{{ projectDetailInfo.contactPerson }}</a-descriptions-item>
                <a-descriptions-item label="备注">{{ projectDetailInfo.remark }}</a-descriptions-item>
                <a-descriptions-item label="预算总金额(万)">{{ projectDetailInfo.totalBudget }}</a-descriptions-item>
                <a-descriptions-item label="剩余预算金额(万)">{{ projectDetailInfo.remainingBudget }}</a-descriptions-item>
              </a-descriptions>
            </a-card>
            
            <a-card title="系统信息" class="info-card">
              <a-descriptions :column="2" bordered>
                <a-descriptions-item label="创建人">{{ systemInfo.creator }}</a-descriptions-item>
                <a-descriptions-item label="创建时间">{{ systemInfo.createTime }}</a-descriptions-item>
                <a-descriptions-item label="修改人">{{ systemInfo.modifier }}</a-descriptions-item>
                <a-descriptions-item label="修改时间">{{ systemInfo.modifyTime }}</a-descriptions-item>
                <a-descriptions-item label="审核人">{{ systemInfo.auditor }}</a-descriptions-item>
                <a-descriptions-item label="审核时间">{{ systemInfo.auditTime }}</a-descriptions-item>
              </a-descriptions>
            </a-card>
          </div>
        </a-tab-pane>

        <!-- 项目预算 -->
        <a-tab-pane key="budget" title="项目预算">
          <div class="tab-content">
            <a-table
              :data="budgetHistoryData"
              :columns="budgetHistoryColumns"
              :pagination="false"
              size="small"
            >
              <template #status="{ record }">
                <a-tag :color="getBudgetStatusColor(record.status)">
                  {{ record.statusLabel }}
                </a-tag>
              </template>
              
              <template #amount="{ record }">
                <span class="amount-text">{{ record.amount.toFixed(2) }}</span>
              </template>
            </a-table>
          </div>
        </a-tab-pane>

        <!-- 预算附件 -->
        <a-tab-pane key="attachments" title="预算附件">
          <div class="tab-content">
            <a-table
              :data="attachmentData"
              :columns="attachmentColumns"
              :pagination="false"
              size="small"
            >
              <template #action="{ record }">
                <a-space>
                  <a-button type="text" size="small" @click="downloadAttachment(record)">
                    下载
                  </a-button>
                  <a-button type="text" size="small" @click="previewAttachment(record)">
                    预览
                  </a-button>
                </a-space>
              </template>
            </a-table>
          </div>
        </a-tab-pane>

        <!-- 操作记录 -->
        <a-tab-pane key="logs" title="操作记录">
          <div class="tab-content">
            <a-table
              :data="operationLogs"
              :columns="logColumns"
              :pagination="false"
              size="small"
            >
              <template #operation="{ record }">
                <a-tag :color="getOperationColor(record.operation)">
                  {{ record.operation }}
                </a-tag>
              </template>
            </a-table>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import type { TableColumnData } from '@arco-design/web-vue'
import type { BudgetRecordResp } from '@/apis/project/budget'

interface Props {
  visible: boolean
  budgetRecord?: BudgetRecordResp | null
}

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

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

const emit = defineEmits<Emits>()

const visible = ref(props.visible)
const activeTab = ref('basic')

// 项目详细信息
const projectDetailInfo = reactive({
  projectName: '广州洪湖路一期项目',
  projectCode: 'HWPC0001',
  projectAmount: 126.00,
  projectManager: '纪广',
  managerPhone: '13888888888',
  establishDate: '2024-05-02',
  deliveryDate: '交付日期',
  contactPerson: '李四',
  remark: '请输入',
  totalBudget: 75.00,
  remainingBudget: 25.00
})

// 系统信息
const systemInfo = reactive({
  creator: '张三',
  createTime: '2023-12-01 13:32',
  modifier: '傅彩瀞',
  modifyTime: '2024-02-02 11:16',
  auditor: '傅彩瀞',
  auditTime: '2024-02-02 11:16'
})

// 预算历史数据
const budgetHistoryData = ref([
  {
    applyDate: '2024-05-02',
    applicant: '张三',
    amount: 75.00,
    status: 'approved',
    statusLabel: '已批准',
    auditDate: '2024-05-03',
    auditor: '李四'
  },
  {
    applyDate: '2024-06-01', 
    applicant: '王五',
    amount: 50.00,
    status: 'pending',
    statusLabel: '待审核',
    auditDate: '',
    auditor: ''
  }
])

// 附件数据
const attachmentData = ref([
  {
    id: '1',
    fileName: '设备采购清单.xlsx',
    fileSize: '2.5MB',
    uploadTime: '2024-05-02 10:30',
    uploader: '张三'
  },
  {
    id: '2',
    fileName: '预算说明文档.pdf',
    fileSize: '1.2MB',
    uploadTime: '2024-05-02 14:20',
    uploader: '李四'
  }
])

// 操作记录
const operationLogs = ref([
  {
    time: '2024-05-03 09:15',
    operator: '李四',
    operation: '审核通过',
    remark: '预算合理，同意申请'
  },
  {
    time: '2024-05-02 16:30',
    operator: '张三',
    operation: '提交申请',
    remark: '申请设备采购预算'
  },
  {
    time: '2024-05-02 14:20',
    operator: '张三',
    operation: '上传附件',
    remark: '上传预算说明文档'
  }
])

// 表格列配置
const budgetHistoryColumns: TableColumnData[] = [
  { title: '申请日期', dataIndex: 'applyDate', width: 120 },
  { title: '申请人', dataIndex: 'applicant', width: 100 },
  { title: '申请金额(万)', dataIndex: 'amount', slotName: 'amount', width: 120 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
  { title: '审核日期', dataIndex: 'auditDate', width: 120 },
  { title: '审核人', dataIndex: 'auditor', width: 100 }
]

const attachmentColumns: TableColumnData[] = [
  { title: '文件名', dataIndex: 'fileName', width: 200 },
  { title: '文件大小', dataIndex: 'fileSize', width: 100 },
  { title: '上传时间', dataIndex: 'uploadTime', width: 160 },
  { title: '上传人', dataIndex: 'uploader', width: 100 },
  { title: '操作', slotName: 'action', width: 120 }
]

const logColumns: TableColumnData[] = [
  { title: '操作时间', dataIndex: 'time', width: 160 },
  { title: '操作人', dataIndex: 'operator', width: 100 },
  { title: '操作类型', dataIndex: 'operation', slotName: 'operation', width: 120 },
  { title: '备注', dataIndex: 'remark', ellipsis: true, tooltip: true }
]

// 监听visible变化
watch(() => props.visible, (newVal) => {
  visible.value = newVal
  if (newVal) {
    activeTab.value = 'basic'
  }
})

watch(visible, (newVal) => {
  emit('update:visible', newVal)
})

// 获取预算状态颜色
const getBudgetStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    'approved': 'green',
    'pending': 'orange',
    'rejected': 'red'
  }
  return colorMap[status] || 'gray'
}

// 获取操作类型颜色
const getOperationColor = (operation: string) => {
  const colorMap: Record<string, string> = {
    '审核通过': 'green',
    '审核拒绝': 'red',
    '提交申请': 'blue',
    '上传附件': 'purple'
  }
  return colorMap[operation] || 'gray'
}

// 下载附件
const downloadAttachment = (record: any) => {
  // 实现下载逻辑
  console.log('下载附件:', record.fileName)
}

// 预览附件
const previewAttachment = (record: any) => {
  // 实现预览逻辑
  console.log('预览附件:', record.fileName)
}
</script>

<style scoped lang="scss">
.project-overview {
  margin-bottom: 24px;
  
  .overview-info {
    background: #fafafa;
  }
}

.detail-tabs {
  .tab-content {
    padding: 20px 0;
  }
  
  .info-card {
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .amount-text {
    font-weight: 500;
    color: #f56500;
  }
}
</style> 