<template>
  <div class="checkbox-group-base">
    <hive-checkbox
      v-model="allValue" @change="checkAll" :disabled="disabledValue" :indeterminate="indeterminate">
      选择所有
    </hive-checkbox>
    <hive-checkbox
      v-model="disabledValue" @change="changeStatus">
      禁用
    </hive-checkbox>
    <br><br>
    <hive-checkbox-group
      v-model="value"
      :disabled="disabledValue" @change="changeValue">
      <div v-for="(item, index) in valueList" :key="index">
        <hive-checkbox
          :value="item"
        >
          {{ item }}选项
        </hive-checkbox><br><br>
      </div>
    </hive-checkbox-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        allValue: false,
        disabledValue: false,
        indeterminate: false,
        value: [],
        valueList: ['A', 'B', 'C'],
      };
    },
    mounted() {
      if (this.value.length > 0) {
        this.indeterminate = true;
      }
    },
    methods: {
      checkAll(val) {
        this.indeterminate = false;
        if (val) {
          this.value = this.valueList.slice();
          this.allValue = true;
        } else {
          this.value = [];
          this.allValue = false;
        }
      },
      changeStatus(val) {
        this.disabledValue = val;
      },
      changeValue(val) {
        if (this.valueList.length === val.length) {
          this.allValue = true;
        } else {
          this.allValue = false;
        }
        if (!!val.length && this.valueList.length > val.length) {
          this.indeterminate = true;
        } else {
          this.indeterminate = false;
        }
      },
    },
  };
</script>
