<template>
  <div>
    <CollapseContainer style="background-color: #eeeeee">
      <div>
        <BasicForm
          :labelWidth="100"
          :showResetButton="false"
          :showSubmitButton="false"
          :emptySpan="10"
          @register="registerForm"
        />
      </div>
    </CollapseContainer>
  </div>
</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 { useTriggerDrawerSchema } from '../config';
  import { screenLinkPageByDeviceIdGetAttribut } from '/@/api/ruleengine/ruleengineApi';

  export default defineComponent({
    components: { CollapseContainer, BasicForm, [Input.name]: Input },
    props: ['bindTriggerFather', 'bindTriggerEntryIdFather'],
    setup(props) {
      let fieldValue = reactive({});
      const option = ref<[]>([]);
      const data = ref<[]>([]);
      const [registerForm, { setFieldsValue, resetFields, getFieldsValue, updateSchema }] = useForm(
        {
          labelWidth: 100,
          schemas: useTriggerDrawerSchema,
          actionColOptions: { span: 24 },
        }
      );
      const getFieldsValueFunc = () => {
        fieldValue = getFieldsValue();
        return fieldValue;
      };
      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);
        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.bindTriggerFather != 1) {
          setTimeout(() => {
            setFieldsValue(props.bindTriggerFather);
            setFieldsValue({
              entityId1: props.bindTriggerFather.entityId,
              entityId2: props.bindTriggerFather.entityId,
              type1: props.bindTriggerFather?.triggerCondition?.condition[0]?.key?.type,
              type2: props.bindTriggerFather?.triggerCondition?.condition[0]?.key?.key,
              operation:
                props.bindTriggerFather?.triggerCondition?.condition[0]?.predicate?.operation,
              value:
                props.bindTriggerFather?.triggerCondition?.condition[0]?.predicate?.value
                  ?.defaultValue,
            });
            if (props.bindTriggerFather?.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.bindTriggerEntryIdFather != 1) {
          setTimeout(() => {
            updateSchema({
              field: 'entityId',
              componentProps: {
                options: props.bindTriggerEntryIdFather,
              },
            });
          }, 100);
        }
      };
      editSelectDevice();
      return {
        updateOperatorAndValue,
        clearSelectAttribute,
        updateFieldAttributeFunc,
        updateFieldDeviceId,
        resetFieldsValueFunc,
        clearSelectDevice,
        editSelectDevice,
        getFieldsValueFunc,
        registerForm,
      };
    },
  });
</script>

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