<template>
    <view class="recommend-filter-college fx-column gap15">
        <view v-for="op in optionKeys" :key="op.prop" class="recommend-filter-college-group">
            <view class="f13 f-666 mb5">{{ op.title }}</view>
            <u-checkbox-group v-model="localFilter[op.writeKey]">
                <u-checkbox v-for="i in filterOptions[op.prop]" :key="i" :label="i" :name="i"/>
            </u-checkbox-group>
        </view>
    </view>
</template>

<script>
export default {
    name: "recommend-filter-college",
    inject: ['fetchFilterOptions', 'fetchOptionKeys'],
    props: {
        filter: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            localFilter: {}
        }
    },
    computed: {
        filterOptions() {
            return this.fetchFilterOptions()
        },
        optionKeys() {
            return this.fetchOptionKeys()
        }
    },
    mounted() {
        this.makeSnapshot()
    },
    methods: {
        makeSnapshot() {
            const snapshot = {}
            this.optionKeys.forEach(k => snapshot[k.writeKey] = [...this.filter[k.writeKey]])
            this.localFilter = snapshot
        },
        handleReset() {
            this.optionKeys.forEach(k => this.localFilter[k.writeKey] = [])
        },
        handleConfirm() {
            // condition changed judgement
            const changed = this.optionKeys.some(k => this.localFilter[k.writeKey].toString() != this.filter[k.writeKey].toString())
            // apply local-filter to real-filter
            this.optionKeys.forEach(k => this.filter[k.writeKey] = [...this.localFilter[k.writeKey]])
            return changed
        }
    }
}
</script>

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

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

  &-group {
    .u-checkbox-group--row::v-deep {
      flex-wrap: wrap;
      column-gap: 8px;
      row-gap: 5px;
    }
  }
}
</style>
