<template>
  <div class="inline-16">
    <el-popover
      placement="left"
      width="100"
      v-model="visible">
      <div style="padding:5px">
        <el-checkbox-group v-model="checkList" @change="handleChange">
          <el-checkbox style="width:100px" class="normal-margin" v-for="item in layout" :key="item.index" :label="item.title"></el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
      </div> -->
      <!-- <el-button slot="reference" size="mini">筛 选</el-button> -->
      <i class="el-icon-setting" slot="reference"></i>
    </el-popover>
  </div>
</template>

<script>
export default {
  props:['layout'],
  data () {
    return {
      visible:false,
      checkList:[],
    }
  },
  methods:{
    handleChange () {
    var arr = this.layout.filter((item) => {
      if (this.checkList.includes(item.title)) {
        return item;
      }
    })
      this.$emit('changeColumn',arr)
    }
  },
  mounted () {
    this.checkList = this.layout.map(e=>{
      return e.title
    })
  }
}

</script>
<style>
</style>