<style>
.select-main{
    font-size: 12px;
}
.select-main .select-box{
    height: 300px;
    overflow-y: auto;
}
.select-main .select-item{
    display: flex;
    align-items: center;
    padding: 5px;
}
.select-main .select-item .el-switch{
    margin-right: 10px;
}
.select-main .select-input{
    margin-bottom: 5px;
}
.select-main .select-btn{
    margin-top: 5px;
    text-align: right;
}
.select-main .select-btn .crm-btn.crm-btn-mini{
    margin-right: 0;
}
.select-main .el-switch__core{
    width: 33px !important;
}
</style>
<template>
    <div class="select-main">
        <div class="select-input">
            <el-input @input="queryItem" v-model="input" size="mini" placeholder="请输入内容"></el-input>
        </div>
        <ul class="select-box">
            <li v-for="(item, index) in list" :key="index">
                <div class="select-item" v-if="index!==0 && item.s">
                    <el-switch
                        size="mini"
                        v-model="item.show"
                        :active-value="true"
                        :inactive-value="false">
                    </el-switch>
                    <p>{{item.label}}</p>
                </div>
            </li>
        </ul>
        <div class="select-btn">
            <el-button class="crm-btn crm-btn-mini query-btn" @click="changeSelectState()">保存</el-button>
            <el-button class="crm-btn crm-btn-mini easy-btn" @click="changeSelectState('reset')">重置</el-button>
        </div>
    </div>
</template>
<script>
export default {
  props:{
    queryType:{
      type:Array,
      default:[]
    }
  },
  data() {
    return {
        input: '',
        list: [],
    };
  },watch:{
    queryType: {//普通的watch监听
        handler(val, oldVal){
            this.init()
        },
        deep:true //true 深度监听
    }
 },
  mounted() {
    this.init()
  },
  methods: {
    queryItem(text){
        this.list.map(x=>{
            if (x.label.indexOf(text)==-1) {
                x.s = false
            } else {
                x.s = true
            }
        })
    },
    init(){
        let $this = this
        let list = JSON.parse(JSON.stringify($this.queryType))
        list.forEach(el => {
            el.s = true
        });
        $this.list = list
    },
    changeSelectState(type){
        let i = 0;
        this.list.map(x=>{
            if (x.show) {
                i++
            }
        })
        if (i < 2) {
            return this.$message.error('最少显示两列数据')
        }
        if (type) {
            this.list.map(x=>{
                x.show = true
            })
        }
        this.$emit('listenTochildEvent', this.list);
    }
  }
}
</script>