<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
  })
  console.log(queryParam)
}
function loadOptions(){
  console.log("--loadOptions--")
  let data = sessionStorage.getItem("stm.classify.options")
  if(!!data){
    loadOptionVals.value = JSON.parse(data)
    console.log(loadOptionVals)
  }else{
    console.log("--req--")
    defHttp.get({url: "/base.classify/stClassify/listClassify"}).then(rep=>{
        console.log(rep)
        loadOptionVals.value = rep
        sessionStorage.setItem("stm.classify.options",JSON.stringify(rep))
      });
  }
  initQueryParam()
}
function onCheckChange(group,checkedValue){
  console.log(group)
  console.log(checkedValue)
  console.log(queryParam.value)
  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>