<template>
    <view class="recommend-filter-extra">
        <!--        <view class="f-666 f13 mb5">中外合作</view>-->
        <!--        <u-subsection :current="foreign" :list="foreignOptions" mode="subsection" key-name="label"-->
        <!--                      :active-color="$u.color.primary" @change="handleForeignChange"/>-->
        <view class="f-666 f13 mb5">历年征集</view>
        <u-subsection :current="collect" :list="collectOptions" mode="subsection" key-name="label"
                      :active-color="$u.color.primary" @change="handleCollectChange"/>
        <!--        <view class="f-666 f13 mb5 mt15">国家专项</view>-->
        <!--        <u-subsection :current="nation" :list="nationOptions" mode="subsection" key-name="label"-->
        <!--                      :active-color="$u.color.primary" @change="handleNationChange"/>-->
        <!--        <view class="f-666 f13 mb5 mt15">地方专项</view>-->
        <!--        <u-subsection :current="local" :list="localOptions" mode="subsection" key-name="label"-->
        <!--                      :active-color="$u.color.primary" @change="handleLocalChange"/>-->
        <view class="f-666 f13 mb5 mt15">专项计划</view>
        <u-checkbox-group v-model="specialProjects" placement="column" icon-placement="right" class="gap10"
                          @change="handleSpecialProjectsMutex">
            <u-checkbox v-for="item in specialProjectOptions" shape="circle" :key="item" :label="item" :name="item"
                        :label-color="$u.color.mainColor" :active-color="$u.color.primary"/>
        </u-checkbox-group>
        <u-text size="10" prefix-icon="info-circle" type="content" :text="specialProjectsMutexTips" margin="5px 0 0 0"
                :icon-style="{'margin-right': '5px', color: $u.color.warning}"/>
    </view>
</template>

<script>
import MxConst from '@/common/MxConst'
import {arrayLast, arrayRemove} from "@/common/tools/ext";

export default {
    name: 'recommend-filter-extra',
    props: {
        filter: {
            type: Object,
            default: () => ({})
        },
        batch: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            foreignOptions: MxConst.enum.sinoforeignOptions,
            collectOptions: MxConst.enum.collectOptions,
            nationOptions: MxConst.enum.specialProjectNationOptions,
            localOptions: MxConst.enum.specialProjectLocalOptions,
            foreign: 0,
            collect: 0,
            nation: 0,
            local: 0,
            // special project options // dynamic feature
            specialProjectOptions: [],
            specialProjects: []
        }
    },
    computed: {
        currentForeign() {
            return this.foreignOptions[this.foreign]
        },
        currentCollect() {
            return this.collectOptions[this.collect]
        },
        currentNation() {
            return this.nationOptions[this.nation]
        },
        currentLocal() {
            return this.localOptions[this.local]
        },
        specialProjectsMutexTips() {
            return `不看${this.specialProjectOptions.slice(0, -1).join('、')}`
        }
    },
    mounted() {
        const foreignMatch = this.foreignOptions.findIndex(f => f.value === this.filter.sinoforeign)
        const collectMatch = this.collectOptions.findIndex(c => c.value === this.filter.collect)
        const nationMatch = this.nationOptions.findIndex(n => n.value === this.filter.specialProjectNation)
        const localMatch = this.localOptions.findIndex(l => l.value === this.filter.specialProjectLocal)
        if (foreignMatch > -1) this.foreign = foreignMatch
        if (collectMatch > -1) this.collect = collectMatch
        if (nationMatch > -1) this.nation = nationMatch
        if (localMatch > -1) this.local = localMatch
        this.loadSpecialProjectFilter()
    },
    methods: {
        async loadSpecialProjectFilter() {
            // keep snapshot
            this.specialProjects = [...this.filter.specialProjects]
            // load special project filer
            const params = {year: this.batch.year}
            this.specialProjectOptions = await this.$store.cache.dispatch('cachedData/getSpecialProjectFilter', params)
        },
        handleForeignChange(idx) {
            this.foreign = idx
        },
        handleCollectChange(idx) {
            this.collect = idx
        },
        handleNationChange(idx) {
            // nation & local are exclusive
            this.nation = idx
            // this.local = 0 // close the exclusive connection
        },
        handleLocalChange(idx) {
            // nation & local are exclusive
            this.local = idx
            // this.nation = 0 // close the exclusive connection
        },
        async handleSpecialProjectsMutex(e) {
            // 注意：此处组件的值表现形式与 PC 的组件并不一致。PC 的 v-model 在此事件中已经更改，而u-view并没有
            const snapshot = [...this.specialProjects]
            // 互斥关系 定义最后一个选项与其它选项互斥
            // 1 如果新选中最后一项，则清空其他选项
            // 2 反之如果新选择了非最后一项，已选中存在最后一项，则清空最后一项
            // 3 保存有效选项到snapshot以进行下一次对比
            await this.$nextTick()
            const mutexItem = arrayLast(this.specialProjectOptions)
            if (e.includes(mutexItem)) {
                if (!snapshot.includes(mutexItem)) this.specialProjects = [mutexItem]
                else if (e.length > 1) arrayRemove(e, mutexItem), this.specialProjects = e
            }
        },
        handleReset() {
            this.foreign = 0
            this.collect = 0
            this.nation = 0
            this.local = 0
            this.specialProjects = []
        },
        handleConfirm() {
            const foreignChanged = this.filter.sinoforeign !== this.currentForeign.value
            const collectChanged = this.filter.collect !== this.currentCollect.value
            const nationChanged = this.filter.specialProjectNation !== this.currentNation.value
            const localChanged = this.filter.specialProjectLocal !== this.currentLocal.value
            const spChanged = this.filter.specialProjects.toString() != this.specialProjects.toString()
            this.filter.sinoforeign = this.currentForeign.value
            this.filter.collect = this.currentCollect.value
            this.filter.specialProjectNation = this.currentNation.value
            this.filter.specialProjectLocal = this.currentLocal.value
            this.filter.specialProjects = this.specialProjects
            return foreignChanged || collectChanged || nationChanged || localChanged || spChanged
        }
    }
}
</script>

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

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

  .u-checkbox-group--column::v-deep {
    .u-checkbox-label--right + .u-checkbox-label--right {
      padding-top: 10px;
      border-top: 0.5px solid #EEEEEE;
    }
  }
}
</style>
