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