<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, reactive, 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: ['bindActionFather', 'bindActionEntryIdFather'],
    setup(props) {
      let fieldValue = reactive({});
      const option = ref<[]>([]);
      const [registerAction, { setFieldsValue, getFieldsValue, resetFields, updateSchema }] =
        useForm({
          labelWidth: 100,
          schemas: useActionDrawerSchema,
          actionColOptions: { span: 24 },
        });
      const getFieldsValueFunc = () => {
        fieldValue = getFieldsValue();
        return fieldValue;
      };
      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.bindActionFather !== 1) {
          setTimeout(() => {
            setFieldsValue(props.bindActionFather);
          }, 10);
        }
      };
      setFieldsFormValueFun();
      const editSelectDevice = () => {
        if (props.bindActionEntryIdFather !== 1) {
          setTimeout(() => {
            updateSchema({
              field: 'deviceId',
              componentProps: {
                options: props.bindActionEntryIdFather,
              },
            });
          }, 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: 1vh;
    left: 5px;
  }
</style>