<template>
    <view class="fx-row fx-bet-cen p-20">
        <ai-dropdown-tab v-for="op in sourceTree" :key="op.text" :option="op" @click="showPopup(op)"/>
    </view>
    <ai-dropdown-popup ref="popup"/>
</template>

<script>
import _ from 'lodash';
import InjectAIDataMixin from "@/pagesOther/pages/ie/entry-ai-form/components/InjectAIDataMixin";
import AiDropdownTab from "@/pagesOther/pages/ie/entry-ai-form/components/filter/ai-dropdown-tab.vue";
import AiDropdownPopup from "@/pagesOther/pages/ie/entry-ai-form/components/filter/ai-dropdown-popup.vue";
import MxConst from "@/common/MxConst";
import {useCacheStore} from "@/hooks/useCacheStore";
import {cacheActions} from "@/hooks/defineCacheActions";
import {filters} from "@/api/webApi/collegemajor";
import {object} from "@/uni_modules/uv-ui-tools/libs/function/test";
import {findTreeNode} from "@/utils/tree-helper";

export default {
    name: "ai-dropdown",
    components: {AiDropdownPopup, AiDropdownTab},
    mixins: [InjectAIDataMixin],
    data() {
        return {
            sourceTree: []
        }
    },
    setup() {
        const {dispatchCache} = useCacheStore()
        return {
            dispatchCache
        }
    },
    mounted() {
        this.initData()
        uni.$on(MxConst.globalEvents.aiFilterShortcutClear, this.handleShortcutClear)
    },
    beforeUnmount() {
        uni.$off(MxConst.globalEvents.aiFilterShortcutClear)
    },
    methods: {
        async _initDataMajor() {
            // major filter
            const {majorCategory} = this.pageData
            const majorTree = await this.dispatchCache(cacheActions.getMajorTree)
            const category = majorTree.find(m => m.code == majorCategory)
            const categoryFilterKey = 'majorTypes'
            this.sourceTree.push({
                filterKey: categoryFilterKey,
                text: '选择专业',
                limit: 5, // 1-单选 0-不限 2-限选2个
                popupTitle: '专业筛选',
                popupDesc: category.name,
                options: category.children.map(m => ({
                    id: categoryFilterKey + '_' + m.code,
                    text: m.name,
                    value: m.code,
                    selected: false
                }))
            })
        },
        async _initDataCollege() {
            // university filter
            const resFilter = await this.dispatchCache(filters)
            const uFilterMap = {
                locations: {text: '院校省份', filterKey: 'location'},
                features: {text: '院校层次', filterKey: 'features'},
                types: {text: '院校类型', filterKey: 'type'},
                natureTypes: {text: '办学类型', filterKey: 'natureTypeCN'},
                bxTypes: {text: '双高院校', filterKey: 'bxType'},
                stars: {text: '竞争力', filterKey: 'star'}
            }
            this.sourceTree.push({
                text: '院校筛选',
                popupTitle: '院校筛选',
                options: Object.keys(uFilterMap).map(prop => {
                    const map = uFilterMap[prop]
                    const filter = resFilter.data[prop]
                    if (Array.isArray(filter)) {
                        return {
                            ...map,
                            options: filter.map(v => ({
                                id: map.filterKey + '_' + v,
                                text: v,
                                value: v,
                                selected: false
                            }))
                        }
                    } else if (object(filter)) {
                        return {
                            ...map,
                            options: Object.keys(filter).map(k => ({
                                id: map.filterKey + '_' + k,
                                text: filter[k],
                                value: k,
                                selected: false
                            }))
                        }
                    }
                })
            })
        },
        async _initDataPick() {
            // pick type
            const enumPick = MxConst.enum.ai.pickType
            const enumEmpty = MxConst.enum.ai.pickEmpty
            this.sourceTree.push({
                text: '冲稳保',
                popupTitle: '概率筛选',
                template: 'cell',
                options: [{
                    filterKey: 'enumPickType',
                    limit: 1,
                    disableCancel: true,
                    mutex: 'enumPickEmpty',
                    options: Object.values(enumPick).map(p => ({
                        ...p,
                        id: `enumPickType_${p.value}`,
                        selected: p == enumPick.all, // 默认选中全部
                        disableShortcut: p == enumPick.all // 全部不进入shortcut
                    }))
                }, {
                    filterKey: 'enumPickEmpty',
                    limit: 1,
                    disableCancel: true,
                    mutex: 'enumPickType',
                    options: Object.values(enumEmpty).map(p => ({
                        ...p,
                        id: `enumPickEmpty_${p.value}`,
                        selected: false,
                    }))
                }]
            })
        },
        async _initDataOther() {
            // other filter
            this.sourceTree.push({
                text: '其它',
                popupTitle: '高级筛选',
                options: [{
                    filterKey: 'hasClearing',
                    text: '补录',
                    limit: 1,
                    disableCancel: true,
                    options: [{
                        id: 'hasClearing_',
                        text: '不限',
                        value: '',
                        selected: true, // 默认不限
                        disableShortcut: true // 不限不进入shortcut
                    }, {
                        id: 'hasClearing_true',
                        text: '仅看补录',
                        value: true,
                        selected: false
                    }, {
                        id: 'hasClearing_false',
                        text: '不看补录',
                        value: false,
                        selected: false
                    }]
                }]
            })
        },
        async initData() {
            await this._initDataCollege()
            await this._initDataMajor()
            await this._initDataPick()
            await this._initDataOther()
        },
        handleShortcutClear(item) {
            const [filterKey] = item?.id?.split('_')
            if (!filterKey) return
            let option = findTreeNode(this.sourceTree, op => op.filterKey == filterKey, 'options')
            if (option.limit == 1) this.filter[filterKey] = ''
            else _.pull(this.filter[filterKey], item.value)
            const selected = option.options.find(i => i.selected)
            // 互斥项处理
            if (!selected) {
                let defaultSelected = option.options.find(i => i.disableShortcut)
                if (!defaultSelected && option.mutex) {
                    option = findTreeNode(this.sourceTree, op => op.filterKey == option.mutex, 'options')
                    defaultSelected = option.options.find(i => i.disableShortcut)
                }
                if (defaultSelected) {
                    defaultSelected.selected = true
                    this.filter[option.filterKey] = defaultSelected.value
                }
            }
        },
        async showPopup(op) {
            await this.couldChangeFilter(op)
            this.$refs.popup.open(op)
        }
    }
}
</script>

<style scoped>

</style>