<template>
  <DynamicForm
    ref="formRef"
    :model="currentForm"
    :options="formOptions"
  >
    <template #insertion="{ data }">
      <FlexCol v-if="data.name === 'insertCheckList'">
        <H3>自查项目选择</H3>
        <FlexCol gap="gap.md">
          <FlexCol v-for="(item, index) in checkItemList" :key="item.id" gap="gap.md">
            <Text fontConfig="subTitleText" :text="`${index + 1}. ${item.name}`" />
            <FlexCol v-if="item.checkType == 2" gap="gap.sm">
              <FlexRow v-for="child in item.children" :key="child.id" justify="space-between">
                <CheckBox
                  :text="`${child.name} (${child.points}分)`"
                  :modelValue="hasCheckedItem(child.id)" 
                  @update:modelValue="setCheckedItem(item as CheckItemInfo, child as CheckItemInfo, $event)" 
                />
                <Stepper 
                  v-if="hasCheckedItem(child.id)"
                  :min="0"
                  :max="20"
                  :step="1"
                  :modelValue="getCheckedItemCount(child.id) ?? 0" 
                  @update:modelValue="setCheckedItem(item as CheckItemInfo, child as CheckItemInfo, $event)" 
                />
                <view v-else></view>
              </FlexRow>
            </FlexCol>
            <FlexCol v-else gap="gap.sm">
              <CheckBox 
                v-for="child in item.children" :key="child.id"
                :text="`${child.name} (${child.points}分)`"
                :modelValue="hasCheckedItem(child.id)" 
                @update:modelValue="setCheckedItem(item as CheckItemInfo, child as CheckItemInfo, $event)" 
              />
            </FlexCol>
          </FlexCol>
        </FlexCol>
      </FlexCol>
      <slot v-else name="formCeil" :data="data" />
    </template>
  </DynamicForm>
</template>

<script setup lang="ts">
import DynamicForm from '@/components/dynamic/DynamicForm.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import H3 from '@/components/typography/H3.vue';
import Text from '@/components/basic/Text.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import CheckBox from '@/components/form/CheckBox.vue';
import Stepper from '@/components/form/Stepper.vue';
import { SelfAssessmentCheckItemAnswer, type CheckItemInfo, type SelfAssessmentDetail } from '@/api/collect/AssessmentContent';
import type { IDynamicFormOptions } from '@/components/dynamic';
import { ArrayUtils } from '@imengyu/imengyu-utils';

const props = defineProps<{   
  currentForm: SelfAssessmentDetail;
  formOptions: IDynamicFormOptions;
  checkItemList: CheckItemInfo[];
  currentFormCheckItems: SelfAssessmentCheckItemAnswer[];
}>();

function hasCheckedItem(id: number) {
  return props.currentFormCheckItems.some(item => item.id === id);
}
function getCheckedItemCount(id: number) {
  console.log('getCheckedItemCount', id);
  return props.currentFormCheckItems.find(item => item.id === id)?.count;
}
function setCheckedItem(checkItem: CheckItemInfo, childItem: CheckItemInfo, count: number|boolean) {
  if (!props.currentForm)
    return;
  if (typeof count === 'boolean') {
    count = count ? 1 : 0;
  }
  console.log('setCheckedItem', childItem.id, count);
  let item = props.currentFormCheckItems.find(item => item.id === childItem.id);
  if (!item) {
    item = new SelfAssessmentCheckItemAnswer();
    props.currentFormCheckItems.push(item);
  }
  if (item.count === count)
    return;
  item.id = childItem.id;
  item.points = childItem.points;
  item.count = count;
  switch (checkItem.checkType) {
    case 1: {
      /** 单选,清除其他选项 */
      const allChildren = checkItem.children.map(child => child.id);
      props.currentFormCheckItems.forEach(item => {
        if (allChildren.includes(item.id) && item.id !== childItem.id)
          item.count = 0;
      });
      break;
    }
  }
  if (item.count === 0)
    ArrayUtils.remove(props.currentFormCheckItems, item);
}
</script>