<template>
  <CollapseContainer class="prefixRedDot" style="background-color: #eeeeee">
    <div style="position: relative">
      <BasicForm
        :labelWidth="100"
        :showResetButton="false"
        :showSubmitButton="false"
        :emptySpan="10"
        @register="registerAction"
      />
    </div>
  </CollapseContainer>
</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 { useActionDrawerSchema } from '../config';

  export default defineComponent({
    components: { CollapseContainer, BasicForm, [Input.name]: Input },
    props: ['deviceInfo2', 'editActionFather', 'newActionMapFather'],

    setup(props) {
      const fieldValue: any = ref({});
      const option = ref<[]>([]);
      const [registerAction, { setFieldsValue, getFieldsValue, resetFields, updateSchema }] =
        useForm({
          labelWidth: 100,
          schemas: useActionDrawerSchema,
          actionColOptions: { span: 24 },
        });
      const getFieldsValueFunc = () => {
        fieldValue.value = getFieldsValue();
        return fieldValue.value;
      };
      const resetFieldsValueFunc = () => {
        resetFields();
      };
      const updateFieldDeviceId = (v) => {
        if (v.length == 0 || v.length > 0) {
          option.value = v;
          updateSchema({
            field: 'deviceId',
            componentProps: {
              options: option.value,
            },
          });
        } else if (v.length == undefined) {
          setTimeout(() => {
            updateSchema({
              field: 'deviceId',
              componentProps: {
                options: v.item,
              },
            });
          }, 10);
        }
      };

      //回显数据
      const setFieldsFormValueFun = () => {
        if (props.editActionFather !== 1) {
          setTimeout(() => {
            setFieldsValue(props.editActionFather);
          }, 10);
        }
      };
      setFieldsFormValueFun();
      const editSelectDevice = () => {
        if (props.newActionMapFather !== 1) {
          setTimeout(() => {
            updateSchema({
              field: 'deviceId',
              componentProps: {
                options: props.newActionMapFather,
              },
            });
          }, 10);
        }
      };
      editSelectDevice();
      //新增清空设备选择
      const clearSelectDevice = () => {
        updateSchema({
          field: 'deviceId',
          componentProps: {
            options: [],
          },
        });
      };
      return {
        updateFieldDeviceId,
        clearSelectDevice,
        editSelectDevice,
        resetFieldsValueFunc,
        getFieldsValueFunc,
        registerAction,
      };
    },
  });
</script>

<style lang="less">
  .prefixRedDot:before {
    content: '* ';
    color: red;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: 20px;
    left: 5px;
  }
</style>