<template>
    <div class="app-searchbar">
        <div class="app-searchbar-group" v-for="(item,index) in items">
            <el-select size="small" class="app-searchbar-field app-searchbar-item" v-model="item.field" clearable :placeholder="$t('components.filterTree.placeholder')">
                <el-option
                    v-for="field in fieldItems"
                    :key="field.value"
                    :label="field.label"
                    :value="field.value">
                </el-option>
            </el-select>
            <AppSearchMode class="app-searchbar-item" v-model="item.mode" :modes="getModes(item.field)" @on-change="onModeChange($event, item)"></AppSearchMode>
            <div class="app-searchbar-value app-searchbar-item">
                <i-input v-if="!item.editor"></i-input>
                <div v-else :key="item.editor">
                    <slot :data="item"></slot>
                </div>
                <div class="app-searchbar-action">
                    <img v-if="index === items.length - 1" src="assets/img/ic_add_circle.svg" @click="onAddItem()">
                    <img v-else src="assets/img/remove_circle.svg" @click="onRemoveItem(index)">
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts"> 
import {Vue, Component, Prop, Watch} from 'vue-property-decorator';
import AppSearchMode from './app-searchbar-mode.vue';

@Component({
    components: {
        AppSearchMode
    }
})
export default class AppSearchbar extends Vue {

    /**
     * 数据集
     *
     * @type {*}
     * @memberof AppSearchbar
     */
    @Prop() items: any;

    /**
     * 过滤项集合
     *
     * @type {*}
     * @memberof AppSearchbar
     */
    @Prop() fields: any;

    /**
     * 属性项集合
     *
     * @type {*}
     * @memberof AppSearchbar
     */
    protected fieldItems: any[] = [];

    /**
     * 生命周期
     *
     * @return {void}
     * @memberof AppSearchbar
     */
    public created() {
        if(!this.fields) {
            return;
        }
        if (this.items.length == 0) {
            this.items.push({
                field: null,
                mode: null,
                editor: null
            })
        }
        this.fields.forEach((field: any) => {
            let index: number = this.fieldItems.findIndex((item: any) => Object.is(item.value, field.prop));
            if(index < 0) {
                this.fieldItems.push({
                    label: field.label,
                    value: field.prop,
                    modes: this.getFieldModes(field.prop)
                })
            } 
        });
        
    }

    /**
     * 获取逻辑模式集合
     *
     * @return {void}
     * @memberof AppSearchbar
     */
    public getModes(field: string) {
        if(this.fieldItems.length > 0) {
            let item: any = this.fieldItems.find((item: any) => Object.is(item.value, field));
            if(item) {
                return item.modes;
            }
        }
        return [];
    }

    /**
     * 获取属性逻辑模式集合
     *
     * @return {void}
     * @memberof AppSearchbar
     */
    public getFieldModes(name: string) {
        let modes: any[] = [];
        for(let i = 0; i < this.fields.length; i++) {
            let field: any = this.fields[i];
            if(!Object.is(field.prop, name)) {
                continue;
            }
            modes.push({
                name: field.name,
                mode: field.mode ? field.mode : 'all'
            })
        }
        return modes;
    }

    /**
     * 添加条件
     *
     * @return {*}
     * @memberof AppSearchbar
     */
    public onAddItem(data: any) {
        this.items.push({
            field: null,
            mode: null,
            editor: null
        });
    }

    /**
     * 删除条件/组
     *
     * @return {*}
     * @memberof AppSearchbar
     */
    public onRemoveItem(index: number) {
        this.items.splice(index, 1);
    }

    /**
     * 条件逻辑变化
     *
     * @return {*}
     * @memberof AppSearchbar
     */
    public onModeChange(mode: any, data: any) {
        if(mode && data) {
            data.editor = mode.name;
        } 
    }
}
</script>

<style lang="scss">
@import './app-searchbar.scss';
</style>