<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, watch } 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 { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';

  export default defineComponent({
    components: { CollapseContainer, BasicForm, [Input.name]: Input },
    props: ['deviceInfo', 'editTriggerFather', 'newFilterMapFather'],
    setup(props) {
      const fieldValue: any = ref({});
      const [registerTrigger, { setFieldsValue, getFieldsValue, updateSchema }] = useForm({
        labelWidth: 100,
        schemas: useTriggerDrawerSchema,
        actionColOptions: { span: 24 },
      });
      const getFieldsValueFunc = () => {
        fieldValue.value = getFieldsValue();
        return fieldValue.value;
      };
      watch(
        () => props.deviceInfo,
        async (newV) => {
          const options = await screenLinkPageByDeptIdGetDevice({ organizationId: newV });
          options.items.forEach((v) => {
            return (v.value = v.id), (v.label = v.name);
          });
          updateSchema({
            field: 'deviceId',
            componentProps: {
              options: options.items,
            },
          });
        }
      );

      //回显数据
      const setFieldsFormValueFun = () => {
        setTimeout(() => {
          setFieldsValue(props.editTriggerFather);
        }, 100);
      };
      setFieldsFormValueFun();
      //新增清空设备选择
      const clearSelectDevice = () => {
        updateSchema({
          field: 'deviceId',
          componentProps: {
            options: [],
          },
        });
      };
      const editSelectDevice = () => {
        setTimeout(() => {
          updateSchema({
            field: 'deviceId',
            componentProps: {
              options: props.newFilterMapFather,
            },
          });
        }, 100);
      };
      editSelectDevice();
      //新增清空场景触发器选择
      const clearSelectScene = () => {
        updateSchema({
          field: 'sceneLinkageId',
          componentProps: {
            options: [],
          },
        });
      };
      const editSelectScene = (v) => {
        updateSchema({
          field: 'sceneLinkageId',
          componentProps: {
            options: v,
          },
        });
      };
      return {
        clearSelectScene,
        editSelectScene,
        clearSelectDevice,
        editSelectDevice,
        getFieldsValueFunc,
        registerTrigger,
      };
    },
  });
</script>

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