<template>
  <div>
    <a-checkbox v-model:checked="state.checkAll" @change="handleCheckAllChange">
      全部
    </a-checkbox>

    <div v-for="(department, field) in state.pageData" :key="department">
      <a-checkbox
        v-model:checked="department.selectAll"
        @change="(e) => handleCheckItemAllChange(e, department)"
      >
        {{ field }}
      </a-checkbox>
      <down-outlined v-if="!department.show" @click="department.show = true" />

      <up-outlined v-if="department.show" @click="department.show = false" />
      <div class="fl-ml-md">
        <a-checkbox-group
          v-if="department.show"
          v-model:value="department.selectVal"
          @change="(e) => handleCheckItemChange(e, department)"
        >
          <a-row v-for="(opt, optIdx) in department.options" :key="optIdx">
            <a-col :span="24">
              <a-checkbox :value="opt.value">{{ opt.label }}</a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  reactive,
  onBeforeMount,
  onMounted,
  computed,
  getCurrentInstance,
} from "vue";
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";
let props = defineProps({
  val: {
    type: String,
  },
});
const state = reactive({
  checkAll: false,
  pageData: {},
  selectData: {},
});

const emit = defineEmits(["triggerUpdateVal"]);
onBeforeMount(() => {});
onMounted(() => {
  setTimeout(() => {
    state.pageData = {
      one: {
        show: true,
        selectVal: [],
        selectAll: false,
        options: [
          { label: "11", value: "11" },
          { label: "22", value: "22" },
        ],
      },
      two: {
        show: true,
        selectVal: [],
        selectAll: false,
        options: [
          { label: "11", value: "11" },
          { label: "22", value: "22" },
        ],
      },
    };
  }, 1000);
});

const handleCheckAllChange = (e) => {
  // 全部人员
  if (e.target.checked) {
    for (let field in state.pageData) {
      let item = state.pageData[field];
      item.selectAll = true;
      item.selectVal = item.options.map((it) => it.value);
    }
  } else {
    for (let field in state.pageData) {
      let item = state.pageData[field];
      item.selectAll = false;
      item.selectVal = [];
    }
  }
  calcSelectVal();
};
const handleCheckItemAllChange = (e, department) => {
  // 部门全选
  if (e.target.checked) {
    department.selectVal = department.options.map((opt) => opt.value);
  } else {
    department.selectVal = [];
  }
  calcSelectVal();
};
const handleCheckItemChange = (e, department) => {
  // 选择成员
  if (e.length === department.options.length) {
    department.selectAll = true;
  } else {
    department.selectAll = false;
  }
  calcSelectVal();
};

const calcSelectVal = () => {
  let arr = [];
  for (let field in state.pageData) {
    let item = state.pageData[field];
    if (item.selectVal.length > 0) {
      arr = [...arr, ...item.selectVal];
    }
  }
  emit("triggerUpdateVal", arr);
};
</script>
<style scoped>
:deep(.ant-checkbox-inner) {
  border-radius: 50%;
}
</style>
