<template>
  <div>
    <CollapseContainer style="background-color: #eee" :title="`触发器 ${triggerIndex + 1}`">
      <template #action>
        <Tooltip title="移除">
          <Icon
            icon="fluent:delete-off-20-regular"
            size="20"
            class="mr-2 cursor-pointer"
            @click="handleDelete(triggerIndex)"
          />
        </Tooltip>
      </template>
      <BasicForm @register="registerForm" />
    </CollapseContainer>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Icon } from '/@/components/Icon';
  import { Tooltip } from 'ant-design-vue';
  import { useTriggerDrawerSchema } from '../config';
  import { screenLinkPageByDeviceIdGetAttribut } from '/@/api/ruleengine/ruleengineApi';
  export default defineComponent({
    components: { CollapseContainer, BasicForm, Icon, Tooltip },
    props: {
      triggerIndex: {
        type: Number,
        required: true,
      },
    },
    emits: ['deleteTrigger'],
    setup(props, { emit }) {
      const [registerForm, { resetFields, getFieldsValue, updateSchema, setFieldsValue }] = useForm(
        {
          schemas: useTriggerDrawerSchema,
          showActionButtonGroup: false,
        }
      );
      const getFieldsValueFunc = () => getFieldsValue();

      const updateFieldDeviceId = (deviceList: any[]) => {
        updateSchema({
          field: 'entityId',
          componentProps: {
            options: deviceList,
            onChange(e) {
              if (e) {
                updateFieldAttributeFunc(e);
              }
            },
          },
        });
      };
      const updateFieldAttributeFunc = async (e) => {
        const data1 = await screenLinkPageByDeviceIdGetAttribut('DEVICE', e);
        const options = data1.map((m) => {
          return {
            label: m,
            value: m,
          };
        });
        updateSchema({
          field: 'type2',
          componentProps: {
            placeholder: '请选择属性',
            options,
            onChange(value) {
              if (value) {
                updateSchema([
                  {
                    field: 'operation',
                    ifShow: true,
                  },
                  {
                    field: 'value',
                    ifShow: true,
                  },
                ]);
                setFieldsValue({
                  operation: '',
                  value: '',
                });
                return;
              }
              updateSchema([
                {
                  field: 'operation',
                  ifShow: false,
                },
                {
                  field: 'value',
                  ifShow: false,
                },
              ]);
              setFieldsValue({
                operation: '',
                value: '',
              });
            },
          },
        });
      };

      const resetFieldsValueFunc = () => resetFields();
      // 回显数据函数
      const setFieldsFormValueFun = (fieldsValue) => {
        setFieldsValue(fieldsValue);
      };

      const editSelectDevice = () => {
        if (props.bindTriggerEntryIdFather != 1) {
          updateSchema({
            field: 'entityId',
            componentProps: {
              options: props.bindTriggerEntryIdFather,
            },
          });
        }
      };
      // editSelectDevice();

      const handleDelete = (triggerIndex) => {
        emit('deleteTrigger', triggerIndex);
      };
      return {
        updateFieldAttributeFunc,
        updateFieldDeviceId,
        resetFieldsValueFunc,
        editSelectDevice,
        getFieldsValueFunc,
        registerForm,
        handleDelete,

        setFieldsFormValueFun,
      };
    },
  });
</script>

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