<template>
  <div :style="{'width':width,'line-height':height}" style="font-size: 0;">
    <!--标签-->
    <al-label
      :label="label"
      :labelWidth="labelWidth"
      :labelOption="labelOption"
      :value="labelActiveIndex"
      @input="labelChange"
      :height="height">{{label}}</al-label>
    <al-form-item :class="{'autoWidth':label}" :prop="prop"
                  :style="{width:label||labelOption.length?'calc( 100% - '+labelWidth+')':'100%','line-height':height}" style="font-size: 0;">
      <span v-if="indeterminate" style="display: inline-block;color: #C0C4CC;margin-right: 10px" class="iconfont iconauro-icon-caret-bottom " :class="'iconTriangle' + iconTriangleIndex" @click="changeIconTriangleIndex"></span>
      <el-checkbox v-if="indeterminate"
                   :indeterminate="isIndeterminate"
                   v-model="checkAll"
                   @change="handleCheckAllChange"
                   :border="border"

                   :style="{'width':border?'':checkboxWidth,'height':height,'line-height':height}"
                  ><span style="font-size: 15px;font-weight: 500;">{{selectAllText}}</span></el-checkbox>
      <!--正常多选-->
      <el-checkbox-group
        v-if="type!='button'"
        size="medium"
        :value="value"
        :min="min"
        :max="max"
        @input="onInput"
        :class="{'indeterminateChildren':indeterminate == true,'indeterminateChildrenUnShow':iconTriangleIndex == 2}"
        :style="{width:'100%',marginLeft:'26px'}"
        @change="handleCheckedOptionsChange"
        :disabled="disabled">
        <div v-for="(item,index) in options" :key="index" :style="{'width':checkboxWidth,'height':height,'line-height':height,'margin-bottom':border?'15px':''}" style="display: inline-block;margin-right: 30px;">
          <el-checkbox :border="border" :ref="'checkbox'" :style="{'width':border?'':checkboxWidth,'height':height,'line-height':height}" :label="item.value" :disabled="item.disabled"><span style="font-weight: 400">{{item.label}}</span></el-checkbox>
        </div>
      </el-checkbox-group>
      <!--按钮多选-->
      <el-checkbox-group
        v-if="type=='button'"
        size="medium"
        :value="value"
        :min="min"
        :max="max"
        @input="onInput"
        :style="{width:'100%'}"
        @change="handleCheckedOptionsChange"
        :disabled="disabled">
          <el-checkbox-button v-for="(item,index) in options" :key="index" :border="border" :label="item.value" :disabled="item.disabled">{{item.label}}</el-checkbox-button>
      </el-checkbox-group>

    </al-form-item>
  </div>
</template>

<script>
    import AlFormItem from '../AlFormItem'

    export default {
        name: "index",
        data() {
            return {
                checkAll:false,
                isIndeterminate:true,
                checkboxWidth:'',
            //    收缩三角形类名
                iconTriangleIndex:1
            }
        },
        props: {
            selectAllText:{
                default:"全选"
            },
            //labelOption 激活值
            labelActiveIndex:{
                type:Number,
                default:0
            },
            //label下拉框的选项
            labelOption: {
                type: Array,
                default() {
                    return []
                }
            },
            min:{
                type:Number,
                default:0
            },
            max:{
                type:Number,
                default:Infinity
            },
            indeterminate:{
                type:Boolean,
                default:false
            },
            type:{
                type:String,
                default:''
            },
            //配置项
            options:{
                type:Array,
                default(){
                    return []
                }
            },
            prop: {
                type: String,
                default: ''
            },
            //输入值
            value: {
                default: ''
            },
            //标签
            label: {
                type: String,
                default: ""
            },
            //宽度
            width: {
                type: String,
                default: '200px'
            },
            //标签宽度
            labelWidth: {
                type: String,
                default: "100px"
            },
            //组件高度
            height: {
                type: String,
                default: '36px'
            },
            //组件禁用
            disabled: {
                type: Boolean,
                default: false
            },
            //边框
            border: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            onInput(newValue) {
                this.$emit("input", newValue)
            },
            handleCheckAllChange(val) {
                if(val){
                    var arr=[]
                    for(var i=0;i<this.options.length;i++){
                        arr.push(this.options[i].value)
                    }
                    this.$emit("input", arr)
                }else{
                    this.$emit("input", [])
                }
                this.isIndeterminate = false;
            },
            handleCheckedOptionsChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.options.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
            },
            labelChange(v){
                this.$emit('labelChange',v)
            },
            changeIconTriangleIndex(){
              console.log(this.iconTriangleIndex)
                if(this.iconTriangleIndex == 1){
                    this.iconTriangleIndex = 2
                }else{
                    this.iconTriangleIndex = 1
                }
            }
        },
        components:{
            AlFormItem
        },
        computed:{
            refList(){
                return this.$refs
            }
        },
        watch:{
            options:{
                deep:true,
                handler(){
                    if(this.indeterminate) {
                        this.handleCheckedOptionsChange(this.value)
                    }
                }
            },
            value:{
                deep:true,
                handler(){
                    if(this.indeterminate) {
                        this.handleCheckedOptionsChange(this.value)
                    }
                }
            },
            refList:{
                immediate:true,
                deep:true,
                handler(){
                    var width=0;
                    setTimeout(()=>{
                        for(var i in this.refList['checkbox']){
                            if(this.refList['checkbox'][i].$el.offsetWidth&&this.refList['checkbox'][i].$el.offsetWidth>width){
                                width=this.refList['checkbox'][i].$el.offsetWidth
                            }
                        }
                        if(width){
                            this.checkboxWidth=width+'px'
                        }
                    },0)
                }
            }
        },
        mounted() {
            if(this.indeterminate){
                this.handleCheckedOptionsChange(this.value)
            }
        }
    }
</script>

<style scoped lang="scss">
  /deep/{
    .el-checkbox__input {
      vertical-align: -2px;
    }
  }
  .el-checkbox.is-bordered.el-checkbox--medium{
    padding: 0 20px 0 20px;
  }

  .label {
    display: inline-block;
    font-size: 14px;
    text-align: right;
    padding-right: 12px;
    box-sizing: border-box;
    vertical-align: top;

    /deep/ {
      .el-icon--right {
        margin-left: 2px;
      }
    }
  }
  .indeterminateChildren{

    margin-left: 48px !important;
  }
  .iconTriangle1{
    transform:rotate(180deg);
    transform-origin: center;
    -webkit-animation: rotation 0.2s linear;
  }
  .iconTriangle2{
    transform-origin: center;
    -webkit-animation: rotation2 0.2s linear;
  }
  @-webkit-keyframes rotation {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(180deg);
    }
  }
  @-webkit-keyframes rotation2 {
    from {
      -webkit-transform: rotate(180deg);
    }
    to {
      -webkit-transform: rotate(0deg);
    }
  }
  .indeterminateChildrenUnShow{
    display: none;
  }

</style>
