<template>
    <div style="padding:10px">
      <el-popover
        :width="popoverWidth"
        trigger="click">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
          全选
        </el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="selectCheckboxGroupValue" @change="handleCheckedChange">
          <el-checkbox v-for="item in list" :label="item.value" :key="item.value" :style="`width: ${checkboxWidth}px`">
            {{item.label.legth>5?q:item.label}}
          </el-checkbox>
        </el-checkbox-group>
        <el-select
          slot="reference"
          v-model="selectCheckboxGroupValue"
          multiple
          collapse-tags
          placeholder="请选择">
          <el-option
            class="el-option"
            v-for="item in list"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-popover>
    </div>
  </template>
  <script>
  
  export default {
    name: 'select_checkbox_group',
    props: {
      value: {
        type: Array,
        default () {
          return []
        }
      },
      list: {
        type: Array,
        default () {
          return [
            {
            value:0,
            label:'数据0'
          }, {
            value:1,
            label:'数据1'
          }, {
            value:2,
            label:'数据2测试你喀什地方都是老师身上发生发射点发射点'
          }, {
            value:3,
            label:'数据3'
          }, {
            value:4,
            label:'数据4'
          }, {
            value:5,
            label:'数据5'
          }, {
            value:6,
            label:'数据6'
          }, {
            value:7,
            label:'数据7'
          }, {
            value:8,
            label:'数据8'
          }, {
            value:9,
            label:'数据9'
          }, {
            value:10,
            label:'数据10'
          }, {
            value:11,
            label:'数据11'
          }
        ]
        }
      },
      popoverWidth: {
        type: Number,
        default: 570
      },
      checkboxWidth: {
        type: Number,
        default: 150
      },
    },
    computed: {
      q() {
        return "值"
    }
},      

    data () {
      return {
        selectCheckboxGroupValue: this.value,
        checkAll: this.value.length === this.list.length,
        isIndeterminate: this.value.length > 0 && this.value.length < this.list.length,
      }
    },
    watch: {
      selectCheckboxGroupValue: {
        handler: function (n, o) {
          this.$emit('input', n);
        }
      }
    },
    methods: {
      //全选
      handleCheckAllChange (val) {
        if (val) {
          let arr = []
          this.list.forEach(item => {
            arr.push(item.value)
          })
          this.selectCheckboxGroupValue = arr
          // console.log(this.selectCheckboxGroupValue )
        } else {
          this.selectCheckboxGroupValue = []
        }
        this.isIndeterminate = false;
      },
  
      // 一个个选
      handleCheckedChange (value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.list.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.list.length;
        // console.log(value)
      },
    },
  }
  </script>
  <style lang="less" scoped>
  .el-option {
    display: none
  }
  </style>
  
  