<template>
    <Modal :title="$t('it.grid.seniorQueryText')"
        :value="true"
        @on-ok="onOK"
        @on-cancel="onCancel"
        :mask-closable="false">
        <Item v-for="(item, index) in filterItems"
            :items="items"
            :item="item"
            :key="index"
            @on-remove="removeItem(index)" />
        <Button type="primary"
            @click="addItem()">{{$t('it.grid.addCndText')}}</Button>
            <a @click="resetItems" style="margin-left:20px">清空</a>
    </Modal>
    </div>
</template>
<script>
import Item from './high-filter-item'
export default {
    name: 'HighFilter',
    data() {
        return {
            filterItems: []
        }
    },
    computed: {
        items() {
            //columns,filters调用时传过来
            let filterLabels = {};
            this.filters.forEach(item => {
                filterLabels[item.label] = true
            });

            let items = []
            this.columns.forEach(item => {
                //去掉已经有过滤的
                if (!filterLabels[item.title] && item.show_sup) {
                    if (/String|Date|YearMonth|Number/.test(item.type)) {
                        items.push({
                            "label": item.title,
                            "value": item.field,
                            "type": item.type
                        })
                    }
                }
            });
            return items
        }
    },
    components: {
        Item
    },
    methods: {
        onCancel() {
            this.remove()
        },
        onOK() {
            this.remove()

            if (this.onOkCallback) {
                this.onOkCallback(this.getFilterItems())
            }
        },
        remove() {
            setTimeout(() => {
                this.destroy()
            }, 300);
        },
        destroy() {
            this.$destroy();
            document.body.removeChild(this.$el)
        },

        removeItem(index) {
            this.filterItems.splice(index, 1)
        },
        addItem() {
            this.filterItems.push({})
        },

        getFilterItems() {
            return this.filterItems.filter((item) => {
                if (item.op === 'is-null') {
                    return !!item.item
                } else {
                    return item.item && item.op && item.value;
                }
            });
        },
        resetItems() {
            this.filterItems = [{}]
        }
    },
    created() {
        if (this.advancedFilterItems.length > 0) {
            this.filterItems = this.advancedFilterItems
        } else {
            this.filterItems = [{}]
        }
    }
};

</script>
<style lang="less"
    scoped>
.ivu-form {
    text-align: left;
    padding-left: 20px;
}

.ivu-form-item {
    margin-bottom: 2px;
}

.ivu-input-wrapper {
    width: 120px;
}

.advanced {
    display: flex;
    align-items: center;
    margin-bottom: 6px;

    .item {
        width: 200px;
    }

    .op {
        width: 80px;
        margin: 0 6px;
    }

    .value {
        flex: 1
    }

    .remove {
        cursor: pointer;
    }
}

</style>
