<template>
    <uv-popup ref="popup" mode="top" :safe-area-inset-bottom="false">
        <view class="fx-col bg-white" @touchmove.stop>
            <view class="h-[50px] fx-col fx-cen-cen text-main">
                <text>{{ option.popupTitle }}</text>
                <text class="text-4xs text-tips">{{ option.popupDesc }}</text>
            </view>
            <uv-line/>
            <view class="bg-white overflow-y-auto" style="max-height: 40vh">
                <template v-if="localOption">
                    <ai-column-cells v-if="localOption.filterKey" :option="localOption"/>
                    <ai-group-cells v-else-if="localOption.template" :option="localOption"/>
                    <ai-group-tags v-else :option="localOption"/>
                    <uv-gap height="20"/>
                </template>
            </view>
            <view class="h-[50px] fx-row fx-bet-cen px-20 gap-20 mx-shadow-up">
                <uv-button shape="circle" text="重置" class="!flex-1" @click="handleReset"/>
                <uv-button type="primary" shape="circle" text="确定" class="!flex-1" @click="handleConfirm"/>
            </view>
        </view>
    </uv-popup>
</template>

<script>
import _ from 'lodash';
import CommonPickerCell from "@/pagesOther/pages/ie/components/picker/common-picker-cell.vue";
import AiColumnCells from "@/pagesOther/pages/ie/entry-ai-form/components/filter/template/ai-column-cells.vue";
import AiGroupTags from "@/pagesOther/pages/ie/entry-ai-form/components/filter/template/ai-group-tags.vue";
import AiGroupCells from "@/pagesOther/pages/ie/entry-ai-form/components/filter/template/ai-group-cells.vue";
import InjectAIDataMixin from "@/pagesOther/pages/ie/entry-ai-form/components/InjectAIDataMixin";

export default {
    name: "ai-dropdown-popup",
    components: {AiGroupCells, AiGroupTags, AiColumnCells, CommonPickerCell},
    mixins: [InjectAIDataMixin],
    data() {
        return {
            option: {},
            localOption: null // for modify
        }
    },
    methods: {
        open(op) {
            this.option = op
            this.makeSnapshot()
            this.$refs.popup.open()
        },
        close() {
            this.$refs.popup.close()
        },
        async makeSnapshot() {
            // every time of popup shows, make snapshot,
            // so dropdown only modify the clone option
            this.localOption = _.cloneDeep(this.option)
        },
        async handleReset() {
            // only reset localOption.
            this._resetOption(this.localOption)
        },
        async handleConfirm() {
            // sync option selected status to ai-form-filter & filter-shortcut.
            this._syncOption(this.localOption, this.option)
            // then close popup
            this.close()
        },
        _resetOption(option) {
            if (option.filterKey) option.options.forEach(i => i.selected = !!i.disableShortcut)
            else option.options.forEach(this._resetOption)
        },
        _syncOption(from, to) {
            // `from` and `to` have the same structure.
            const changes = []
            from.options.forEach((item, index) => {
                const target = to.options[index]
                if (from.filterKey) {
                    const changed = item.selected != target.selected
                    if (changed) {
                        // option selected sync here
                        target.selected = item.selected
                        // NOTE: push origin options into changes,
                        // so filter-shortcut has reactive availability.
                        changes.push(target)
                    }
                } else {
                    this._syncOption(item, target)
                }
            })
            // filter and shortcut sync here
            if (changes.length && from.filterKey) {
                // sync filter
                this.filter[from.filterKey] = from.limit == 1
                    ? changes.find(i => i.selected)?.value
                    : changes.filter(i => i.selected).map(i => i.value)
                // sync shortcut
                changes.filter(i => !i.selected && !i.disableShortcut)
                    .forEach(i => arrayRemove(this.shortcut, i, (l, r) => l.id == r.id))
                this.shortcut.push(...changes.filter(i => i.selected && !i.disableShortcut))
            }
        }
    }
}
</script>

<style scoped>
</style>
