<template>
  <div style="display: flex; flex-direction: row; width: 30vw">
    <div style="width: 9vw">
      <BasicForm
        :showResetButton="false"
        :showSubmitButton="false"
        @register="registerRightSelect"
      />
    </div>
    <div style="width: 20vw">
      <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerRightInput"
    /></div>
    <div style="width: 1vw; margin-left: -0.8vw">
      <span @click="handleDelScopeAndKeyAndVal" style="color: red; cursor: pointer">X</span>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { snmpRightSelectSchemas, snmpRightInputSchemas } from '../index';

  export default defineComponent({
    components: {
      BasicForm,
    },

    emits: ['next', 'prev', 'register', 'clear'],
    setup(_, { emit }) {
      const [registerRightSelect] = useForm({
        labelWidth: 80,
        schemas: snmpRightSelectSchemas,
        actionColOptions: {
          span: 14,
        },
      });
      const [registerRightInput] = useForm({
        labelWidth: 80,
        schemas: snmpRightInputSchemas,
        actionColOptions: {
          span: 14,
        },
      });
      const handleDelScopeAndKeyAndVal = () => {
        emit('clear');
      };
      return {
        registerRightSelect,
        registerRightInput,
        handleDelScopeAndKeyAndVal,
      };
    },
  });
</script>
<style lang="less" scoped></style>