<template>
    <div style="margin: 25px 0;">
        <a-button type="primary" @click="router.back()" style="margin-left: 10px;">返回</a-button>
    </div>
    <div style="width: 95%;margin:0 auto;margin-top: 30px;">
        <a-tabs v-model:activeKey="activeKey" type="card">
            <a-tab-pane key="1" tab="地块调查阶段">
                <a-spin :spinning="spinning">
                    <a-table :columns="columns" :data-source="dkdcTable" bordered>
                        <template #bodyCell="{ column, text, record, index }">
                            <template v-if="column.dataIndex === 'ydlx'">
                                <span>
                                    {{ text == '1' ? '土壤点' : text == '2' ? '地下水点' : text == '3' ? '基坑样点' : '' }}
                                </span>
                            </template>
                            <template v-if="column.dataIndex === 'status'">
                                <span>
                                    {{ text == '0' ? '未完成' : text == '1' ? '已完成' : '' }}
                                </span>
                            </template>
                            <template v-if="column.dataIndex === 'operation'">
                                <div>
                                    <a-button type="primary" size="small" @click="ydzsOpen(record)"
                                    :disabled="record.ydzs != '0'"
                                        style="margin-right: 15px;">设置总数</a-button>
                                    <a-button type="primary" size="small" @click="intoPage(record)">采样</a-button>
                                </div>
                            </template>
                        </template>
                    </a-table>
                </a-spin>
            </a-tab-pane>
            <a-tab-pane key="2" :tab="tabpaneName2"
                v-if="route.query.pgtype && route.query.pgtype != 'null' && route.query.pgtype != 'undefined'">
                <a-spin :spinning="spinning">
                    <a-table :columns="columns" :data-source="xgpgTable" bordered>
                        <template #bodyCell="{ column, text, record, index }">
                            <template v-if="column.dataIndex === 'ydlx'">
                                <span>
                                    {{ text == '1' ? '土壤点' : text == '2' ? '地下水点' : text == '3' ? '基坑样点' : '' }}
                                </span>
                            </template>
                            <template v-if="column.dataIndex === 'status'">
                                <span>
                                    {{ text == '0' ? '未完成' : text == '1' ? '已完成' : '' }}
                                </span>
                            </template>
                            <template v-if="column.dataIndex === 'operation'">
                                <div>
                                    <a-button type="primary" size="small" @click="ydzsOpen(record)"
                                        style="margin-right: 15px;" :disabled="record.ydzs != '0'">设置总数</a-button>
                                    <a-button type="primary" size="small" @click="intoPage(record)">采样</a-button>
                                </div>
                            </template>
                        </template>
                    </a-table>
                </a-spin>
            </a-tab-pane>
        </a-tabs>
    </div>
    <ydzsModal @register="registerModal" @sumbitTable="sumbitTable" />
</template>
    
<script lang="ts" name="xcjd-xccy-lookData" setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useModal } from '/@/components/Modal';
import ydzsModal from "./zsModal.vue";
import { getCyList, setSzzs } from './api'
import { useMessage } from '/@/hooks/web/useMessage';

const { createMessage } = useMessage();
const [registerModal, { openModal, closeModal }] = useModal();
let router = useRouter();
let route = useRoute();
const activeKey = ref('1');
let spinning = ref<boolean>(false)
let tabpaneName2 = ref('效果评估')
//判断router-pagetype赋值效果评估-
switch (route.query.pgtype) {
    case '1':
        tabpaneName2.value = '效果评估-风险管控'
        break;
    case '2':
        tabpaneName2.value = '效果评估-修复'
        break;
    case '3':
        tabpaneName2.value = '效果评估-管控与修复'
        break;
    default:
        break;
}
// 地块调查表格
const columns = [
    {
        title: '主键',
        dataIndex: 'id',
        hidden: true, // 增加标识
    },
    {
        title: '样点名称',
        dataIndex: 'ydlx',
    },
    {
        title: '样点总数',
        dataIndex: 'ydzs',
    },
    {
        title: '状态',
        dataIndex: 'status',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        width: '25%'
    },
].filter(v => !v.hidden); // 增加filter过滤;
let dkdcTable = ref([
    {
        ydlx: '1',
        id: '',
        ydzs: '0',
        status: '0',
    },
    {
        ydlx: '2',
        id: '',
        ydzs: '0',
        status: '0',
    },
])

