<template>
    <div class="dk-list">
        <Form @submits="submit" :FormData="FormData" />
        <div class="flex justify-end py-5 mr-5">
            <a-button type="primary" size="large">
                <DownloadOutlined />
                导出
            </a-button>
        </div>
        <a-table :columns="columns" :row-selection="rowSelection" :data-source="list" :pagination="pagination"
            show-less-items @change="handleTableChange">
            <template #bodyCell="{ text, record, 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-5">办理</a-button>
                        <a-button type="primary" ghost>流程图</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 { DownloadOutlined } from '@ant-design/icons-vue';
import { list as getList } from '/@/api/dkgl'
import { getTown, dict } from '/@/api/common/api'
import { transformArray } from '/@/utils/modifFiled'

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[2].data = res
}
getClass('org_category')

const FormData = ref<any>(
    [
        {
            name: 'cityCode',
            label: '行政区',
            type: 'select',
            fieldNames: {
                label: 'name',
                value: 'id'
            },
            value: null,
            select: (v) => {
                FormData.value[0].value = v
                tomnData(v)
            },
            data: []
        },
        {
            name: 'countyCode',
            label: '区县',
            fieldNames: {
                label: 'name',
                value: 'id'
            },
            type: 'select',
            value: null,
            data: [],
            select: (v) => {
                FormData.value[1].value = v
            },
        },
        {
            name: 'hyfl',
            label: '行业分类',
            type: 'select',
            value: '',
            data: []
        },
        {
            name: 'category',
            label: '行业类别',
            type: 'cascader',
            value: 'org_category',
            show: false,
        },
        {
            name: 'leixing',
            label: '地块类型',
            type: 'select',
            value: 3,
            data: [
                {
                    label: '北京',
                    value: 3
                },
                {
                    label: '上海',
                    value: 4
                }
            ]
        },
        {
            name: 'codde',
            label: '地块名称或编码',
            type: 'text',
        },
        {
            name: 'username',
            label: '登录账号',
            type: 'text',
        },
    ]
)
const rowSelection = reactive<any>({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
});
const columns = ref<any>([
    {
        title: '地块名称',
        dataIndex: 'landname',
    },
    {
        title: '地块编码',
        dataIndex: 'codeLand',
    },
    {
        title: '市',
        dataIndex: 'cityCode',
    },
    {
        title: '县',
        dataIndex: 'countyCode',
    },
    {
        title: '行业类别',
        dataIndex: 'tradename',
    },
    {
        title: '政策依据',
        dataIndex: 'policy',
        ellipsis: true,
    },
    {
        title: '地块类型',
        dataIndex: 'nameLandtype',
    },
    {
        title: '更新时间',
        dataIndex: 'modifyDate',
    },
    {
        title: '登录账号',
        dataIndex: 'username',
    },
    {
        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>