<template>
    <div class="type_contain">
        <div class="type_header">
            <div class="openbox" @click="openflag_func">
                <span>{{openflag?'收起':'筛选'}}</span>
                <i v-if="!openflag" class="el-icon-caret-bottom"></i>
                <i v-if="openflag" class="el-icon-caret-top"></i>
            </div>
            <el-input
                class="search"
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                @input="post_value()"
                v-model="input2">
            </el-input>
        </div>
        <div class="type_select" v-show="openflag">
            <div style="overflow:hidden;" class="line_data" v-for="(item,index) in data" :key="index+5000">
                <div class="select_name">
                    {{item.name}}：
                </div>
                <div :ref="'select_arr_box'+index" class="select_arr_box" :style="show_selected[index]?{}:{height:'52px',overflow:'hidden'}">
                    <div :ref="'select_item'+index" style="overflow:hidden;">
                        <div class="select_item" :style="selected_arr[index].length==0?{color:'#515fe7',fontWeight:600}:''" @click="set_select(0,index)">全部</div>
                        <div class="select_item" :style="selected_arr[index].indexOf(it.id)!==-1?{color:'#515fe7',fontWeight:600}:{}" @click="set_select(1,index,it.id)" v-for="(it,idx) in item.arr" :key="idx+6000">
                            {{it.name}} 
                        </div>
                    </div>
                    <div v-show="show_open[index]" class="select_item_open" @click="set_open(index)">
                        <span>{{show_selected[index]?'收起':'展开'}}</span>
                        <i v-if="!show_selected[index]" class="el-icon-caret-bottom"></i>
                        <i v-if="show_selected[index]" class="el-icon-caret-top"></i>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    props: ['data'],
    components: {

    },
    data() {
        return {
            input2:'',
            openflag:false,
            selected_arr:[
                [],
                [],
                [],
            ],
            show_selected:[
                false,
                false,
                false
            ],
            show_open:[
                false,
                false,
                false
            ]
        };
    },
    watch: {

    },
    computed: {

    },
    created() {

    },
    mounted() {
        window.onresize = ()=>{
            this.pageResize();
        }
    },
    destroyed(){
      window.onresize = null;
    },
    methods: {
        openflag_func(){
            this.openflag = !this.openflag;
            setTimeout(()=>{
                this.pageResize()
            },100)
        },
        pageResize(){
            if(this.$refs.select_item0[0].clientHeight>this.$refs.select_arr_box0[0].clientHeight+2){
                this.$set(this.show_open,0,true)
            }else{
                this.$set(this.show_open,0,false)
            }
            if(this.$refs.select_item1[0].clientHeight>this.$refs.select_arr_box1[0].clientHeight+2){
                this.$set(this.show_open,1,true)
            }else{
                this.$set(this.show_open,1,false)
            }
            if(this.$refs.select_item2[0].clientHeight>this.$refs.select_arr_box2[0].clientHeight+2){
                this.$set(this.show_open,2,true)
            }else{
                this.$set(this.show_open,2,false)
            }
        },
        set_select(n,index,id){
            if(n==0){
                this.$set(this.selected_arr,index,[])
            }else{
                if(this.selected_arr[index].indexOf(id)==-1){
                    this.selected_arr[index].push(id)
                }else{
                    this.selected_arr.splice(this.selected_arr[index].indexOf(id), 1)
                }
            }
            this.post_value()
        },
        set_open(index){
            this.$set(this.show_selected,index,!this.show_selected[index])
        },
        post_value(){
            var temp = {
                word:this.input2,
            }
            this.data.forEach((e,idx) => {
                temp[e.key] = this.selected_arr[idx]
            });
            this.$emit('getselect',temp)
        }
    },
};
</script>

<style>
.type_header .el-input__inner{
    width: 240px;
    background-color: #f7f8f9;
}
.type_header .el-input{
    width: 240px;
}
</style>
<style scoped>
.type_contain{
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #e9ecf3;
}
.type_header{
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
}
.openbox{
    width: 105px;
	height: 40px;
    line-height: 40px;
    text-align: center;
	background-color: #f7f8f9;
	border-radius: 8px;
	border: solid 1px #e3e5ef;
    float: left;
    color: #58617a;
    font-size: 14px;
}
.search{
    float: right;
}
.select_name{
    width: 100px;
    text-align: right;
    font-size: 14px;
    color: #8890a7;
    height: 52px;
    line-height: 52px;
    float: left;
}
.select_arr_box{
    width: calc(100% - 100px);
    float: left;
    border-bottom: 1px solid #e9ecf3;
    overflow: hidden;
    padding-left: 20px;
    padding-right: 50px;
    position: relative;
}
.type_select .line_data:nth-last-of-type(1) .select_arr_box{
    border-bottom:0;
}
.select_item,.select_item_open{
    height: 52px;
    line-height: 52px;
    margin-right: 40px;
    float: left;
    color: #58617a;
    cursor: pointer;
}
.select_arr_box .select_item_open{
    position: absolute;
    right:0;
    margin-right: 10px;
    top:0;
}
</style>
