<script name="contractInfo" setup>
import Accessory from '@/components/accessory/index.vue'
import { ref, onMounted } from 'vue'
import NoData from '@/components/noData/index.vue'
// import { contractDetail } from '@/http/apis/declareMange/contractRecord'

const props = defineProps({
  detailData: Object
})
const data = ref(),
  getInfo = async () => {
    // const res = await contractDetail(props.detailData.id)
    data.value = props.detailData.contract
  },
  // 付款计划
  column = [
    {
      label: '付款笔数',
      type: 'index',
      width: '80'
    },
    {
      label: '付款计划',
      key: 'planAmount',
      prop: 'planAmount'
    },
    {
      label: '付款比例（%）',
      key: 'ratio',
      prop: 'ratio'
    },
    {
      label: '付款金额（万元）',
      key: 'paymentAmount',
      prop: 'paymentAmount'
    },
    {
      label: '预计付款时间',
      key: 'paymentTime',
      prop: 'paymentTime'
    }
  ]
onMounted(() => {
  getInfo()
})
</script>

<template>
  <el-descriptions v-if="data?.id" :column="2" border>
    <el-descriptions-item label="合同名称">
      {{ data.name||'-' }}
    </el-descriptions-item>
    <el-descriptions-item label="合同总金额">
      {{ data.totalAmount||'-' }}万元
    </el-descriptions-item>
    <el-descriptions-item label="供应商收款开户行">
      {{ data.supplierBank||'-' }}
    </el-descriptions-item>
    <el-descriptions-item label="采购方式">
      {{ data.supplierAccount }}
    </el-descriptions-item>
    <el-descriptions-item label="质保期">
      {{ data.warrantyPeriod||'-' }}年
    </el-descriptions-item>
    <el-descriptions-item label="质保金">
      {{ data.retentionMoney||'-' }}万元
    </el-descriptions-item>
    <el-descriptions-item label="合同签订完成时间">
      {{ data.contractTime||'-' }}
    </el-descriptions-item>
    <el-descriptions-item label="交货日期">
      {{ data.deliveryTime||'-' }}
    </el-descriptions-item>
    <el-descriptions-item label="合同附件" :span="2">
      <p v-for="(item,index) in data.attachment&&JSON.parse(data.attachment)" :key="index" class="mb-4">
        <accessory :file-name="item.originalFileName" :file-id="item.id" />
      </p>
    </el-descriptions-item>
    <el-descriptions-item label="付款计划" :span="2">
      <table-list
        ref="tableListRef"
        :column="column"
        :data="data.payments"
        :pagination="false"
        :empty-temp="false"
      />
    </el-descriptions-item>
  </el-descriptions>
  <no-data v-else />
</template>
