<template>
  <!-- <a-spin :spinning="loading"> -->
  <div style="width: 99%; margin: 0 auto" class="bg-[#fff] py-2">
    <!-- <a-form :model="formState" name="basic" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed"> -->
    <div style="margin: 25px 0">
      <a-button type="primary" @click="router.back()" style="margin-left: 10px">返回</a-button>
      <a-button type="primary" @click="sumbitAdd" style="margin-left: 10px" v-if="route.query.type == 'edit'">填报</a-button>
    </div>
    <table width="100%" style="width: 100%" border="1" cellspacing="1">
      <tbody>
        <tr class="ant-table-cell ant-table-cell-ellipsis">
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">地块名称</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="2">{{ data.dkxx?.wrdkmc }}</td>
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">地块属性</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="3">{{ data.dkxx?.dksx }}</td>
        </tr>
        <tr class="ant-table-cell ant-table-cell-ellipsis">
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">污染地块调查</td>
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">工作</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="1">{{ data.dkxx?.dkdcgz }}</td>

          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">结论</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="1">{{ data.dkxx?.dkdcjl }}</td>

          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">报告</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="1">{{ data.dkxx?.dkdcbg }}</td>
        </tr>
        <tr class="ant-table-cell ant-table-cell-ellipsis">
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">风险评估</td>
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">工作</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="1">{{ data.dkxx?.fxpggz }}</td>

          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">结论</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="1">{{ data.dkxx?.fxpgjl }}</td>

          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">报告</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="1">{{ data.dkxx?.fxpgbg }}</td>
        </tr>
        <tr class="ant-table-cell ant-table-cell-ellipsis">
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">风险管控及修复</td>
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">工作</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="1">{{ data.dkxx?.gkxfgz }}</td>

          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">报告</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="1">{{ data.dkxx?.gkxfbg }}</td>

          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">类型</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="1">{{ data.dkxx?.gkxflx }}</td>
        </tr>
        <tr class="ant-table-cell ant-table-cell-ellipsis">
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">效果评估</td>
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">工作</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="1">{{ data.dkxx?.xgpggz }}</td>

          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">报告</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="3">{{ data.dkxx?.xgpgbg }}</td>
        </tr>
        <tr class="ant-table-cell ant-table-cell-ellipsis">
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">开发利用现状</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="2">
            <a-select
              style="width: 100%"
              v-model:value="formState.kflyxz"
              show-search
              placeholder="请选择开发利用现状"
              v-if="route.query.type == 'edit'"
              :options="[
                { value: '1', label: '未发现开工迹象' },
                { value: '2', label: '有发现开工迹象' },
                { value: '3', label: '正在建设施工' },
                { value: '4', label: '已完成开发建设' },
              ]"
            >
            </a-select>
            <span v-else>
              {{ data.hsList[0]?.kflyxzmc }}
            </span>
          </td>
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">开发利用描述</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="3">
            <a-select
              v-if="route.query.type == 'edit'"
              style="width: 100%"
              v-model:value="formState.kfxzms"
              show-search
              placeholder="请选择开发利用现状"
              :options="formState.kflyxz == '2' ? kfxzmsList2 : formState.kflyxz == '3' ? kfxzmsList3 : []"
            >
            </a-select>
            <span v-else>
              {{ data.hsList[0]?.kfxzmsmc }}
            </span>
          </td>
        </tr>
        <tr class="ant-table-cell ant-table-cell-ellipsis">
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">核查附件</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="2">
            <JUpload v-if="route.query.type == 'edit'" :maxCount="2" @update:value="fcfjUpdataVal" />
            <!-- <JUpload :maxCount="2" @update:value="fcfjUpdataVal" /> -->
            <template v-else>
              <a-button
                v-if="data.hsList[0]?.hcfj"
                preIcon="ant-design:vertical-align-bottom-outlined"
                style="margin-left: 10px"
                @click="down(data.hsList[0]?.hcfj, data.hsList[0]?.hcfjmc)"
                type="primary"
              >
                下载
              </a-button>
            </template>
          </td>
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">现场情况</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="3">
            <JUpload v-if="route.query.type == 'edit'" :maxCount="2" @update:value="xcqkUpdataVal" />
            <template v-else>
              <a-button
                v-if="data.hsList[0]?.xcqkfj"
                preIcon="ant-design:vertical-align-bottom-outlined"
                style="margin-left: 10px"
                @click="down(data.hsList[0].xcqkfj, data.hsList[0]?.xcqkfjmc)"
                type="primary"
              >
                下载
              </a-button>
            </template>
          </td>
        </tr>
        <tr class="ant-table-cell ant-table-cell-ellipsis">
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor">核查部门</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="6">
            <!-- <a-form-item label="hcdw"> -->
            <a-input v-model:value="formState.hcdw" v-if="route.query.type == 'edit'" />
            <span v-else>
              {{ data.hsList[0]?.hcdw }}
            </span>
            <!-- </a-form-item> -->
          </td>
        </tr>
      </tbody>
    </table>
    <a-table style="margin: 15px 0" :columns="wgcolumns" :data-source="data?.hsList" bordered>
      <template #bodyCell="{ column, text, record, index }">
        <template v-for="col in ['hcfj', 'xcqkfj']" :key="col">
          <template v-if="column.dataIndex === col">
            <a-button
              preIcon="ant-design:vertical-align-bottom-outlined"
              style="margin-left: 10px"
              v-if="record[col]"
              @click="
                down(
                  record[col],
                  record[col + 'mc'] ? record[col + 'mc'] : col == 'hcfj' ? '核查附件' : col == 'xcqkfj' ? '现场情况' : '图片'
                )
              "
              type="primary"
            >
              下载
            </a-button>
          </template>
        </template>
      </template>
    </a-table>
    <!-- </a-form> -->
  </div>
  <!-- </a-spin> -->
