<template>
    <div class="sql-grid-filter-pane">
        <div>
            <slot></slot>
        </div>
        <Form class="items" inline @submit.native.prevent @keyup.enter.native.stop="filter">
            <FormItem v-for="f in filters" :key="f.code" v-model="data">
                <component :is="filterType(f)" :data="data" :filter="f"></component>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="filter()">{{$t('it.grid.queryText')}}</Button>
            </FormItem>
        </Form>
        <div class="other">
            <Button
                type="text"
                v-show="canSupperCnd"
                @click="showSupperCnd"
            >{{$t('it.grid.senior')}}</Button>
            <Badge v-if="advancedFilterItems.length > 0" dot :offset="[-12,15]"></Badge>
        </div>
    </div>
</template>
<script>
import Emitter from '../../mixins/emitter'
import HighFilter from './high-filter'
import FilterUtils from './utils.js'
import FInput from './item/input'
import FSelect from './item/select'
import FMultiSelect from './item/multi-select'
import FTree from './item/tree'
import FYearMonth from './item/year-month'
import FDate from './item/date'
import FDateRange from './item/date-range'
import FAutoComplete from './item/auto-complete'

export default {
    name: 'FilterPane',
    data() {
        return {
            data: {},
            advancedFilterItems: [],
        }
    },
    mixins: [FilterUtils, Emitter],
    props: {
        filters: {
            type: Array,
        },
        columns: {
            type: Array,
        },
    },
    components: {
        FAutoComplete,
        FDate,
        FDateRange,
        FInput,
        FSelect,
        FTree,
        FYearMonth,
        FMultiSelect,
    },
    watch: {
        filters(newVal) {
            this.setFilterDefaultValue()
            this.resetFilterFuncs(newVal)

            setTimeout(() => {
                this.filter()
            }, 500)
        },
    },
    computed: {
        /**
         * 判断是否可以显示高级
         */
        canSupperCnd() {
            if (
                this.filters &&
                this.filters.length > 0 &&
                this.columns &&
                this.columns.length > 0
            ) {
                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.length > 0
            }

            return false
        },
    },
    methods: {
        filter() {
            const fa = this.getFilterValues()
            this.$emit('on-filter', fa)
        },

        //设置过滤相关，联动处理
        resetFilterFuncs(filter) {
            if (filter) {
                filter.forEach((f) => {
                    const defValue = f.defValue
                    //第一个为函数，第二个为值
                    if (defValue && defValue.indexOf(':') > 0) {
                        const FVS = defValue.split(':')
                        const fnName = FVS[0]
                        const fieldName = FVS[1]
                        const eventName = `on-${fieldName}-change`
                        this.$on(eventName, (value) => {
                            this.multicast(/FSelect|FTree/, eventName, [
                                fnName,
                                value,
                            ])
                        })
                    }
                })
            }
        },

        /**
         * 获取组件类型
         */
        filterType(filter) {
            //SqlGrid为editor，NoSqlGrid为type
            const editor = filter.editor || filter.type

            return `F${editor}`
        },

        showSupperCnd() {
            HighFilter.show({
                columns: this.columns,
                filters: this.filters,
                advancedFilterItems: this.advancedFilterItems.concat(),
                onOkCallback: (items) => {
                    this.advancedFilterItems = items.concat()
                    this.filter()
                },
            })
        },
    },
    mounted() {
        this.$emit('on-resize', this.$el.offsetHeight)
    },
}
</script>
<style lang="less"
    scoped>
.sql-grid-filter-pane {
    display: flex;
    align-items: center;
    padding: 3px 0;

    .ivu-form {
        margin-left: 10px;
    }

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

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

    .tree-wrapper {
        max-height: 160px; // width: 300px;
    }

    .items {
        flex: 1;
        text-align: left;
    }
}

.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>
