<template>
      <div style="height: 36px;padding-top: 10px;box-sizing: border-box">
        <el-popover
          placement="top-end"
          title=""
          width="220"
          trigger="click"
          height="100"
          popper-class="customTablePopover"
          >
          <template >
            <div style="max-height: 375px;overflow: auto;padding: 12px 0;">
<!--              <div v-for="(item,index) in options" :key="index">-->
<!--                <al-switch-->
<!--                  v-model="item.value"-->
<!--                  :label="item.label"-->
<!--                  :labelWidth="item.labelWidth"-->
<!--                  :width="'100%'"-->
<!--                  :height="item.height"-->
<!--                  :activeText="item.activeText"-->
<!--                  :inactiveText="item.inactiveText"-->
<!--                  :disabled="item.disabled"-->
<!--                  @change="switchChange(item)"-->
<!--                >-->
<!--                </al-switch>-->
<!--              </div>-->
              <al-checkbox :value="value" @input="onInput" :min="3" width="134px" :options="options" style="margin-left: 24px;overflow: hidden;"></al-checkbox>
            </div>
            <div style="height: 60px;position: relative;border-top: 1px solid #EBEEF5;">
              <al-button style="position: absolute;right: 24px;bottom: 12px;" @click="reset">重置</al-button>
            </div>

          </template>
          <span  class="iconfont icon-auro-control cursorPointer" slot="reference"></span>
        </el-popover>
      </div>
</template>

<script>
    export default {
        name: "AlColumsGroup",
        props:{
            options:{
                type:Array,
                default:function () {
                    return []
                }
            },
            value:{
                type:Array,
                default:function () {
                    return []
                }
            },
        },
        data(){
            return{
                data:[]
            }
        },
        methods:{
            reset(){
                this.$emit("reset");
            },
            onInput(v){
                this.$emit("input",v);
                if(v.length < 4){
                    this.$message({
                        type: 'error',
                        message: '至少保留3个展示的表格字段'
                    })
                }
            },
            switchChange(item){
                var arr = [];
                for(var i = 0; i<this.options.length;i++){
                    if(this.options[i].value == false){
                        arr.push(this.options[i].prop)
                    }
                }
                if(this.options.length - arr.length < 3 ){
                    for(var i = 0; i<this.options.length;i++){
                        if(this.options[i].label == item.label){
                           this.options[i].value = true
                        }
                    }

                    this.$message({
                        type: 'error',
                        message: '至少要选择3个展示内容'
                    })
                }else{
                    this.$emit("input", arr)
                }

            }
        }
    }
</script>
<style lang="scss">
  .customTablePopover{
    padding: 0;
    .popper__arrow{
      right: 8px;
      left: auto!important;
    }
  }
</style>
<style scoped>
  .cursorPointer{
    cursor: pointer;
    display: block;
  }
  .iconfont{
    font-size: 20px;
  }
</style>
