<template>
  <template v-if="localData && localData.length > 0">
    <template v-for="(item, index) in localData" :key="index">
      <view style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px">
        <text style="font-weight: bold">{{ item.title }}：</text>
        <view style="display: flex; gap: 5px 10px; align-items: center">
          <template v-for="option in item.options" :key="option.value">
            <el-checkbox :label="option.label" :value="option.value" :disabled="option.disabled" v-model="option.checked" @change="emitChange('option', { itemIndex: index, optionValue: option.value })" border> </el-checkbox>
            <template v-if="option.checked && option.children?.length > 0">
              <template v-for="(child, key) in option.children" :key="key">
                <el-select v-if="child.type === 'select'" v-model="child.value" @change="emitChange('child', { itemIndex: index, optionValue: option.value, childKey: key, value: $event })" style="width: 150px">
                  <el-option v-for="opt in child.options" :key="opt.value" :value="opt.value" :label="opt.label"></el-option>
                </el-select>
                <number-input v-else-if="child.type === 'input'" :placeholder="child.placeholder" v-model="child.value" @change="emitChange('child', { itemIndex: index, optionValue: option.value, childKey: key, value: $event })" style="width: 100px"></number-input>
              </template>
            </template>
          </template>
        </view>
      </view>
    </template>
  </template>
</template>

<script setup>
import { ref, watch, onMounted, defineProps } from "vue";

import NumberInput from "@/components/NumberInput";

const props = defineProps({
  data: {
    type: Array,
    required: true,
    default: () => [],
  },
});

const emit = defineEmits(["update:modelValue", "change"]);

const localData = ref(JSON.parse(JSON.stringify(props.data)));
onMounted(() => {
  console.log("CheckBoxOnly mounted");
});

watch(
  () => props.data,
  (val) => {
    if (val && val.length > 0) {
      localData.value = JSON.parse(JSON.stringify(val));
    }
  },
  { deep: true, immediate: true },
);

const emitChange = (changeType, details) => {
  emit("change", {
    type: changeType,
    ...details,
    data: JSON.parse(JSON.stringify(localData.value)),
  });
};
</script>
<style scoped>
.el-checkbox {
  margin-right: 0;
}
</style>
