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

const props = defineProps({
  detailData: Object
})
const data = ref(),
  getInfo = async () => {
    // const res = await preInsDetail(props.detailData.id)
    data.value = {
      // ...res.data,
      isCompletedLogCollection: props.detailData?.isCompletedLogCollection,
      actualPerformanceIndicators: props.detailData?.actualPerformanceIndicators && JSON.parse(props.detailData?.actualPerformanceIndicators) || [],
      acceptancePersons: props.detailData?.acceptancePersons,
      preliminaryInspectionMaterials: JSON.parse(props.detailData?.preliminaryInspectionMaterials)
    }
  },
  // 材料表格
  column = [
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '材料名称',
      key: 'name',
      prop: 'name'
    },
    {
      label: '是否有材料',
      key: 'isHave',
      slot: 'isHave',
      width: 100
    },
    {
      label: '附件/说明（支持扩展名：.doc .docx .pdf）',
      key: 'files',
      slot: 'files'
    }
  ],
  column1 = [
    {
      label: '核心业务',
      prop: 'businessName',
      key: 'businessName'
    },
    {
      label: '实际成效指标',
      prop: 'name',
      key: 'name'
    },
    {
      label: '数值',
      prop: 'nums',
      key: 'nums'
    },
    {
      label: '单位',
      prop: 'unit',
      key: 'unit'
    }
  ]
// getAppReport = async () => {
  //   await appReport(appCode)
  // }
onMounted(() => {
  getInfo()
  // getAppReport()
})
</script>

<template>
  <el-collapse v-if="data">
    <!--    <el-descriptions :column="2" border>-->
    <!--      <el-descriptions-item label="试运行报告" span="2">-->
    <!--      </el-descriptions-item>-->
    <!--    </el-descriptions>-->
    <el-collapse-item name="1" class="mb-16">
      <template #title>
        <div class="collapse-title">验收人员信息</div>
      </template>
      <el-descriptions
        v-if="data?.acceptancePersons?.length"
        :column="2"
        border
        class="mb-8"
      >
        <template v-for="(item,index) in data.acceptancePersons" :key="index">
          <el-descriptions-item label="验收人员">
            {{ item.personName||'-' }}
          </el-descriptions-item>
          <el-descriptions-item label="所在单位">
            {{ item.unit||'-' }}
          </el-descriptions-item>
        </template>
      </el-descriptions>
      <no-data v-else />
    </el-collapse-item>
    <el-collapse-item name="7" class="mb-16">
      <template #title>
        <div class="collapse-title">实施信息</div>
      </template>
      <el-descriptions
        v-if="data?.actualPerformanceIndicators?.length"
        :column="2"
        border
        class="mb-8"
      >
        <el-descriptions-item label="是否完成日志数据归集" :span="2">
          {{ data.isCompletedLogCollection?'是':'否' }}
        </el-descriptions-item>
        <el-descriptions-item label="实际成效指标" :span="2">
          <table-list
            :pagination="false"
            style="width: 100%"
            :column="column1"
            :data="data.actualPerformanceIndicators"
            :empty-temp="false"
          />
        </el-descriptions-item>
      </el-descriptions>
      <no-data v-else />
    </el-collapse-item>
    <el-collapse-item
      v-for="(item,index) in data.preliminaryInspectionMaterials"
      :key="index"
      :name="index+2+''"
      class="mb-16"
    >
      <template #title>
        <div class="collapse-title">{{ item.title }}</div>
      </template>
      <table-list
        ref="tableListRef"
        :column="column"
        :data="item.data"
        :pagination="false"
        :empty-temp="false"
        class="mb-8"
      >
        <template #isHave="{scope}">
          <span>{{ scope.row.isHave?'是':'否' }}</span>
        </template>
        <template #files="{scope}">
          <template v-if="scope.row.isHave">
            <p v-for="(file,key) in scope.row.files" :key="key" class="mb-4">
              <accessory :file-name="file.name" :file-id="file?.response?.data?.id" />
            </p>
          </template>
          <template v-else>
            {{ scope.row.reason }}
          </template>
        </template>
      </table-list>
    </el-collapse-item>
  </el-collapse>
  <no-data v-else />
</template>