let xgpgTable = ref([
    {
        id: '',
        ydlx: '1',
        ydzs: '0',
        status: '0',
    },
    {
        id: '',
        ydlx: '2',
        ydzs: '0',
        status: '0',
    },
    {
        id: '',
        ydlx: '3',
        ydzs: '0',
        status: '0',
    },
])
function ydzsOpen(params) {
    if(params.ydzs != 0){
        createMessage.info('样点总数不为0，不可修改')
        return false;
    }
    openModal(
        true,
        {
            ...params,
            pgtype: activeKey.value == '1' ? '' : route.query.pgtype,
            wrdkid: route.query.wrdkid,
            scjdbm: activeKey.value == '1' ? 'S2' : 'S6',
        }
    )
}
let Table1 = {
    ydlx: '1',
    id: '',
    ydzs: '0',
    status: '0',
}
let Table2 = {
    ydlx: '2',
    id: '',
    ydzs: '0',
    status: '0',
}
let Table3 = {
    ydlx: '3',
    id: '',
    ydzs: '0',
    status: '0',
}
// 页面请求之后赋值
async function init() {
    // 请求赋值
    spinning.value = true
    let result = await getCyList({ wrdkid: route.query.wrdkid, pgtype: route.query.pgtype })
    dkdcTable.value = result.dkjccy || dkdcTable.value
    xgpgTable.value = result.xgpgcy || xgpgTable.value
    // 检查对象是否在数组中 没有就添加
    if (!(dkdcTable.value.find(obj => obj.ydlx == '1'))) { dkdcTable.value.push(Table1) }
    if (!(dkdcTable.value.find(obj => obj.ydlx == '2'))) { dkdcTable.value.push(Table2) }
    if (!(xgpgTable.value.find(obj => obj.ydlx == '1'))) { xgpgTable.value.push(Table1) }
    if (!(xgpgTable.value.find(obj => obj.ydlx == '2'))) { xgpgTable.value.push(Table2) }
    if (!(xgpgTable.value.find(obj => obj.ydlx == '3'))) { xgpgTable.value.push(Table3) }
    spinning.value = false
}
init()
async function sumbitTable(val) {
    // 获取modal传参 保存到表格里面
    console.log(val);
    // 调取设置总数接口
    await setSzzs(val)
    // 重新加载表格方法未解决
    closeModal()
    init()
}
// 跳转采样列表页
function intoPage(record) {
    // alert('添加url跳转');
    if (record.ydzs == '0') {
        createMessage.info('请先设置总数，再填报采样信息')
    } else {
        router.push(`/xcjd/xccy/cyList?xccyId=${record.id}&ydlx=${record.ydlx}`)
    }
}
</script>
<style scoped>
.card-container p {
    margin: 0;
}

.card-container>.ant-tabs-card .ant-tabs-content {
    height: 120px;
    margin-top: -16px;
}

.card-container>.ant-tabs-card .ant-tabs-content>.ant-tabs-tabpane {
    padding: 16px;
    background: #fff;
}

.card-container>.ant-tabs-card>.ant-tabs-nav::before {
    display: none;
}

.card-container>.ant-tabs-card .ant-tabs-tab,
[data-theme='compact'] .card-container>.ant-tabs-card .ant-tabs-tab {
    background: transparent;
    border-color: transparent;
}

.card-container>.ant-tabs-card .ant-tabs-tab-active,
[data-theme='compact'] .card-container>.ant-tabs-card .ant-tabs-tab-active {
    background: #fff;
    border-color: #fff;
}

#components-tabs-demo-card-top .code-box-demo {
    padding: 24px;
    overflow: hidden;
    background: #f5f5f5;
}

[data-theme='compact'] .card-container>.ant-tabs-card .ant-tabs-content {
    height: 120px;
    margin-top: -8px;
}

[data-theme='dark'] .card-container>.ant-tabs-card .ant-tabs-tab {
    background: transparent;
    border-color: transparent;
}

[data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
    background: #000;
}

[data-theme='dark'] .card-container>.ant-tabs-card .ant-tabs-content>.ant-tabs-tabpane {
    background: #141414;
}

[data-theme='dark'] .card-container>.ant-tabs-card .ant-tabs-tab-active {
    background: #141414;
    border-color: #141414;
}
</style>
    