<template>
    <su-filtrate-diy
        v-bind="$attrs"
        v-on="new$listeners"
    >
        <su-filtrate-diy-item
            :term="item.label"
            v-for="item in itemList"
            :key="item.id"
            v-show="item.show"
            :class="{ 'is-required': item.required, 'full-line': item.fullLine }"
        >
            <component
                :is="item.component"
                :property="item.property"
                :class="{'label-none':!item.label,'label-left':!!item.label}"
                :getData="() => {return getData(item)}"
                @change="(model) => {return item.change(model)}"
                @keyup="submit"
                :ref="item.name"
            ></component>
        </su-filtrate-diy-item>
        <template slot="primaryPrv">
            <slot name="primaryPrv"></slot>
        </template>
        <template slot="dashedNext">
            <slot name="dashedNext"></slot>
        </template>
        <template slot="textSpan">
            <slot name="textSpan"></slot>
        </template>
    </su-filtrate-diy>
</template>

<script>
/**
 * 重新渲染
 * $refs.vefiltrate.reload();
 */
import ChildItem from "./ChildItem"
import seFiltrateDiy from "../su-filtrate-diy"
import mixin from "../../mixin";
export default {
    name: "seFiltrate",
    mixins:[mixin],
    components: {
        seFiltrateDiy,
        seFiltrateDiyItem: seFiltrateDiy.item
    },
    data() {
        return {
            componentMap: {},
            itemList: [],
            ChildMap: {},
            selfAdvanced: false,
            loaded: false,
        };
    },
    props: {
        filtrates: {//筛选项目
            type: Array,
            default: () => []
        },
        components: {
            type: Object,
            default: () => {
            }
        },
        defSubmit: {
            type: Boolean,
            default: true,
        },
        plain: {
            type: Boolean,
            default: false
        }
    },
    created() {
        let defComp = {
            text: () => import("./items/text.vue"),//文本id
            textObject: () => import("./items/textObject.vue"),//文本对象
            input: () => import("./items/input.vue"),//输入
            inputRange: () => import("./items/inputRange.vue"),//输入区间
            select: () => import("./items/select.vue"),//选择
            doubleSelect: () => import("./items/doubleSelect.vue"),//双选择
            // treeSelect: () => import("./items/treeSelect.vue"),//树状子节点
            treeSelect: () => import("./items/treeSelect2.vue"),//树状子节点
            selectInput: () => import("./items/selectInput.vue"),//选择+输入
            selectRangePicker: () => import("./items/selectRangePicker.vue"),//选择+日期区间选择
            selectCascader: () => import("./items/selectCascader.vue"),//选择+级联
            //treeSelectStrictly: () => import("./items/treeSelectStrictly.vue"),//树状单选择
            //treeCheckSelect: () => import("./items/treeCheckSelect.vue"),//树状多选择
            datePicker: () => import("./items/datePicker.vue"),//日期
            datePickerYear: () => import("./items/datePickerYear.vue"),// 年份
            rangePickerSingle: () => import("./items/rangePickerSingle.vue"),// 起止日期独立
            rangePicker: () => import("./items/rangePicker.vue"),//起止日期
            selectDialog: () => import("./items/selectDialog.vue"),
            selectDialog2: () => import("./items/selectDialog2.vue"),
           filterCheckSelect: () => import("./items/filterCheckSelect.vue"),//多选可搜索
            pickerSelect: () => import("./items/pickerSelect.vue"),//快捷时间选择
            // selectMixDialog: () => import("./items/selectMixDialog.vue"),
            // selectInputMix: () => import("./items/selectInputMix.vue"),
        };
        this.componentMap = {
            ...this.components,
            ...defComp,
        }
    },
    mounted() {
        this.load();
    },
    computed: {
        new$listeners() {
            return Object.assign(this.$listeners, {
                submit: this.submit,
                reset: this.reset
            })
        }
    },
    methods: {
        /**
         * 首次加载渲染
         */
        async load() {
            await this.init();
            if (this.defSubmit) this.submit();
        },
        getItem(child) {
            return child instanceof ChildItem ? child.sourceItem : child;
        },
        /**
         * 根据原始代码数据，生成组件筛选子组件对象数据
         * @param item
         */
        getChild(item) {
            let vm = this;
            let child = item instanceof ChildItem ? item : new ChildItem(item, vm.componentMap[item.type], vm.ChildMap);
            child.setGetRefFunc(async () => {
                return await vm.getRef(child.name)
            });
            return child;
        },
        getChildMap() {
            return this.ChildMap;
        },
        /**
         * 初始化数据及状态
         * @returns {Promise<any>}
         */
        async init() {
            let vm = this;
            let itemList = [];
            this.itemList = [];
            for (let i = 0; i < this.filtrates.length; i++) {

                let item = this.filtrates[i];
                let child = this.getChild(item);
                itemList.push(child)
            }
            vm.itemList = itemList;

            for (let i = 0; i < itemList.length; i++) {
                let item = itemList[i];
                await item.reRender();
            }
            for (let i = 0; i < itemList.length; i++) {
                let item = itemList[i];
                if (item.immediateChange) {
                    await item.change(item.model)
                }
            }
        },
        submit() {//查询按钮事件
            this.$emit("submit", this.getResult());
        },
        async reset() {//重置按钮事件
            for (let i = 0; i < this.itemList.length; i++) {
                let item = this.itemList[i];
                item.model = item.getDefValue();
                item.modelOld = null;
                await item.reRender();
                if (item.immediateChange) {
                    item.change(item.model)
                }
            }
            this.$emit("reset", this.getResult());
        },
        getData(item) {
            let data = item.getData && item.getData() || item.data;
            if (data instanceof Promise) {
                return data;
            } else {
                return new Promise(resolve => {
                    resolve(data);
                })
            }
        },
        /**
         * 获取筛选数据
         */
        getResult() {
            let result = {};
            for (let i = 0; i < this.itemList.length; i++) {
                let item = this.itemList[i];
                result[item.key] = item.model;
            }
            return result;
        }
    }
};
</script>
<style scoped>
.full-line {
    width: 100%;
}
</style>
