<template>
  <ContentWrap>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="凭证号">
        {{ detailData.no }}
      </el-descriptions-item>
      <el-descriptions-item label="凭证类型">
        <dict-tag :type="DICT_TYPE.ERP_FINANCE_VOUCHER_TYPE" :value="detailData.type" />
      </el-descriptions-item>
      <el-descriptions-item label="凭证状态">
        <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="detailData.status" />
      </el-descriptions-item>
      <el-descriptions-item label="凭证日期">
        {{ detailData.voucherTime }}
      </el-descriptions-item>
      <el-descriptions-item label="付款时间">
        {{ detailData.paymentDate }}
      </el-descriptions-item>
      <el-descriptions-item label="单据类型">
        <dict-tag :type="DICT_TYPE.ERP_FINANCE_RECEIPT_TYPE" :value="detailData.billType" />
      </el-descriptions-item>
      <el-descriptions-item label="收款单位">
        {{ detailData.payeeName }}
      </el-descriptions-item>
      <el-descriptions-item label="项目名称">
        {{ detailData.projectName }}
      </el-descriptions-item>
      <el-descriptions-item label="开户银行">
        {{ detailData.bankName }}
      </el-descriptions-item>
      <el-descriptions-item label="开户账号">
        {{ detailData.bankAccount }}
      </el-descriptions-item>
      <el-descriptions-item label="合同号">
        {{ detailData.contractNo }}
      </el-descriptions-item>
      <el-descriptions-item label="合同总金额">
        {{ detailData.contractAmount }}
      </el-descriptions-item>
      <el-descriptions-item label="税号">
        {{ detailData.taxNo }}
      </el-descriptions-item>
      <el-descriptions-item label="累计已付金额">
        {{ detailData.paidAmount }}
      </el-descriptions-item>
      <el-descriptions-item label="合同附件" v-if="detailData.contractFile">
        <el-link type="primary" :href="detailData.contractFile" target="_blank"
          >查看合同附件</el-link
        >
      </el-descriptions-item>
      <el-descriptions-item label="发票附件" v-if="detailData.invoiceFile">
        <div v-for="(file, index) in invoiceFiles" :key="index">
          <el-link type="primary" :href="file" target="_blank"
            >查看发票附件 {{ index + 1 }}</el-link
          >
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="合计金额">
        {{ detailData.totalAmount }}
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="2">
        {{ detailData.remark }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 凭证明细 -->
    <div class="mt-4">
      <h3>凭证明细</h3>
      <el-table :data="detailData.items || []" border>
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="摘要" prop="summary" min-width="180" />
        <el-table-column label="会计科目" prop="accountName" min-width="180" />
        <el-table-column label="借方金额" prop="debitAmount" align="right" min-width="120" />
        <el-table-column label="贷方金额" prop="creditAmount" align="right" min-width="120" />
      </el-table>
    </div>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { propTypes } from '@/utils/propTypes'
import * as VoucherApi from '@/api/erp/finance/voucher/voucher'
import { ElMessage } from 'element-plus'

defineOptions({ name: 'ErpFinanceVoucherDetail' })

const route = useRoute() // 路由
const { params } = route // 路由参数

const props = defineProps({
  id: propTypes.number.def(undefined)
})
const detailLoading = ref(false) // 表单的加载中
const detailData = ref<VoucherApi.VoucherVO>({} as VoucherApi.VoucherVO) // 详情数据
const queryId = Number(params.id) // 从 URL 路径参数中获取 id，确保转换为数字
const invoiceFiles = ref<string[]>([]) // 发票附件列表

/** 获得数据 */
const getInfo = async () => {
  detailLoading.value = true
  try {
    // 确保 ID 存在且为数字
    const id = props.id || queryId
    console.log('Detail page - ID:', id, 'queryId:', queryId, 'params.id:', params.id)

    if (!id || isNaN(id)) {
      ElMessage.error('凭证ID不存在或格式错误，无法查看详情')
      return
    }

    const response = await VoucherApi.getVoucher(id)
    console.log('Detail API response:', response)
    detailData.value = response || ({} as VoucherApi.VoucherVO)

    // 处理发票附件，将字符串分割为数组
    if (detailData.value.invoiceFile) {
      invoiceFiles.value = detailData.value.invoiceFile.split(',')
    }
  } finally {
    detailLoading.value = false
  }
}
defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗

/** 初始化 **/
onMounted(() => {
  getInfo()
})
</script>

<style scoped>
.mt-4 {
  margin-top: 16px;
}
</style>
