<!--
  预算审核弹窗组件
-->
<template>
  <a-modal
    v-model:visible="visible"
    title="项目预算审核"
    width="1000px"
    :mask-closable="false"
    :footer="false"
  >
    <!-- 项目基本信息 -->
    <div class="project-info-section">
      <a-descriptions 
        :column="5" 
        bordered 
        size="small"
        class="project-info"
      >
        <a-descriptions-item label="项目名称">{{ budgetRecord?.projectName }}</a-descriptions-item>
        <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?.client }}</a-descriptions-item>
        <a-descriptions-item label="已有预算金额(万)" class="budget-highlight">{{ budgetRecord?.usedBudgetAmount || '75.00' }}</a-descriptions-item>
        <a-descriptions-item label="本次预算金额(万)" class="budget-highlight">{{ budgetRecord?.applyBudgetAmount || '74.00' }}</a-descriptions-item>
      </a-descriptions>
    </div>

    <!-- 申请预算项 -->
    <div class="budget-items-section">
      <h3 class="section-title">申请预算项</h3>
      
      <a-table
        :data="budgetItemsData"
        :columns="budgetColumns"
        :pagination="false"
        size="small"
        class="budget-table"
      >
        <template #budgetAmount="{ record }">
          <span class="amount-text">{{ record.budgetAmount.toFixed(2) }}</span>
        </template>
        
        <template #attachments="{ record }">
          <a-space v-if="record.attachments?.length">
            <a-button 
              v-for="file in record.attachments" 
              :key="file.id"
              type="primary" 
              size="small"
              @click="viewAttachment(file)"
            >
              查看
            </a-button>
          </a-space>
          <span v-else>--</span>
        </template>
      </a-table>
      
      <!-- 合计 -->
      <div class="total-amount">
        <span class="total-label">合计：</span>
        <span class="total-value">{{ totalAmount.toFixed(2) }}</span>
      </div>
    </div>

    <!-- 审核意见 -->
    <div class="audit-section">
      <h3 class="section-title">审核意见</h3>
      <a-textarea 
        v-model="auditRemark" 
        placeholder="同意。"
        :rows="4"
        :max-length="500"
        show-word-limit
      />
    </div>

    <!-- 操作按钮 -->
    <div class="action-section">
      <a-space>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="outline" status="danger" @click="handleReject">审核拒绝</a-button>
        <a-button type="primary" @click="handleApprove">审核通过</a-button>
      </a-space>
    </div>
  </a-modal>
</template>

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

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

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

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

const emit = defineEmits<Emits>()

const visible = ref(props.visible)
const auditRemark = ref('同意。')

// 预算项数据（模拟数据，实际应该从props.budgetRecord获取）
const budgetItemsData = ref([
  {
    budgetName: '设备采购',
    budgetType: '采购',
    budgetAmount: 50.00,
    budgetDescription: '--',
    attachments: []
  },
  {
    budgetName: '管理费用',
    budgetType: '人工',
    budgetAmount: 16.00,
    budgetDescription: '--',
    attachments: []
  },
  {
    budgetName: '人工费用',
    budgetType: '管理费',
    budgetAmount: 8.00,
    budgetDescription: '--',
    attachments: []
  }
])

// 表格列配置
const budgetColumns: TableColumnData[] = [
  { title: '预算名称', dataIndex: 'budgetName', width: 150 },
  { title: '预算类型', dataIndex: 'budgetType', width: 120 },
  { title: '预算金额(万)', dataIndex: 'budgetAmount', slotName: 'budgetAmount', width: 130 },
  { title: '预算说明', dataIndex: 'budgetDescription', width: 150 },
  { title: '附件', dataIndex: 'attachments', slotName: 'attachments', width: 100 }
]

// 计算总金额
const totalAmount = computed(() => {
  return budgetItemsData.value.reduce((sum, item) => sum + item.budgetAmount, 0)
})

// 监听visible变化
watch(() => props.visible, (newVal) => {
  visible.value = newVal
  if (newVal && props.budgetRecord) {
    // 重置审核意见
    auditRemark.value = '同意。'
  }
})

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

// 查看附件
const viewAttachment = (file: any) => {
  // 打开附件预览或下载
  window.open(file.url, '_blank')
}

// 审核通过
const handleApprove = async () => {
  try {
    if (!props.budgetRecord?.id) {
      Message.error('预算记录ID不存在')
      return
    }
    
    await auditBudget(props.budgetRecord.id, {
      auditStatus: 'approved',
      auditRemark: auditRemark.value
    })
    
    Message.success('审核通过成功')
    emit('success')
    visible.value = false
  } catch (error) {
    console.error('审核失败:', error)
    Message.error('审核失败')
  }
}

// 审核拒绝
const handleReject = async () => {
  try {
    if (!props.budgetRecord?.id) {
      Message.error('预算记录ID不存在')
      return
    }
    
    if (!auditRemark.value.trim()) {
      Message.warning('请填写审核意见')
      return
    }
    
    await auditBudget(props.budgetRecord.id, {
      auditStatus: 'rejected',
      auditRemark: auditRemark.value
    })
    
    Message.success('审核拒绝成功')
    emit('success')
    visible.value = false
  } catch (error) {
    console.error('审核失败:', error)
    Message.error('审核失败')
  }
}

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

<style scoped lang="scss">
.project-info-section {
  margin-bottom: 24px;
  
  .project-info {
    background: #fafafa;
  }
  
  .budget-highlight {
    color: #f56500;
    font-weight: 500;
  }
}

.budget-items-section {
  margin-bottom: 24px;
  
  .section-title {
    color: #1890ff;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    padding-left: 8px;
    border-left: 3px solid #1890ff;
  }
  
  .budget-table {
    margin-bottom: 16px;
  }
  
  .amount-text {
    font-weight: 500;
    color: #f56500;
  }
  
  .total-amount {
    text-align: right;
    padding: 12px 16px;
    background: #f7f8fa;
    border-radius: 4px;
    
    .total-label {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
    
    .total-value {
      font-size: 18px;
      font-weight: 600;
      color: #f56500;
      margin-left: 8px;
    }
  }
}

.audit-section {
  margin-bottom: 24px;
  
  .section-title {
    color: #1890ff;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    padding-left: 8px;
    border-left: 3px solid #1890ff;
  }
}

.action-section {
  text-align: right;
  padding-top: 16px;
  border-top: 1px solid #e5e6eb;
}
</style> 