import { reactive, computed, watch, unref } from 'vue';
import { alphabeticalOrder, dealCountryList } from '@/utils/dealData';
import { ListIitem } from '@/api/base/BaseDataModel';
import { CountryChoiseEnum } from '@/type/BaseEnum';
import { cloneDeep } from '@/utils/cloneDeep';
import { isArrayLength } from '@/utils/is';

type CountryZoningState = {
    radioCountry: number
    dataSource: ListIitem[]
    countryListKey: string[],
    downCountryKey: unknown//单个选择国家/地区
    checkAllCountry: boolean
    isCheckAllCountry: boolean
    inputCountryZoning: string
    isErrorCountry: boolean
    checkCountryList: Recordable
    exportLoad: boolean//加载
}


export function useZoningCountryRote(props: Recordable) {

    // 国家/地区分区-选择国家/地区的数据
    const countryZoningState: CountryZoningState = reactive({
        radioCountry: 1,
        dataSource: [],
        downCountryKey: undefined,//选择单个国家/地区
        countryListKey: [],//选择多个国家/地区
        checkAllCountry: false,//全选国家/地区状态
        isCheckAllCountry: false,//取消全选
        inputCountryZoning: '',//输入国家/地区，以，分割
        isErrorCountry: false,//自定义错误提示
        checkCountryList: [],//展示的复选框列表
        exportLoad: false,
    })

    // 用于复选框展示国家/地区
    const checkCountryList = computed(() => {
        const oldList = cloneDeep(props.countryList)
        const countryList = alphabeticalOrder(oldList)
        const filterCountryList = isArrayLength(countryList) ? dealCountryList(countryList) : []
        return filterCountryList
    })
    // 国家/地区列表
    const countryList = computed(() => props.countryList)

    // 自定义判断是否选中国家/地区
    const isCountry = () => {
        const isFlag = !countryZoningState.downCountryKey && countryZoningState.countryListKey.length === 0
        isFlag ? countryZoningState.isErrorCountry = true : countryZoningState.isErrorCountry = false
        return isFlag
    }

    // 切换下拉框和复选框内容
    watch(() => countryZoningState.radioCountry, (val) => {
        if (val == CountryChoiseEnum.DROP_DOWN && countryZoningState.countryListKey.length > 0) {

        } else {
            // 初始化复选框的值
            countryZoningState.checkCountryList = checkCountryList.value
            countryZoningState.downCountryKey = undefined
        }
    })

    // 全选
    const handleCheckAllChange = () => {
        countryZoningState.countryListKey = countryList.value.map(item => item.value)
        countryZoningState.isCheckAllCountry = false
        countryZoningState.checkAllCountry = true
        countryZoningState.downCountryKey = undefined
    }
    // 取消全选
    const handleIsCheckAllChange = () => {
        countryZoningState.countryListKey = []
        countryZoningState.checkAllCountry = false
        countryZoningState.isCheckAllCountry = true
        countryZoningState.downCountryKey = undefined
    }

    // 生成已选国家/地区
    const getCountryChoice = computed(() => {
        if (countryZoningState.countryListKey.length === 0) return
        let strCountry = "";
        const filteredCountryList = countryList.value.filter(item => countryZoningState.countryListKey.some((countryKey) => countryKey == item.value));
        // value关联的内容
        countryZoningState.dataSource = cloneDeep(filteredCountryList)
        // 并接成指定字符串
        // strCountry = filteredCountryList.map(item => item.label).join(',')
        isCountry()
        return filteredCountryList
    })

    // 国家/地区列表显示国家/地区
    const dealCountryListText = (row: Recordable) => {
        const isData = row.countryId ? row.countryId : row.countryInfoList
        let country
        if (isArrayLength(isData)) {
            const countryListKey = isData.map(item => item.countryId)
            const countryLists = cloneDeep(unref(countryList))
            const filteredCountryList = countryLists.filter(item => countryListKey.some((countryKey) => countryKey == item.value));
            country = filteredCountryList.map(item => item.label).join(',')
        } else {
            country = isData
        }
        return country
    }

    // 回车分割匹配国家/地区
    const hanleEnterCountry = () => {
        if (!countryZoningState.inputCountryZoning) return
        const countryName: string[] = []
        // 分割的国家/地区字符串
        const countryStrList = countryZoningState.inputCountryZoning.split(/[，,\s]/)
        // 过滤空格
        const filterCountryStrList = countryStrList.map(str => str.replace(/\s+/g, '').trim()).filter(item => item)
        // 模糊过滤的国家/地区列表数据
        const cloneCountryList = cloneDeep(countryList.value)
        const filteredCountryList = cloneCountryList.filter((item) => {
            const { label } = item;
            return filterCountryStrList.some(keyword => label.includes(keyword));
        });
        // 向已选择国家/地区添加
        for (const item of filteredCountryList) {
            if (!filterCountryStrList.includes(item.value)) {
                countryZoningState.countryListKey.push(item.value)
                countryName.push(item.label)
            }
        }
        const inputCountryZoning = filterCountryStrList.filter(item => !countryName.includes(item)).join(',')
        countryZoningState.inputCountryZoning = inputCountryZoning
    }

    // 删除对应的国家/地区
    const hanleDelete = (row: ListIitem) => {
        const countryListKey = cloneDeep(countryZoningState.countryListKey)
        countryZoningState.countryListKey = countryListKey.filter(item => item !== row.value)
    }

    // 清除匹配文本框
    const hanleClearInput = () => {
        countryZoningState.inputCountryZoning = ''
    }

    // 获取已选国家/地区数据:key,value
    const hanleCountryChoice = () => countryZoningState.dataSource;

    // 清除选中的国家/地区信息
    const clearCountry = () => {
        countryZoningState.isCheckAllCountry = false
        countryZoningState.checkAllCountry = false
        countryZoningState.downCountryKey = undefined
        countryZoningState.isErrorCountry = false
        countryZoningState.countryListKey = []
        countryZoningState.dataSource = []
    }

    return {
        handleCheckAllChange,
        handleIsCheckAllChange,
        hanleCountryChoice,
        clearCountry,
        hanleEnterCountry,
        isCountry,
        dealCountryListText,
        hanleClearInput,
        hanleDelete,
        getCountryChoice,
        countryZoningState,
        // checkCountryList
    }
}