<template>
    <a-spin :spinning="loading">
        <div style="width: 90%;margin: 0 auto;">
            <div style="margin: 25px 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="downloadFile(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="downloadFile(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="downloadFile(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 '/@/utils/common/renderUtils';
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 //加载中状态
}
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>