<template>
  <CollapseContainer style="background-color: #eeeeee">
    <div style="position: relative">
      <BasicForm
        :labelWidth="100"
        :emptySpan="10"
        :showResetButton="false"
        :showSubmitButton="false"
        @register="registerCondition"
      />
    </div>
  </CollapseContainer>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Input } from 'ant-design-vue';
  import { useConditionDrawerSchema } from '../config';
  import { screenLinkPageByDeviceIdGetAttribut } from '/@/api/ruleengine/ruleengineApi';

  export default defineComponent({
    components: { CollapseContainer, BasicForm, [Input.name]: Input },
    props: ['bindConditionFather', 'bindConditionEntryIdFather'],
    setup(props) {
      let fieldValue = reactive({});
      const option = ref<[]>([]);
      const [registerCondition, { setFieldsValue, getFieldsValue, updateSchema, resetFields }] =
        useForm({
          labelWidth: 100,
          schemas: useConditionDrawerSchema,
          actionColOptions: { span: 24 },
        });
      const getFieldsValueFunc = () => {
        fieldValue = getFieldsValue();
        return fieldValue;
      };
      const resetFieldsValueFunc = () => {
        resetFields();
      };
      const updateFieldDeviceId = (v) => {
        if (v.length == 0 || v.length > 0) {
          option.value = v;
          updateSchema({
            field: 'entityId',
            componentProps: {
              options: option.value,
              onChange(e) {
                if (e) {
                  setTimeout(() => {
                    updateFieldAttributeFunc(e);
                  }, 10);
                }
              },
            },
          });
        } else if (v.length == undefined) {
          setTimeout(() => {
            updateSchema({
              field: 'entityId',
              componentProps: {
                options: v.item,
                onChange(e) {
                  if (e) {
                    setTimeout(() => {
                      updateFieldAttributeFunc(e);
                    }, 10);
                  }
                },
              },
            });
          }, 10);
        }
      };
      const updateFieldAttributeFunc = async (e) => {
        const data1 = await screenLinkPageByDeviceIdGetAttribut('DEVICE', e);
        const data = data1.map((m) => {
          return {
            label: m,
            value: m,
          };
        });
        setTimeout(() => {
          updateSchema({
            field: 'type',
            componentProps() {
              return {
                placeholder: '请选择属性',
                options: data,
                onChange(e) {
                  if (e) {
                    updateSchema([
                      {
                        field: 'operation',
                        ifShow: true,
                      },
                      {
                        field: 'value',
                        ifShow: true,
                      },
                    ]);
                  } else {
                    updateSchema([
                      {
                        field: 'operation',
                        ifShow: false,
                      },
                      {
                        field: 'value',
                        ifShow: false,
                      },
                    ]);
                  }
                },
              };
            },
          });
        }, 10);
      };
      const clearSelectAttribute = () => {
        updateSchema({
          field: 'type',
          componentProps: {
            options: [],
          },
        });
      };
      //回显数据
      const setFieldsFormValueFun = () => {
        if (props.bindConditionFather !== 1) {
          setTimeout(() => {
            setFieldsValue(props.bindConditionFather);
            setFieldsValue({
              type:
                props.bindConditionFather?.triggerCondition?.condition[0]?.valueType == 'NUMERIC'
                  ? 'NUMERIC1'
                  : 'NUMERIC2',
              operation1:
                props.bindConditionFather?.triggerCondition?.condition[0]?.predicate?.operation,
              operation2:
                props.bindConditionFather?.triggerCondition?.condition[0]?.predicate?.operation,
              value1:
                props.bindConditionFather?.triggerCondition?.condition[0]?.predicate?.value
                  ?.defaultValue,
              value2:
                props.bindConditionFather?.triggerCondition?.condition[0]?.predicate?.value
                  ?.defaultValue,
            });
          }, 100);
        }
      };
      setFieldsFormValueFun();
      const editSelectDevice = () => {
        if (props.bindConditionEntryIdFather !== 1) {
          setTimeout(() => {
            updateSchema({
              field: 'entityId',
              componentProps: {
                options: props.bindConditionEntryIdFather,
              },
            });
          }, 100);
        }
      };
      editSelectDevice();
      //新增清空设备选择
      const clearSelectDevice = () => {
        updateSchema({
          field: 'entityId',
          componentProps: {
            options: [],
          },
        });
      };

      return {
        updateFieldDeviceId,
        clearSelectDevice,
        editSelectDevice,
        getFieldsValueFunc,
        registerCondition,
        resetFieldsValueFunc,
        clearSelectAttribute,
      };
    },
  });
</script>