<template>
  <a-spin :spinning="loading">
    <div style="width: 99%; margin: 10px auto" class="bg-[#fff] py-2">
      <div style="margin: 10px 0">
        <a-button type="primary" @click="router.back()" style="margin-left: 10px">返回</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">{{ data.xcjd?.jdglbt }}</td>
            <td class="ant-table-cell ant-table-cell-ellipsis bgColor">监督管理单位</td>
            <td class="ant-table-cell ant-table-cell-ellipsis">{{ data.xcjd?.jdgldw }}</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">{{ data.xcjd?.jdglsj }}</td>

            <td class="ant-table-cell ant-table-cell-ellipsis bgColor">核查人员</td>
            <td class="ant-table-cell ant-table-cell-ellipsis">{{ data.xcjd?.xcjdhcName }}</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">
              <!-- {{ data.xcjd?.xcjdhcName }} -->
            </td>
            <td class="ant-table-cell ant-table-cell-ellipsis bgColor">现场监督结论</td>
            <td class="ant-table-cell ant-table-cell-ellipsis">{{ data.xcjd?.jdgljl }}</td>
          </tr>
          <tr class="ant-table-cell ant-table-cell-ellipsis">
            <td class="ant-table-cell ant-table-cell-ellipsis bgColor" bgColor>督查情况</td>
            <td class="ant-table-cell ant-table-cell-ellipsis" colspan="3">
              {{ data.xcjd?.bz }}
            </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="3">
              <a-button
                preIcon="ant-design:vertical-align-bottom-outlined"
                style="margin-left: 10px"
                @click="down(data.xcjd?.jdglfj, data.xcjd?.jdglfjmc ? data.xcjd?.jdglfjmc : '督察管理')"
                type="primary"
              >
                下载
              </a-button>
            </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">
              {{ dictName('yn', data.xcjd?.sfywgkgjsjx) }}
            </td>
            <td class="ant-table-cell ant-table-cell-ellipsis bgColor">是否有污染现象</td>
            <td class="ant-table-cell ant-table-cell-ellipsis">
              {{ dictName('yn', data.xcjd?.sfywrxx) }}
            </td>
          </tr>
        </tbody>
      </table>
      <!-- <span v-for="(item,index) in data.wgList">
                {{ item.wd }}
            </span> -->
      <a-table style="margin: 15px 0" :columns="wgcolumns" :data-source="data.wgList" bordered>
        <template #bodyCell="{ column, text, record, index }">
          <template v-if="column.dataIndex === 'wgkgjszp'">
            <div style="position: relative">
              <a-button
                preIcon="ant-design:vertical-align-bottom-outlined"
                style="margin-left: 10px"
                v-for="(item, index) in record.wgkgjszp.split(',')"
                @click="down(item, record.wgkgjszpmc ? record.wgkgjszpmc : '违规开工建设照片')"
                type="primary"
              >
                下载
              </a-button>
            </div>
          </template>
        </template>
      </a-table>
      <a-table :columns="wrcolumns" :data-source="data.wrList" bordered>
        <template #bodyCell="{ column, text, record, index }">
          <template v-if="column.dataIndex === 'wgkgjszp'">
            <div style="position: relative">
              <a-button
                preIcon="ant-design:vertical-align-bottom-outlined"
                style="margin-left: 10px"
                v-for="(item, index) in record.wgkgjszp.split(',')"
                @click="down(item, record.wgkgjszpmc ? record.wgkgjszpmc : '污染区域照片')"
                type="primary"
              >
                下载
              </a-button>
            </div>
          </template>
        </template>
      </a-table>
    </div>
  </a-spin>
</template>

<script lang="ts" setup>
  import { useRoute, useRouter } from 'vue-router';
  import { ref } from 'vue';
  import { getLookList } from './api';
  import { dictName } from '/@/utils/domUtils';
  import { downloadFile } from '/@/api/common/api';
  const wrcolumns = [
    {
      title: '污染区域',
      dataIndex: 'wgkgjsqy',
    },
    {
      title: '纬度',
      dataIndex: 'jd',
    },
    {
      title: '经度',
      dataIndex: 'wd',
    },
    {
      title: '污染区域照片',
      dataIndex: 'wgkgjszp',
    },
    {
      title: '操作',
      dataIndex: 'operation',
    },
  ];
  const wgcolumns = [
    {
      title: '违规开工建设区域',
      dataIndex: 'wgkgjsqy',
    },
    {
      title: '纬度',
      dataIndex: 'jd',
    },
    {
      title: '经度',
      dataIndex: 'wd',
    },
    {
      title: '违规开工建设照片',
      dataIndex: 'wgkgjszp',
    },
    {
      title: '操作',
      dataIndex: 'operation',
    },
  ];
  const route = useRoute();
  const router = useRouter();
  let data = ref({
    wgList: [],
    wrList: [],
  });
  let loading = ref(true);
  async function init() {
    // console.log(route.query.wrdkid);
    // 拿到路由传参 请求接口
    let result = await getLookList({ xcjdId: route.query.xcjdId });
    console.log(result);

    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>
