<template>
  <CollapseContainer style="background-color: #f2f2f2" :title="`执行条件 ${conditionIndex + 1}`">
    <template #action>
      <div class="flex">
        <div>
          <span class="mr-2">启用规则</span>
          <RadioGroup v-model:value="schedule" :options="scheduleOptions" />
        </div>
        <Tooltip title="移除" class="ml-4">
          <Icon
            icon="fluent:delete-off-20-regular"
            size="20"
            class="mr-2 cursor-pointer"
            @click="handleDelete(conditionIndex)"
          />
        </Tooltip>
      </div>
    </template>
    <BasicForm @register="registerCondition">
      <template #operationType="{ model, field }">
        <Select
          :options="options"
          v-model:value="model[field]"
          @change="operationType = model[field]"
          placeholder="请选择比较类型"
          allowClear
        />
      </template>
    </BasicForm>
    <Card size="small" :bordered="false" style="border: 2px dashed #797979" v-if="operationType">
      <ConditionScreening :childGetFieldsValue="childGetFieldsValue" ref="conditionScreeningRef" />
    </Card>
  </CollapseContainer>
</template>
<script lang="ts" setup>
  import { ref, provide } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Tooltip, Radio, Card, Select } from 'ant-design-vue';

  import { trigger_condition_schema } from '../config';
  import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
  import { Icon } from '/@/components/Icon';
  import ConditionScreening from './ConditionScreening.vue';
  const RadioGroup = Radio.Group;

  defineProps({
    conditionIndex: {
      type: Number,
      required: true,
    },
  });
  const emit = defineEmits(['deleteCondition']);

  const [registerCondition, { getFieldsValue, updateSchema, resetFields, setFieldsValue }] =
    useForm({
      schemas: trigger_condition_schema,
      showActionButtonGroup: false,
    });
  const conditionScreeningRef = ref();
  const getFieldsValueFunc = () => {
    const predicate = conditionScreeningRef?.value?.refItem?.conditionScreeningRefs?.value?.map(
      (item) => {
        return item.getFieldsValue();
      }
    );
    return { ...getFieldsValue(), predicate, schedule: schedule.value };
  };
  const resetFieldsValueFunc = () => resetFields();
  const updateFieldDeviceId = (deviceList: any[]) => {
    updateSchema({
      field: 'entityId',
      componentProps: {
        options: deviceList,
        onChange(e) {
          if (e) {
            updateFieldAttributeFunc();
          }
        },
      },
    });
  };
  const setFieldsFormValueFun = (fieldsValue) => {
    setFieldsValue(fieldsValue);
  };
  const updateFieldAttributeFunc = async () => {
    const data1 = await getAttribute();
    const data = data1.map((m) => ({ label: m, value: m }));
    updateSchema({
      field: 'type',
      componentProps: {
        placeholder: '请选择属性',
        options: data,
      },
    });
  };
  const handleDelete = (conditionIndex) => {
    emit('deleteCondition', conditionIndex);
  };

  const schedule = ref('ANY_TIME');
  const scheduleOptions = [
    { label: '始终启用', value: 'ANY_TIME' },
    { label: '定时启用', value: 'SPECIFIC_TIME' },
    { label: '自定义启用', value: 'CUSTOM' },
  ];
  const operationType = ref<string>('');
  const options = [
    {
      label: '数字',
      value: 'NUMERIC',
    },
    {
      label: '布尔值',
      value: 'BOOLEAN',
    },
    {
      label: '字符串',
      value: 'STRING',
    },
    {
      label: '时间',
      value: 'TIME',
    },
  ];
  provide('operationType', operationType);

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

  defineExpose({
    getFieldsValueFunc,
    updateFieldDeviceId,
    resetFieldsValueFunc,
    setFieldsFormValueFun,
    childGetFieldsValue,
  });
</script>