<template>
  <div>
    <CollapseContainer style="background-color: #f2f2f2" :title="`${title} ${index + 1}`">
      <template #action>
        <div class="flex">
          <div>
            <span class="mr-2">启用规则</span>
            <RadioGroup
              v-model:value="schedule"
              :options="scheduleOptions"
              @change="handleRadioGroupChange"
            />
          </div>
          <Tooltip title="移除" class="ml-4">
            <Icon
              icon="fluent:delete-off-20-regular"
              size="20"
              class="mr-2 cursor-pointer"
              @click="handleDelete({ index, title })"
            />
          </Tooltip>
        </div>
      </template>
      <BasicForm @register="registerForm">
        <template #operationType="{ model, field }">
          <Select
            :options="options"
            v-model:value="model[field]"
            @change="operationType = model[field]"
            placeholder="请选择比较类型"
            allowClear
          />
        </template>
        <template #time="{ model, field }">
          <Input v-model:value="model[field]" placeholder="请输入持续时间">
            <template #addonAfter>
              <Select
                v-model:value="model[`timeUnit`]"
                :options="timeUnitOptions"
                style="width: 60px"
              />
            </template>
          </Input>
        </template>
      </BasicForm>
      <Card size="small" :bordered="false" style="border: 2px dashed #d9d9d9" v-if="operationType">
        <ConditionScreening
          :childGetFieldsValue="childGetFieldsValue"
          ref="conditionScreeningRef"
        />
      </Card>
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
  import { ref, provide, nextTick } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Icon } from '/@/components/Icon';
  import { Tooltip, Radio, Card, Select, Input } from 'ant-design-vue';
  import { trigger_condition_schema } from '../config/config.data.ts';
  import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
  import ConditionScreening from './ConditionScreening.vue';
  import { scheduleOptions, timeUnitOptions, options } from '../config/formatData.ts';
  const RadioGroup = Radio.Group;

  defineProps({
    title: {
      type: String,
      required: true,
    },
    index: {
      type: Number,
      required: true,
    },
  });
  const emit = defineEmits(['delete']);
  const conditionScreeningRef = ref();
  const [registerForm, { resetFields, getFieldsValue, updateSchema, setFieldsValue }] = useForm({
    schemas: trigger_condition_schema,
    showActionButtonGroup: false,
  });

  const getFieldsValueFunc = () => {
    const predicate = conditionScreeningRef?.value?.refItem?.conditionScreeningRefs?.value?.map(
      (item) => {
        return item.getFieldsValue();
      }
    );
    return { ...getFieldsValue(), predicate, schedule: schedule.value };
  };
  const updateFieldDeviceId = (deviceList: any[]) => {
    updateSchema({
      field: 'entityId',
      componentProps: {
        options: deviceList,
        onChange(e) {
          if (e) {
            updateFieldAttributeFunc();
          }
        },
      },
    });
  };
  const resetFieldsValueFunc = () => resetFields();
  // 回显数据函数
  const setFieldsFormValueFun = (fieldsValue) => {
    setFieldsValue(fieldsValue);
  };
  const updateFieldAttributeFunc = async () => {
    const data1 = await getAttribute();
    const options = data1.map((m) => {
      return {
        label: m,
        value: m,
      };
    });
    updateSchema({
      field: 'type2',
      componentProps: {
        placeholder: '请选择属性',
        options,
      },
    });
  };

  const handleDelete = (params: { index: number; title: string }) => {
    emit('delete', params);
  };

  const schedule = ref('ANY_TIME');
  const operationType = ref<string>('');
  provide('operationType', operationType);

  // 子组件获取父组件的值
  const childGetFieldsValue = () => getFieldsValue();

  // 获取conditionScreeningForm的组件
  const getRefItemConditionScreeningRefs = async () => {
    await nextTick();
    return conditionScreeningRef.value.refItem.conditionScreeningRefs;
  };

  const setConditionScreeningList = (list) => {
    conditionScreeningRef.value.conditionScreeningList = list;
  };
  const setRichText = (list) => {
    conditionScreeningRef.value.otherAttribute = list;
  };

  const handleRadioGroupChange = (e) => {
    const { value } = e.target;
    if (value === 'SPECIFIC_TIME') {
      console.log('定时启用');
      // 定时启用
    } else if (value === 'CUSTOM') {
      console.log('自定义启用');
      // 自定义启用
    }
  };
  defineExpose({
    getFieldsValueFunc,
    updateFieldDeviceId,
    resetFieldsValueFunc,
    setFieldsFormValueFun,
    childGetFieldsValue,
    operationType,
    getRefItemConditionScreeningRefs,
    setConditionScreeningList,
    setRichText,
  });
</script>