import { reactive, unref, computed } from 'vue';
import type { FormRules } from 'element-plus'
import { BaseTableProps } from '@/components/Table/src/types';
import { FormSchema } from '@/components/Form/src/types';
import useDefinFilter from '@/hooks/useDefinFilter';
import { useDropDownData } from '@/hooks/useDropDownData';
import { BaseZoningAction } from '@/type/BaseZoningAction';
import { isArrayLength } from '@/utils/is';

// 分区数据
export function useZoningModel(props?: Recordable) {
    const { countryList } = useDropDownData()
    // 显示查看操作
    const showAction = computed(() => props?.actionType === BaseZoningAction.ZONING_VIEW)
    const isShowAction = computed(() => props?.actionType !== BaseZoningAction.ZONING_VIEW)
    // 查找对应国家/地区信息
    const dealCountryIdData = (row: Recordable) => {
        const isData = row.countryId ? row.countryId : row.countryInfoList
        let country
        if (isArrayLength(isData)) {
            const data = isData[0].countryId
            country = countryList.value.find(item => item.value === data as string)
        } else {
            country = countryList.value.find(item => item.value === isData as string)
        }
        return country?.label
    }

    // 国家/地区列表
    // const { definFilter, typeList: countryList_ } = useDefinFilter({ countryList: unref(countryList) }, 'countryList')
    const validateSpecialParametersId = (rule: Recordable, value: any, callback: any) => {
        if (!value) {
            return callback(new Error('请选择内容'))
        }
        if (tableSpecialParameterZoning.dataSource.length > 1) {
            let index = 0
            for (const item of tableSpecialParameterZoning.dataSource) {
                if (item.specialParametersId === value) {
                    index++
                }
            }
            if (index > 1) {
                callback(new Error('选择的费用类型不能重复！'))
            } else {
                callback()
            }
        } else {
            callback()
        }
    }
    // 口岸分区-表单验证
    const ruleForm: FormRules = reactive({
        portCode: [
            {
                required: true,
                message: "请选择内容",
                trigger: "change"
            }
        ],
        startZipCode: [{ required: true, message: "请输入内容", trigger: "blur" }],
        endZipCode: [{ required: true, message: "请输入内容", trigger: "blur" }],
        zipCodeRegex: [{ required: true, message: "请输入内容", trigger: "blur" }],
        address: [{ required: true, message: "请输入内容", trigger: "blur" }],
        specialParametersId: [{ validator: validateSpecialParametersId, trigger: "change" }],
        defineCode: [{ required: true, message: "请输入内容", trigger: ["change", "blur"] }],
        cancel: [{ required: false, trigger: ["change", "blur"] }]
    })

    // 口岸分区-表格列表数据
    // const columnsPortZoning = []
    // 查看不显示操作栏
    // const portZoningTypeColumns = computed(() => {
    //     return props?.actionType === BaseZoningAction.ZONING_VIEW ? columnsPortZoning.filter(item => item.prop !== "action") : columnsPortZoning
    // })
    const tablePortZoning: BaseTableProps = reactive({
        border: true,
        height: 340,
        maxHeight: 340,
        columns: [
            {
                prop: "partitionName",
                label: "分区名称",
                showOverflowTooltip: true,
            },
            {
                prop: "portCode",
                label: "口岸",
                slot: true,
                showOverflowTooltip: true,
                slotName: "portCode",
            },
            {
                prop: "orderNumber",
                label: "序号",
            },
            // {
            //     prop: "isPartition",
            //     label: "默认",
            //     slot: true,
            //     slotName: "isPartition",
            // },
            {
                prop: "action",
                label: "操作",
                width: 160,
                slot: true,
                slotName: 'action'
            },
        ],
        dataSource: [],
    });

    // 口岸分区-表单表格列表数据
    const columnsFormPortZoning = [
        {
            prop: "portCode",
            label: "口岸",
            slot: true,
            slotName: "portCode",
        },
        {
            prop: "startZipCode",
            label: "起始邮编",
            slot: true,
            slotName: "startZipCode",
        },
        {
            prop: "endZipCode",
            label: "结束邮编",
            slot: true,
            slotName: "endZipCode",
        },
        {
            prop: "zipCodeRegex",
            label: "邮编正则表达式",
            slot: true,
            slotName: "zipCodeRegex",
        },
        {
            prop: "address",
            label: "地址",
            slot: true,
            slotName: "address",
        },
        {
            prop: "action",
            label: "+",
            slot: true,
            width: 80,
            slotHeader: true,
            slotName: 'action'
        },
    ]
    const formPortZoningTypeColumns = computed(() => {
        return props?.actionType === BaseZoningAction.ZONING_VIEW ? columnsFormPortZoning.filter(item => item.prop !== "action") : columnsFormPortZoning
    })
    const tableFormPortZoning: BaseTableProps = reactive({
        border: true,
        // height: 280,
        maxHeight: 230,
        columns: formPortZoningTypeColumns,
        dataSource: [],
    });

    /**
     * 口岸分区-基础表单数据
     */
    const schemasPortZoning: FormSchema[] = [
        {
            field: "partitionName",
            component: "Input",
            label: "分区名称",
            labelWidth: 80,
            width: 220,
            defaultValue: "",
            required: true,
            disabled: showAction,
        },
        // {
        //     field: "isPartition",
        //     component: "Checkbox",
        //     label: "默认分区",
        //     width: 60,
        //     defaultValue: false,
        //     disabled: showAction,
        // },
        {
            field: "orderNumber",
            component: "Input",
            label: "序号",
            labelWidth: 80,
            width: 220,
            defaultValue: "",
            required: true,
            type: "number",
            disabled: showAction,
        },
        {
            field: "remark",
            component: "Input",
            label: "分区说明",
            labelWidth: 80,
            width: 220,
            defaultValue: "",
            disabled: showAction,
        },
    ];

    // 邮编分区-基础表单
    const schemasPostalCodeZoning: FormSchema[] = [
        {
            field: "partitionName",
            component: "Input",
            label: "分区名称",
            labelWidth: 80,
            width: 180,
            defaultValue: "",
            required: true,
            disabled: showAction,
        },
        // {
        //     field: "isPartition",
        //     component: "Checkbox",
        //     label: "默认分区",
        //     width: 60,
        //     defaultValue: false,
        // },
        {
            field: "orderNumber",
            component: "Input",
            label: "序号",
            labelWidth: 80,
            width: 180,
            defaultValue: "",
            type: "number",
            required: true,
            disabled: showAction,
        },
        {
            field: "remark",
            component: "Input",
            label: "分区说明",
            labelWidth: 80,
            width: 180,
            defaultValue: "",
            disabled: showAction,
        },
        {
            field: "countryId",
            component: "Select",
            label: "国家/地区",
            labelWidth: 100,
            width: 230,
            defaultValue: "",
            required: true,
            disabled: showAction,
            // TODO 暂存待处理
            // filterMethod: definFilter,
            options: countryList,
            filterable: true
        },
    ];

    // 邮编分区-表单表格
    const columnsPortCodeZoning = [
        {
            prop: "startZipCode",
            label: "起始邮编",
            slot: true,
            slotName: "startZipCode",
        },
        {
            prop: "endZipCode",
            label: "结束邮编",
            slot: true,
            slotName: "endZipCode",
        },
        {
            prop: "zipCodeRegex",
            label: "邮编正则表达式",
            slot: true,
            slotName: "zipCodeRegex",
        },
        {
            prop: "address",
            label: "地址",
            slot: true,
            slotName: "address",
        },
        {
            prop: "address1",
            label: "地址1",
            slot: true,
            slotName: "address1",
        },
        {
            prop: "action",
            label: "+",
            width: 60,
            slot: true,
            slotHeader: true,
            slotName: 'action'
        },
    ]
    const formPortCodeZoningTypeColumns = computed(() => {
        return props?.actionType === BaseZoningAction.ZONING_VIEW ? columnsPortCodeZoning.filter(item => item.prop !== "action") : columnsPortCodeZoning
    })
    const tableFormPortCodeZoning: BaseTableProps = reactive({
        border: true,
        maxHeight: 230,
        columns: formPortCodeZoningTypeColumns,
        dataSource: [],
    });

    // 邮编分区列表
    // const columnsCountry = []
    // const countryZoningColumns = computed(() => {
    //     return props?.actionType === BaseZoningAction.ZONING_VIEW ? columnsCountry.filter(item => item.prop !== "action") : columnsCountry
    // })
    const tablePostalCodeZoning: BaseTableProps = reactive({
        height: 340,
        maxHeight: 340,
        border: true,
        columns: [
            {
                prop: "partitionName",
                label: "分区名称",
                showOverflowTooltip: true,
            },
            {
                prop: "countryId",
                label: "国家/地区",
                showOverflowTooltip: true,
                slot: true,
                slotName: "countryId"
            },
            {
                prop: "orderNumber",
                label: "序号",
                width: 90,
            },
            {
                prop: "",
                label: "邮编",
                slot: true,
                showOverflowTooltip: true,
                slotName: "zipcode"
            },
            {
                prop: "zipCodeRegex",
                label: "邮编正则表达式",
                slot: true,
                showOverflowTooltip: true,
                slotName: "zipCodeRegex"
            },
            {
                prop: "address",
                slot: true,
                label: "地址",
                showOverflowTooltip: true,
                slotName: "address"
            },
            {
                prop: "address1",
                slot: true,
                label: "地址1",
                showOverflowTooltip: true,
                slotName: "address1"
            },
            // {
            //     prop: "isPartition",
            //     label: "默认",
            //     slot: true,
            //     slotName: "isPartition",
            // },
            {
                prop: "action",
                label: "操作",
                width: 160,
                slot: true,
                slotName: 'action'
            },
        ],
        dataSource: [],
    });

    // 国家/地区分区列表
    const tableCountryZoning: BaseTableProps = reactive({
        height: 280,
        maxHeight: 280,
        border: true,
        columns: [
            {
                prop: "partitionName",
                label: "分区名称",
            },
            {
                prop: "countryId",
                label: "国家/地区",
                showOverflowTooltip: true,
                slot: true,
                slotName: "countryId"
            },
            {
                prop: "orderNumber",
                label: "序号",
            },
            // {
            //     prop: "isPartition",
            //     label: "默认",
            //     slot: true,
            //     slotName: "isPartition",
            // },
            {
                prop: "action",
                label: "操作",
                width: 160,
                slot: true,
                slotName: 'action'
            },
        ],
        dataSource: [],
    });

    // 分区特殊参数设置
    const tableSpecialParameterZoning: BaseTableProps = reactive({
        maxHeight: 450,
        border: true,
        columns: [
            {
                prop: "feeItemId",
                label: "费用类型",
                width: 160,
                slot: true,
                fixed: true,
                slotName: 'feeItemId'
            },
            {
                prop: "specialParametersId",
                label: "参数名称",
                width: 160,
                slot: true,
                fixed: true,
                slotName: 'specialParametersId'
            },
            {
                prop: "action",
                label: "操作",
                width: 80,
                slot: true,
                align: "center",
                slotHeader: true,
                fixed: "right",
                slotName: 'action'
            },
        ],
        dataSource: [],
    });

    return {
        ruleForm,
        tablePortZoning,
        tableFormPortZoning,
        schemasPortZoning,
        schemasPostalCodeZoning,
        tableFormPortCodeZoning,
        tablePostalCodeZoning,
        tableCountryZoning,
        tableSpecialParameterZoning,
        showAction,
        isShowAction,
        dealCountryIdData,
    }
}