<template>
  <div>
    <a-row :gutter="24" v-for="(item, i) in loadOptionVals">
      <a-col :lg="6">
        <a-form-item :label="item.label">
          <a-checkbox-group
            style="width: 800px"
            v-model:value="queryParam[item.value]"
            :options="item.options"
            @change="
              (checkedValue) => {
                onCheckChange(item.value, checkedValue);
              }
            "
          />
        </a-form-item>
      </a-col>
    </a-row>
  </div>
</template>
<script setup>
  import { onMounted, ref } from 'vue';
  import { defHttp } from '/@/utils/http/axios';

  const queryParam = ref({});
  const loadOptionVals = ref([]);
  const queryCheckInfo = ref({});
  onMounted(() => {
    loadOptions();
  });
  function initQueryParam() {
    loadOptionVals.value.forEach((item) => {
      queryParam.value[item.value] = ['all'];
      queryCheckInfo.value[item.value] = true;
    });
  }
  function loadOptions() {
    let data = sessionStorage.getItem('stm.classify.options');
    if (!!data) {
      loadOptionVals.value = JSON.parse(data);
    } else {
      defHttp.get({ url: '/base.classify/stClassify/listClassify' }).then((rep) => {
        loadOptionVals.value = rep;
        sessionStorage.setItem('stm.classify.options', JSON.stringify(rep));
      });
    }
    initQueryParam();
  }
  function onCheckChange(group, checkedValue) {
    if (checkedValue && checkedValue.length > 0) {
      if (checkedValue[0] != 'all' && queryCheckInfo.value[group]) {
        queryCheckInfo.value[group] = false;
      } else if (checkedValue[0] == 'all' && queryCheckInfo.value[group]) {
        queryParam.value[group] = queryParam.value[group].slice(1);
        queryCheckInfo.value[group] = false;
      } else if (checkedValue[0] == 'all' && !queryCheckInfo.value[group]) {
        queryParam.value[group] = queryParam.value[group].slice(0, 1);
        queryCheckInfo.value[group] = true;
      }
    } else {
      queryCheckInfo.value[group] = false;
    }
  }
  function getCheckValue() {
    let checkVal = [];
    let checkFlag = true;
    for (let key in queryParam.value) {
      for (let i in queryParam.value[key]) {
        if (queryParam.value[key][i] == 'all') {
          loadOptionVals.value.forEach((item) => {
            if (item.value == key) {
              item.options.forEach((item) => {
                if (item.value != 'all') {
                  checkVal.push(item.value);
                }
              });
            }
          });
        } else {
          checkVal.push(queryParam.value[key][i]);
        }
        checkFlag = false;
      }
    }
    if (checkFlag) {
      return ['noChecked'];
    }
    return checkVal;
  }
  defineExpose({ getCheckValue, initQueryParam });
</script>
