<template>
    <view class="recommend-filter-major">
        <!-- <u-sticky offset-top="-44px">{{0}}/{{checkedMax}}</u-sticky> -->
        <u-loading-icon v-if="loading || !init"/>
        <u-collapse v-if="init" :value="expands" @open="markOpenMajors">
            <u-collapse-item v-for="top in majorTree" :key="top.code" :name="top.name">
                <view slot="title" class="fx-1 fx-row fx-bet-cen pr15">
                    <text>{{ top.name }}</text>
                    <text
                            v-if="checkedMajors[top.name]">
                        {{ checkedMajors[top.name].length }}/{{ top.children.length }}
                    </text>
                </view>
                <view v-if="top.children.length>3" class="fx-inline self-end mb12">
                    <u-button type="primary" shape="circle" size="mini" class="ml10" @click="handleCheckAll(top)">全选
                    </u-button>
                    <u-button shape="circle" size="mini" class="ml5" @click="handleReverse(top)">反选</u-button>
                </view>
                <u-checkbox-group v-if="openedMajors[top.name]" v-model="checkedMajors[top.name]"
                                  :active-color="$u.color.primary" placement="column" icon-placement="right">
                    <u-checkbox v-for="major in top.children" :key="major.code" :label="major.name" :name="major.name">
                    </u-checkbox>
                </u-checkbox-group>
            </u-collapse-item>
        </u-collapse>
    </view>
</template>

<script>
import SearchMajorInjectionMixin from "@/pagesOther/pages/voluntary/components/SearchMajorInjectionMixin";

export default {
    name: 'recommend-filter-major',
    mixins: [SearchMajorInjectionMixin],
    props: {
        filter: {
            type: Object,
            default: () => ({})
        },
        batch: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            loading: false,
            init: false,
            expands: [],
            checkedMajors: {},
            checkedMax: 10,
            openedMajors: {} // 用于标记2级专业打开情况，全部打开太卡了
        }
    },
    async mounted() {
        this.loading = true
        await this.ensureMajorFullTree(this.batch.batch)
        this.loading = false
        this.init = false
        this.initCheckedMajors()
        this.init = true
    },
    methods: {
        initCheckedMajors() {
            let exists = [...this.filter.majors]
            let expands = []
            this.majorTree.forEach(top => {
                const subMajors = top.children.map(c => c.name)
                const checked = exists.filter(item => subMajors.includes(item))
                exists = exists.filter(item => !checked.includes(item))
                this.$set(this.checkedMajors, top.name, checked)
                this.$set(this.openedMajors, top.name, checked)
                if (checked.length) {
                    expands.push(top.name)
                }
            })
            this.expands = expands
        },
        markOpenMajors() {
            const opened = Object.keys(this.openedMajors).filter(key => this.openedMajors[key])
            const delta = this.expands.filter(key => !opened.includes(key))
            delta.forEach(key => this.openedMajors[key] = true)
        },
        handleCheckAll(top) {
            const all = top.children.map(c => c.name)
            this.checkedMajors[top.name] = all
        },
        handleReverse(top) {
            const all = top.children.map(c => c.name)
            const current = this.checkedMajors[top.name]
            const reverse = all.filter(i => !current.includes(i))
            this.checkedMajors[top.name] = reverse
        },
        handleReset() {
            Object.keys(this.checkedMajors).forEach(key => this.checkedMajors[key] = [])
        },
        handleConfirm() {
            if (this.loading) return

            const checked = []
            Object.keys(this.checkedMajors).forEach(key => checked.push(...this.checkedMajors[key]))
            if (checked.length > this.checkedMax) {
                this.msgError(`最多选择${this.checkedMax}个专业`)
                return
            }

            const checkedCopy = [...checked]
            const exists = [...this.filter.majors]
            checkedCopy.sort()
            exists.sort()
            const changed = checkedCopy.toString() != exists.toString()
            if (changed) {
                this.filter.majors = checked // 保留本身顺序在复显时能更快还原
                this.updateCheckedList(checked)
            }
            return changed
        }
    }
}
</script>

<style lang="scss" scoped>
.recommend-filter-major {
  padding: 12px 15px;

  // max-height: 40vh;
  // overflow-y: scroll;

  /deep/ .u-checkbox-group {
    padding-left: 30px;

    .u-checkbox + .u-checkbox {
      margin-top: 10px;
    }
  }
}
</style>
