<template>
    <base-filtrate ref="baseFiltrate"
                   v-if="loaded"
                   :filtrates="filtrates"
                   :components="components"
                   v-bind="$attrs"
                   v-on="new$listeners"
    >
        <template slot="primaryPrv">
            <slot name="primaryPrv"></slot>
        </template>
        <template slot="dashedNext">
            <slot name="dashedNext"></slot>
        </template>
        <template slot="textSpan">
            <slot name="textSpan"></slot>
        </template>
    </base-filtrate>
</template>

<script>
import baseFiltrate from "./base-filtrate"

export default {
    name: "seFiltrate01",
    components: {
        baseFiltrate
    },
    data() {
        return {
            loaded: true,
            filtrateConfigs: [],
        };
    },
    props: {
        filtrates: {//筛选项目
            type: Array,
            default: () => []
        },
        components: {
            type: Object,
            default: () => {
            }
        },
    },
    watch: {
        filtrates: {
            immediate: true,
            handler(newV, oldV) {
                if (!newV || newV.length === 0) return;
                this.loaded = false;
                this.reload({
                    filtrates: newV,
                    bindHistoryData:false,
                });
            }
        }
    },
    computed: {
        new$listeners() {
            return Object.assign({}, this.$listeners, {
                submit: this.submit,
                reset: this.reset
            })
        }
    },
    methods: {
        /**
         * 初始化渲染
         * @param filtrates 筛选原始配置项
         * @param bindHistoryData 是否绑定历史筛选数据
         */
        init({filtrates = this.filtrates, bindHistoryData = true}) {
            let filtrateConfigs = [];
            let result = this.getResult();
            filtrates.forEach(function (item) {
                filtrateConfigs.push({
                    ...item,
                    model: bindHistoryData ? result[item.key] : null,
                })
            })
            this.filtrateConfigs = filtrateConfigs;
        },
        /**
         * 提交按钮事件
         */
        submit(result) {
            this.$emit("submit", result);
        },
        /**
         * 重置按钮事件
         */
        reset(result) {
            if (this.$listeners.reset) {
                this.$emit("reset", result);
            } else {
                this.submit(result);
            }
        },
        getChildMap() {
            return this.$refs.baseFiltrate.getChildMap();
        },
        /**
         * 从所有项目中移除某一项
         */
        removeFromFiltrates(item) {
            for (let i = 0; i < this.filtrates.length; i++) {
                if (this.filtrates[i].key == item.key) {
                    this.filtrates.splice(i, 1);
                    return;
                }
            }
        },
        addItemByIndex(item, index) {
            if (index == null) {
                index = this.filtrates.length;
            }
            this.filtrates.splice(index, 0, item);
        },
        /**
         * 添加一个筛选项目
         */
        addItem(item) {
            this.addItemByIndex(item);
        },
        /**
         * 获取筛选数据
         */
        getResult() {
            let baseFiltrate = this.$refs.baseFiltrate;
            if (baseFiltrate) {
                return baseFiltrate.getResult();
            } else {
                return {}
            }
        },
        /**
         * 重新渲染组件 更改总配置项时使用
         * @param options
         * @param options.filtrates 原始配置项 不传则取当前组件缓存配置
         * @param options.bindHistoryData 是否绑定渲染前已经存储的数据 默认为true
         */
        reload(options) {
            let vm = this;
            // let {filtrates, bindHistoryData} = options;
            vm.loaded = false;
            this.$nextTick(function () {
                this.init(options);
                vm.loaded = true;
            })
        }
    }
};
</script>
