<template>
    <div class="bingo-search">
        <Input v-show="isNotInputType" v-model="searchText" :placeholder="searchPlaceholder" ref="input"
        suffix="ios-search" @on-enter="onSearch" :style="{width:searchWidth+'px'}">
        </Input>
        <span v-show="!isNotInputType" ref="searchOther" class="search-other">
            <slot name="searchType"></slot>
        </span>
        <Select v-model="searchType" transfer multiple class="select-btn" ref="select" @on-change="changeSelect" on-select="selectOne">
            <Option v-for="item in searchListArr" :disabled="item.disabled" :key="item.value" :value="item.value">{{item.label}}</Option>
        </Select>
        <div style="display: none" ref="cache"></div>
    </div>
</template>
<script>
    export default {
        name: 'bingo-search',
        props: {
            searchList: {
                type: Array,
                default () {
                    return [];
                }
            },
            searchWidth: {
                type: Number,
                default: 240
            }
            // {
            //     label:'用户名',
            //     value:'name',
            //     type: 'input'
            // },
            // {
            //     label:'工号',
            //     value:'pernr',
            //     type: 'input'
            // },
            // {
            //     label:'电话',
            //     value:'mobile',
            //     type: 'input'
            // },
        },
        data () {
            return {
                searchText: '',
                searchType: ['all'],
                searchPlaceholder: '',
                searchName: '',
                isNotInputType: true,
                isSelectedSpecialFlag: 0,
                searchListArr: [],
                isBegin: 0
            }
        },
        mounted () {
            this.searchListArr = this.searchList;
            let list = this.searchList.filter(item => item.value);
            // console.log(list)
            this.searchListArr.unshift({
                label: '全部文本字段',
                value: 'all',
                type: 'input'
            })
            this.getQueryParams();
        },
        watch: {
            searchType (val) {
                this.searchName = '';
                if (val.length == 1) {
                    this.searchListArr.forEach(item => {
                        if (item.value == val) {
                            this.searchName = item.label;
                        }
                    })
                } else if (val.length > 1) {
                    for (let i = 0; i < val.length; i++) {
                        this.searchListArr.forEach(item => {
                            if (item.value == val[i]) {
                                this.searchName += i == val.length - 1 ? item.label : item.label + ',';
                            }
                        })
                    }
                }
                this.searchPlaceholder = this.searchName == '' ? '请选择' : this.searchName
            }
        },
        methods: {
            // 获取搜索对象
            getQueryParams () {
                let searchObj = {};
                // 取交集
                let inter = []
                for (let i = 0, len = this.searchListArr.length; i < len; i++) {
                    for (let j = 0, length = this.searchType.length; j < length; j++) {
                        if (this.searchListArr[i].value === this.searchType[j]) {
                            inter.push(this.searchListArr[i])
                        }
                    }
                }
                for (let i = 0; i < inter.length; i++) {
                    if (inter[i].type == 'input') {
                        searchObj[inter[i].value] = this.searchText;
                    }
                }
                return searchObj;
            },
            // 搜索
            onSearch () {
                let searchObj = this.getQueryParams();
                this.$emit('get-data-list', searchObj, 0)
            },
            // 设置禁用
            getDisabled (interOption) {
                // 存在特殊type
                if (interOption.length > 0) {
                    this.isNotInputType = false;
                    // 添加slot  根据id判断
                    this.$refs.searchOther.innerHTML = '';
                    for (let i = 0; i < this.$slots.searchType.length; i++) {
                        if (this.$slots.searchType[i].elm.id == interOption[0].type) {
                            this.$refs.searchOther.appendChild(this.$slots.searchType[i].elm);
                        } else {
                            this.$refs.cache.appendChild(this.$slots.searchType[i].elm);
                        }
                    }
                    for (let i = 0; i < this.searchListArr.length; i++) {
                        if (this.searchListArr[i].value !== interOption[0].value) {
                            this.searchListArr[i].disabled = true;
                        }
                    }
                    this.searchType = [interOption[0].value];
                    this.$emit('get-special-type');
                    this.isSelectedSpecialFlag = 1;
                } else { // 特殊type不选中
                    this.isNotInputType = true;
                    for (let i = 0; i < this.searchListArr.length; i++) {
                        this.searchListArr[i].disabled = false;
                    }
                    this.isSelectedSpecialFlag = 0;
                }
            },
            // 选择改变
            changeSelect (val) {
                this.isBegin++;
                // 取交集
                let inter = []
                for (let i = 0, len = this.searchListArr.length; i < len; i++) {
                    for (let j = 0, length = val.length; j < length; j++) {
                        if (this.searchListArr[i].value === val[j]) {
                            inter.push(this.searchListArr[i])
                        }
                    }
                }
                let interOption = inter.filter(it => {
                    return it.type != 'input';
                })
                // 设置disabled
                this.getDisabled(interOption);
                if (interOption.length <= 0) {
                    if (this.isBegin !== 1) {
                        let searchObj = this.getQueryParams();
                        this.$emit('get-data-list', searchObj);
                    }
                }
            },
            selectOne (val) {
                let interList = []
                for (let i = 0, len = this.searchListArr.length; i < len; i++) {
                    if (this.searchListArr[i].type === 'input' || this.searchListArr[i].value != 'all') {
                        interList.push(this.searchListArr[i].value);
                    }
                }
                if (val == 'all') {
                    this.searchType.concat(interList);
                } else {
                    if (JSON.stringify(this.searchType) == JSON.stringify(interList)) {
                        this.searchType.push('all')
                    } else {
                        let index = this.searchType.indexOf('all');
                        if (index > -1) {
                            this.searchType.splice(index, 1);
                        }
                    }
                }
            }
        },
        components: {
        }
    }
</script>
<style lang="less" scoped>
            .ivu-select-dropdown-list{
                width:30px;
                .ivu-select-item{
                    padding-right: 40px;
                    max-width: 140px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
             }

</style>
