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

  export default defineComponent({
    components: { CollapseContainer, BasicForm, [Input.name]: Input },
    props: ['deviceInfo', 'editTriggerFather', 'newFilterMapFather'],
    setup(props) {
      const fieldValue: any = ref({});
      const option = ref<[]>([]);
      const data = ref<[]>([]);
      const [registerTrigger, { resetFields, setFieldsValue, getFieldsValue, updateSchema }] =
        useForm({
          labelWidth: 100,
          schemas: useTriggerDrawerSchema,
          actionColOptions: { span: 24 },
        });
      const getFieldsValueFunc = () => {
        fieldValue.value = getFieldsValue();
        return fieldValue.value;
      };
      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(() => {
                    updateFieldType2Func(e);
                  }, 10);
                }
              },
            },
          });
        } else if (v.length == undefined) {
          setTimeout(() => {
            updateSchema({
              field: 'entityId',
              componentProps: {
                options: v.item,
                onChange(e) {
                  if (e) {
                    setTimeout(() => {
                      updateFieldType2Func(e);
                    }, 10);
                  }
                },
              },
            });
          }, 10);
        }
      };

      const updateFieldType2Func = async (e) => {
        const data1 = await screenLinkPageByDeviceIdGetAttribut('DEVICE', e);
        data.value = data1.map((m) => {
          return {
            label: m,
            value: m,
          };
        });

        updateSchema({
          field: 'type2',
          componentProps: {
            placeholder: '请选择属性',
            options: data.value,
            onChange(e) {
              if (e) {
                updateSchema([
                  {
                    field: 'operation',
                    ifShow: true,
                  },
                  {
                    field: 'value',
                    ifShow: true,
                  },
                ]);
              } else {
                updateSchema([
                  {
                    field: 'operation',
                    ifShow: false,
                  },
                  {
                    field: 'value',
                    ifShow: false,
                  },
                ]);
              }
            },
          },
        });
      };
      const updateOperatorAndValue = () => {
        updateSchema([
          {
            field: 'operation',
            ifShow: false,
          },
          {
            field: 'value',
            ifShow: false,
          },
        ]);
      };

      const resetFieldsValueFunc = () => {
        resetFields();
      };

      //回显数据
      const setFieldsFormValueFun = () => {
        if (props.editTriggerFather != 1) {
          setTimeout(() => {
            setFieldsValue(props.editTriggerFather);
            setFieldsValue({
              entityId1: props.editTriggerFather.entityId,
              entityId2: props.editTriggerFather.entityId,
              type1: props.editTriggerFather?.triggerCondition?.condition[0]?.key?.type,
              type2: props.editTriggerFather?.triggerCondition?.condition[0]?.key?.key,
              operation:
                props.editTriggerFather?.triggerCondition?.condition[0]?.predicate?.operation,
              value:
                props.editTriggerFather?.triggerCondition?.condition[0]?.predicate?.value
                  ?.defaultValue,
            });
            if (props.editTriggerFather?.triggerCondition?.condition[0]?.key?.key) {
              updateSchema([
                {
                  field: 'operation',
                  ifShow: true,
                },
                {
                  field: 'value',
                  ifShow: true,
                },
              ]);
            }
          }, 1);
        }
      };

      setFieldsFormValueFun();
      //新增清空设备选择
      const clearSelectDevice = () => {
        updateSchema({
          field: 'entityId',
          componentProps: {
            options: [],
          },
        });
      };
      const clearSelectAttribute = () => {
        updateSchema({
          field: 'type2',
          componentProps: {
            options: [],
          },
        });
      };
      const editSelectDevice = () => {
        if (props.newFilterMapFather != 1) {
          setTimeout(() => {
            updateSchema({
              field: 'entityId',
              componentProps: {
                options: props.newFilterMapFather,
              },
            });
          }, 100);
        }
      };
      editSelectDevice();
      //新增清空场景触发器选择
      const clearSelectScene = () => {
        updateSchema({
          field: 'sceneLinkageId',
          componentProps: {
            options: [],
          },
        });
      };
      const editSelectScene = (v) => {
        updateSchema({
          field: 'sceneLinkageId',
          componentProps: {
            options: v,
          },
        });
      };
      return {
        updateOperatorAndValue,
        clearSelectAttribute,
        updateFieldType2Func,
        updateFieldDeviceId,
        resetFieldsValueFunc,
        clearSelectScene,
        editSelectScene,
        clearSelectDevice,
        editSelectDevice,
        getFieldsValueFunc,
        registerTrigger,
      };
    },
  });
</script>

<style>
  .ant-slider-handle {
    display: none !important;
  }
</style>