<template>
  <el-checkbox
    v-if="isCheckAll"
    v-model="checkAll"
    :indeterminate="isIndeterminate"
    @change="handleCheckAllChange"
  >
    {{ checkAllLabel }}
  </el-checkbox>
  <el-checkbox-group v-model="checked">
    <el-checkbox
      v-for="(option, index) in options"
      :key="index"
      :label="option?.['value']"
    >
      {{ option?.['label'] }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const checked = ref<any>([]);
const props = defineProps({
  options: {
    type: Array,
    default: () => []
  },
  checkAllLabel: {
    type: String,
    default: () => '全选'
  },
  // 是否有全选反选选项
  isCheckAll: {
    type: Boolean,
    default: () => false
  }
});
const isIndeterminate = ref(false);
const checkAll = ref<any>(false);

function getAllValue() {
  const all = <any>[];
  props.options.forEach((item: any) => all.push(item.value));
  return all;
}

// 全选/全不选
function handleCheckAllChange(bol: any): void {
  checked.value = bol ? getAllValue() : [];
  isIndeterminate.value = false;
}
</script>

<style scoped lang="scss"></style>