<script name="approvalInfo" setup>
import Accessory from '@/components/accessory/index.vue'
import { ref } from 'vue'
import { delayList } from '@/http/apis/projectStoreManage/projectStore'
const props = defineProps({
  detailData: Object
})
const visible = ref(false),
  tableData = ref([]),
  column = [
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '延期时长（月）',
      key: 'delayTime',
      prop: 'delayTime',
      width: '140'
    },
    {
      label: '延期理由',
      key: 'delayApplyReason',
      prop: 'delayApplyReason'
    },
    {
      label: '佐证材料',
      key: 'delayApplyFile',
      slot: 'delayApplyFile'
    },
    {
      label: '提交时间',
      key: 'createOn',
      prop: 'createOn'
    }
  ],
  showDialog = async () => {
    const res = await delayList(props.detailData.id)
    visible.value = true
    tableData.value = res.data
  }
</script>

<template>
  <el-descriptions :column="2" border>
    <el-descriptions-item label="建议批复总投资（万元）">
      {{ detailData.approvalAmount||'-' }}
    </el-descriptions-item>
    <el-descriptions-item label="批复时间">
      {{ detailData.approvalDate||'-' }}
    </el-descriptions-item>
    <el-descriptions-item label="建议批复年度预算（万元）">
      {{ detailData.approvalBudget||'-' }}
    </el-descriptions-item>
    <el-descriptions-item label="批复周期">
      {{ detailData.originBuildCycle||'-' }}个月
      <span class="text-danger mr-4">{{ detailData.applyDelayMonths?`延期${detailData.applyDelayMonths}个月`:'' }}</span>
      <a v-if="detailData.applyDelayMonths" @click="showDialog">详情</a>
    </el-descriptions-item>
    <el-descriptions-item label="批复文件">
      <accessory :file-name="detailData?.approvedFileName" :file-id="Number(detailData?.approvedFile)" />
    </el-descriptions-item>
    <el-descriptions-item label="建设方案">
      <accessory :file-name="detailData?.approvedConstructionPlanFileName" :file-id="Number(detailData?.approvedConstructionPlanFile)" />
    </el-descriptions-item>
  </el-descriptions>
  <el-dialog
    :model-value="visible"
    title="延期信息"
    width="60%"
    @close="visible=false"
  >
    <table-list :data="tableData" :column="column" :pagination="false">
      <template #delayApplyFile="{scope}">
        <p v-for="(file,key) in scope.row.delayApplyFile&&JSON.parse(scope.row.delayApplyFile)" :key="key">
          <accessory :file-name="file?.originalFileName" :file-id="file.id" />
        </p>
      </template>
    </table-list>
  </el-dialog>
</template>
