
<template>
  <!-- 商品规格 规格值筛选 -->
  <div class="good-spes">
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>

    <div class="box-group">
      <el-checkbox-group v-model="checkedSpes" @change="handleCheckedSpesChange">
        <el-checkbox v-for="spe in spes" :label="spe" :key="spe.id">
          {{ spe.name }}
        </el-checkbox>
      </el-checkbox-group>
    </div>

  </div>
</template>

<script>
// 商品规格
export default {
  name: 'good-spes',

  props: {
    listSpes: {
      type: Array,
      default() {
        return [];
      }
    }
  },

  data() {
    return {
      checkAll: false,
      checkedSpes: [],
      spes: [
        { name: '规格一', id: '010' },
        { name: '规格二', id: '011' },
        { name: '规格三', id: '012' },
        { name: '规格四', id: '013' }
      ],
      isIndeterminate: false
    };
  },

  methods: {
    handleCheckAllChange(val) {
      this.checkedSpes = val ? this.spes : [];
      this.isIndeterminate = false;
    },
    handleCheckedSpesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.spes.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.spes.length;
    }
  }
};
</script>

<style lang="less" scoped>
.good-spes .box-group {
  margin-top: 10px;
}
</style>

