<template>
  <div class="check-nav">
    <Checkbox v-model:checked="state.checkAll" :indeterminate="state.indeterminate" class="check-nav__checkall" @change="onCheckAllChange">
      全选
    </Checkbox>
    <CheckboxGroup v-model:value="state.checkedList" @change="onChangeGroup">
      <Checkbox v-for="item in options" :key="item.value" :value="item.value">
        {{ item.label }}
      </Checkbox>
    </CheckboxGroup>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  import { Checkbox, CheckboxGroup } from 'ant-design-vue';
  

  const props = defineProps<{
    /** 初始状态过滤器 */
    filters: string[];
    options: any[];
  }>();

  const state = reactive({
    indeterminate: true,
    checkAll: false,
    checkedList: props.filters,
  });

  const $emit = defineEmits(['checkBoxChange']);

  const onCheckAllChange = (e: any) => {
    Object.assign(state, {
      checkedList: e.target.checked ? props.options.map((v) => v.value) : [],
      indeterminate: false,
    });
    $emit('checkBoxChange', state);
  };
  const onChangeGroup = (val) => {
    state.checkedList = val;
    $emit('checkBoxChange', state);
  };

  // onChangeGroup(props.filters.length ? props.filters : props.options.map((e) => e.value));
</script>

<style lang="less" scoped>
  .check-nav {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;

    .check-nav__checkall {
      width: 80px;
    }

    .ant-checkbox-group {
      width: calc(100% - 80px);
      display: flex;
      justify-content: space-between;
    }
  }

  :deep(.ant-checkbox .ant-checkbox-inner) {
    background-color: transparent;
    border: 1px solid @white;
  }

  :deep(.ant-checkbox-checked .ant-checkbox-inner) {
    background-color: @primary-color;
    border-color: @primary-color;
  }
</style>