</template>

<script lang="ts" setup>
  import { useRoute, useRouter } from 'vue-router';
  import { ref } from 'vue';
  import { getHsqk, addXchs } from './api';
  import { useMessage } from '/@/hooks/web/useMessage';
  import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
  import { downloadFile } from '/@/api/common/api';
  const route = useRoute();
  const router = useRouter();
  const { createMessage } = useMessage();
  let data = ref({
    hsList: [{ kflyxzmc: '', kfxzmsmc: '', xcqkfj: '', hcfj: '', hcdw: '' }],
  });
  let loading = ref(true);
  const kfxzmsList2 = [
    { value: '1', label: 'A、风险管控，修复项目管控' },
    { value: '2', label: 'B、与风险管控，修复无关的项目建设' },
  ];
  const kfxzmsList3 = [
    { value: '3', label: 'A、风险管控，修复项目修复' },
    { value: '4', label: 'B、与风险管控，修复无关的项目建设' },
  ];
  const formState = ref({
    kflyxz: '',
    kfxzms: '',
    hcfj: '',
    hcfjmc: '核查附件',
    xcqkfj: '',
    xcqkfjmc: '现场情况',
    hcdw: '',
    wrdkid: route.query.wrdkid,
  });
  const wgcolumns = [
    {
      title: '开发现状',
      dataIndex: 'kflyxzmc',
    },
    {
      title: '开发现状描述',
      dataIndex: 'kfxzmsmc',
    },
    {
      title: '核查附件',
      dataIndex: 'hcfj',
    },
    {
      title: '现场情况',
      dataIndex: 'xcqkfj',
    },
    {
      title: '核查单位',
      dataIndex: 'hcdw',
    },
    {
      title: '核查时间',
      dataIndex: 'createTsamp',
    },
  ];
  function fcfjUpdataVal(val) {
    formState.value.hcfj = val;
  }
  function xcqkUpdataVal(val) {
    formState.value.xcqkfj = val;
  }
  async function sumbitAdd() {
    // 添加必填条件
    // if (!formState.value.kflyxz) {
    //     createMessage.info('请选择开发利用现状')
    //     return false
    // } else {
    //     if (formState.value.kflyxz == '2' || formState.value.kflyxz == '3') {
    //         if (!formState.value.kfxzms) {
    //             createMessage.info('请选择开发利用现状描述')
    //             return false
    //         }
    await addXchs(formState.value);
    router.back();
    // }
    // }
  }
  async function init() {
    // console.log(route.query.wrdkid);
    // 拿到路由传参 请求接口
    let result = await getHsqk({ wrdkid: route.query.wrdkid });
    data.value = result; //响应式赋值
    loading.value = false; //加载中状态
  }
  function down(url, name) {
    let fileExtension = url.split('.').pop();
    downloadFile('/sys/common/static' + url, `${name}.${fileExtension}`);
  }
  init();
  defineProps({
    data: Object,
  });
</script>

<style scoped>
  table {
    border-collapse: collapse;
    border: 1px #dfe6ec solid;
  }

  tbody tr td {
    padding: 6px;
    height: 40px;
  }

  .bgColor {
    background-color: rgba(244, 247, 249, 0.8);
    text-align: center;
    width: 10%;
  }
</style>
