<template>
  <div v-for="(item, index) in list" :key="index">
    <h4 class="title">
      {{ item.label }}
    </h4>
    <div v-if="item.children" class="flex gap-10">
      <el-checkbox-group v-model="model[index]">
        <el-checkbox
          v-for="(child, childIndex) in item.children"
          :key="childIndex"
          :value="child.id"
          :label="child.label"
          :style="returnStyle(child)"
        ></el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});

const model = defineModel({ type: Array, default: () => [] });

const importantPer = ["允许收款", "允许打折", "允许修改会员余额", "允许沽清"];
function returnStyle(child) {
  if (importantPer.includes(child.label)) {
    return "color:red";
  }
}
for (const item in props.list) {
  console.log(item);
  model[item] = [];
}
function getFormData() {
  return formData;
}
defineExpose({
  getFormData,
});
</script>

<style scoped >
.title {
  text-align: left;
}
</style>