<template>
  <div class="row">
    <div
      v-for="(option, optionIdx) in config.options"
      :key="optionIdx"
      class="col-12 fl-mt-xs row"
    >
      <div :class="['title', option.required ? 'label-required' : '']">
        {{ optionIdx + 1 + "." + option.title }}：
      </div>
      <div class="fl-mt-xs col-12">
        <a-checkbox-group
          v-model:value="option.selectValue"
          :disabled="disabled"
          :options="option.options"
          @change="(e) => handleSelect(e, option)"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  reactive,
  watch,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
import { getParamsByObj } from "@/utils/helper/form";
/**
 * 所有值 都放在 state.options options selectValue selectOptions
 */
let props = defineProps({
  config: {
    type: Object,
  },
  fatherData: {
    type: Object,
  },
  defaultVal: {
    type: [String, Array, Number],
  },
  clearVal: {
    type: Object,
  },
  disabled: {
    type: Boolean,
    default: () => false,
  },
});
const state = reactive({
  options: [],
});

watch(
  () => props.defaultVal,
  () => {
    calcDefaultSelectVal();
  }
);
watch(
  () => props.clearVal,
  () => {
    for (let i in props.config.options) {
      let item = props.config.options[i];
      if (item.selectValue.includes(props.clearVal.value)) {
        item.selectValue.splice(
          item.selectValue.indexOf(props.clearVal.value),
          1
        );
        item.selectOptions = [];
        item.options.forEach((opt) => {
          if (item.selectValue.includes(opt.value)) {
            item.selectOptions.push(opt);
          }
        });
        break;
      }
    }
  }
);

onBeforeMount(() => {
  calcOptions();
});
onMounted(() => {});
const handleSelect = (val, optionsConfig) => {
  optionsConfig.selectOptions = [];
  optionsConfig.options.forEach((item) => {
    if (val.includes(item.value)) {
      optionsConfig.selectOptions.push(item);
    }
  });
};
const calcOptions = () => {
  let url = props.config.url;
  let params = getParamsByObj({}, props.config.params, props.fatherData);
  $request.HTTP.components.getDataByParams(url, params, {}).then((res) => {
    if (res.status === 0) {
      props.config.options = [];
      if (props.config.resDataField) {
        let options = res.data[props.config.resDataField];
        options.forEach((opt, idx) => {
          if (Array.isArray(opt.List)) {
            opt.List?.map((item) => {
              item.label = item[props.config.labelField];
              item.value = item[props.config.valueField];
            });
          }
          let obj = {
            title: opt.TagsFirst.CatName,
            selectValue: [],
            selectOptions: [],
            options: opt.List || [],
          };
          props.config.options.push(obj);
        });
      }
      if (props.defaultVal) {
        calcDefaultSelectVal();
      }
    }
    () => {};
  });
};
const calcDefaultSelectVal = () => {
  for (let i in props.config.options) {
    let item = props.config.options[i];
    item.selectValue = [];
    item.selectOptions = [];
    if (item.options && item.options.length > 0) {
      item.options.forEach((opt) => {
        if (props.defaultVal.includes(opt.value)) {
          item.selectValue.push(opt.value);
          item.selectOptions.push(opt);
        }
      });
    }
  }
};
</script>

<style scoped>
.title {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
:deep(.ant-checkbox-inner) {
  border-radius: 50%;
}
</style>
