<template>
    <ksDialog 
        width="600px"
        title="自定义列表"
        querykey="setting"
        @onSubmit="onSubmit"
    >
        <div class="ks-search-content">
            <Tip type="primary" class="ks-search-tipbox">
                <Icon class="k-icon-information-fill" size='20' color="#157FE0"/>
                <span class="ks-search-tipword">请选择您想显示的列表详细信息。</span>
            </Tip>
            <Checkbox :indeterminate="getLength() > 0 && getLength() < columnDatas.length"
                :value="getLength() === columnDatas.length"
                @$change:value="toggleSelectAll"
            >全选</Checkbox>
            <div class="ks-search-checkbox">
                <Checkbox 
                class="ks-search-checkbox-item"
                v-for="item in columnDatas"
                :disabled="item.disabled"
                name="columnValue" 
                :trueValue="item.key"
                v-model="columnValue"
                :title="item.key"
            >{{ item.title }}</Checkbox>
            </div>
        </div>
    </ksDialog>
</template>
<script setup>
import { onMounted, ref, watch} from 'vue';
import { Checkbox,Tip,Icon,Message } from '@king-design/vue';
import ksDialog from './dialog.vue'
import {QueryChange,useColumnsSet} from "@ksconsole/hooks";
import { useRouter, useRoute } from "vue-router";
import  {map,get,find,findIndex,forEach,has } from 'lodash-es';
// 接收父组件声明的方法
const emit = defineEmits(['changeColumns'])
const router = useRouter();
const route = useRoute();
const queryChange = new QueryChange(router,route)
const props = defineProps({
    columnDatas: { // 搜索条件的key值 和 title
        type: Array,
        default: []
    },
    columnKey: String, // 自定义表头的唯一key值
});
const columnValue = ref([])
const columnDatas = ref(map(props.columnDatas,item=>{
    return {
        ...item,
        key: item.type === 'slot' ? item.slotName : item.key,
        show: () => true
    }
}))

const initData = () => {
    const changeName = `omit_list_${props.columnKey}`
    const omitInfo = localStorage.getItem(changeName)
    const omit_str = omitInfo ? JSON.parse(omitInfo) : ''
    const omit_list= omit_str.split(',') || []
    forEach(columnDatas.value,item=>{
        if( !omit_list.includes(item.key)){
            columnValue.value.push(item.key)
        }
    })
    columnValue.value = [...new Set(columnValue.value)]
}
watch(
	() => route?.query,
	(newVal, oldVal) => {
        if( has(oldVal,'setting')) {
            columnValue.value = []
        }
        if(!has(newVal,'setting')) return
        initData()
	}
);
const toggleSelectAll = (checked)=> {
    if(checked) {
        columnValue.value = columnDatas.value.map(item=>item.key)
    } else {
        columnValue.value = columnDatas.value.filter(item=>item.disabled).map(item=>item.key)
    }
}

const getLength = ()=>{
    return columnValue.value.length
}

const onSubmit = () => {
    if(!columnValue.value.length) {
        return Message.info('您未选择任何列')
    }
    const changeName = `omit_list_${props.columnKey}`
    const list = []
    forEach(columnDatas.value,item=>{
        if(!columnValue.value.includes(item.key)){
            list.push(item.key)
        }
    })
    localStorage.setItem(changeName,JSON.stringify(list.join(',')))
    queryChange._backDetails('setting')
    // columnsChange()
    emit('changeColumns')
}

onMounted(()=>{
    initData()
})
</script>

<style lang="less">
.ks-search-content {
    .k-icon-information-fill {
        position: relative;
        top: 3px;
        right: 5px;
        margin-left: 6px;
    }
    .ks-search-tipbox {
        margin-bottom: 24px;
    }
    .ks-search-checkbox {
        margin-top: 16px;
    }
    .ks-search-checkbox-item {
        margin:0px 0px 16px 0px;
        width: 25%;
    }
}
</style>
