<template>
  <el-checkbox-group v-model="modelValue">
    <el-checkbox v-if="allText" class="no-cicrle" label="全部" @change="handleAll">全部</el-checkbox>
    <el-checkbox v-for="(item, index) in list" :key="index" class="no-cicrle" :label="item[name]" @change="handleChange">
      {{ item[label] }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    allText: {
      // 是否展示 "全部"，有字则展示
      type: String,
      default: ''
    },
    showBottomLine: {
      // 是否展示底部下划线，类似tab标签页
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => []
    },
    label: {
      // key
      type: String,
      default: 'label'
    },
    name: {
      // value
      type: String,
      default: 'value'
    }
  },
  data() {
    return {
      modelValue: undefined
    };
  },
  watch: {
    value: {
      handler(val) {
        if (this.allText) {
          this.modelValue = val.length > 0 ? val : ['全部'];
        } else {
          this.modelValue = val.filter((item) => item !== '全部');
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleAll() {
      this.modelValue = ['全部'];
      this.$emit('input', []);
    },
    handleChange() {
      if (this.modelValue.some((item) => item === '全部')) {
        this.modelValue.shift();
      } else if (this.modelValue.length == 0) {
        this.modelValue = ['全部'];
      }
      this.$emit('input', this.modelValue.every((item) => item === '全部') ? [] : this.modelValue);
    }
  }
};
</script>

<style lang="scss" scoped>
.no-cicrle {
  ::v-deep .el-checkbox__input,
  .el-checkbox__input {
    display: none;
  }
  ::v-deep .el-checkbox__label {
    padding-left: 0;
    color: rgba($color: #000000, $alpha: 0.6);
  }
}
.no-cicrle.is-checked ::v-deep .el-checkbox__label {
  color: #0075ff;
  font-weight: bold;
}
</style>
