<template>
    <div class="dk-list">
        <Form @submits="submit" :FormData="FormData" />
        <div class="flex justify-end py-3 mr-5 my-5">
            <a-space wrap>
                <a-button type="primary">

                    同步国家库
                </a-button>
                <a-button type="primary">

                    名录导出
                </a-button>
            </a-space>
        </div>
        <a-table :columns="columns" class="w-[98%] mx-auto" :row-selection="rowSelection" :data-source="list"
            :pagination="pagination" show-less-items @change="handleTableChange">
            <template #bodyCell="{ index, column }">
                <template v-if="column.key === 'index'">
                    <span>
                        {{ index + 1 }}
                    </span>
                </template>
                <template v-if="column.key === 'action'">
                    <div>

                        <a-button type="primary" ghost class="mr-1" size="small">查看</a-button>
                        <a-button type="primary" ghost class="mr-1" size="small">暂不上报</a-button>

                    </div>

                </template>
            </template>
        </a-table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import Form from '/@/components/FormModel.vue'

import { list as getList } from '/@/api/qdml'
import { getTown, dict } from '/@/api/common/api'

const pageNo = ref<any>(1)
const pageSize = ref<any>(10)
const pagination = ref<any>({
    total: 0,
    pageNo: pageNo.value,
    pagination: pageSize.value
});
// 获取城镇的
async function tomnData(v: any) {
    const res = await getTown(v)
    if (v === '440000') {
        FormData.value[0].data = res
    } else {
        FormData.value[1].value = null
        FormData.value[1].data = res
    }

}
tomnData('440000')
// 获取行业类编
async function getClass(v: any) {
    const res = await dict(v)
    // 转字段名称，下拉框 用的 name 跟 id字段
    FormData.value[3].data = res
}
getClass('org_category')

const FormData = ref<any>(
    [
        {
            name: 'cityName',
            label: '行政区',
            type: 'select',
            fieldNames: {
                label: 'name',
                value: 'id'
            },
            value: null,
            select: (v) => {
                FormData.value[0].value = v
                tomnData(v)
            },
            data: []
        },
        {
            name: 'countryName',
            label: '区县',
            type: 'select',
            fieldNames: {
                label: 'name',
                value: 'id'
            },
            value: null,
            data: [],
            select: (v) => {
                FormData.value[1].value = v
            },
        },

        {
            name: 'wrdkbm',
            label: '地块类型',
            type: 'select',
            value: null,
            data: [],

        },
        {
            name: 'hyfl',
            label: '行业分类',
            type: 'select',
            value: '',
            data: []
        },

        {
            label: '是否超标',
            name: 'pollueted',
            type: 'select',
            value: null,
            data: [
                {
                    name: '是',
                    id: '是'

                },
                {
                    name: '否',
                    id: '否'

                }
            ]
        },
        {
            label: '同步国家库',
            name: 'pollueted',
            type: 'checkbox',
            value: null,
            data: [
                {
                    label: '已同步',
                    value: '1'

                },
                {
                    label: '未同步',
                    value: '2'

                }
            ]
        },
        {
            label: '上报开始时间',
            name: 'startTime',
            type: 'data',
            value: null,
          
        },
        {
            label: '上报结束时间',
            name: 'endTime',
            type: 'data',
            value: null,
          
        },

    ]
)
const rowSelection = reactive<any>({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
});
const columns = ref<any>([
    // {
    //     title: '地块名称',
    //     dataIndex: 'wrdkmc',
    // },
    // {
    //     title: '地块编码',
    //     dataIndex: 'wrdkbm',
    // },
    {
        title: '市',
        dataIndex: 'cityName',
    },
    {
        title: '县',
        dataIndex: 'countryName',
    },
    {
        title: '行业类别',
        dataIndex: 'hylb',
    },
    {
        title: '政策依据',
        dataIndex: 'faliYiju',
        ellipsis: true,
    },
    {
        title: '政策依据条款',
        dataIndex: 'faliErji',
        ellipsis: true,
    },
    {
        title: '地块类型',
        dataIndex: 'dklx',
    },
    {
        title: '创建地块时间',
        dataIndex: 'createTsamp'
    },
    {
        title: '是否超标',
        dataIndex: 'pollueted'
    },
    {
        title: '所处阶段',
        dataIndex: 'scjdbm'
    },
    // {
    //     title: '阶段内状态',
    //     dataIndex: 'jdnzt'
    // },
    // {
    //     title: '是否依据土壤法纳入建设用地土壤污染风险管控与修复名录',
    //     dataIndex: 'sfyjtrfnrjsydtrwrfxgkyxfml'
    // },
    {
        title: '实施管控或修复',
        dataIndex: 'ssgkhxf'
    },
    {
        title: '登录账号',
        dataIndex: 'userId'
    },
    {
        title: '操作',
        key: 'action',
    },
])
const list = ref<any>([])
const form = ref<any>({})
function submit(val: any) {
    form.value = val
    // 其中行业类编里面。如果值的长度是1 传'hyml'字段  则代表一类 如果值的长度是2 hydl
    // 长度是3 hyzl 长度是4 hyxl
    console.log(form.value, 'val')
    init()
}
async function init() {
    let params: any = {}
    params = form.value
    if (params?.category) {
        if (params?.category.length == 1) {
            params.hyml = params.category
        } else if (params?.category.length == 2) {
            params.hydl = params.category
        } else if (params?.category.length == 3) {
            params.hyzl = params.category
        } else if (params?.category.length == 4) {
            params.hyxl = params.category
        }
        delete params.category
        console.log(params, 3)
    }
    const res = await getList({ ...params, pageNo: pageNo.value, pageSize: pageSize.value })
    list.value = res.records
    pagination.value.total = res.total
    pagination.value.pageSize = res.size
}
init()
function handleTableChange(val: any) {
    pageNo.value = val.current
    pageSize.value = val.pageSize
    init()
}

</script>
<style lang="less" scoped>
.dk-list {
    background-color: @white;
}
</style>