<script lang="ts" setup>
  import { Button } from 'ant-design-vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { formSchemas } from './config';
  import { ref } from 'vue';
  import { unref } from 'vue';

  const emit = defineEmits(['update:value']);

  const [registerModal] = useModal();

  const [registerForm, { getFieldsValue }] = useForm({
    schemas: formSchemas,
    showActionButtonGroup: false,
    rowProps: { gutter: 10 },
    baseColProps: { span: 12 },
  });

  const commandValue = ref('');

  const handleGetValue = async () => {
    const value = getFieldsValue();
    console.log(value);
  };

  const handleOk = () => {
    emit('update:value', unref(commandValue));
  };
</script>

<template>
  <BasicModal @register="registerModal" title="配置操作" @ok="handleOk">
    <BasicForm @register="registerForm" class="create-tcp-command-form" />
    <section>
      <Button @click="handleGetValue" type="link" class="!px-0">生成预览</Button>
      <div v-if="commandValue">
        <div class="text-gray-400">Modbus 指令预览</div>
        <code class="bg-dark-50 text-light-50 p-1 w-full block mt-1">{{ commandValue }}</code>
      </div>
    </section>
  </BasicModal>
</template>

<style lang="less" scoped>
  .create-tcp-command-form {
    :deep(.ant-input-number) {
      width: 100%;
      min-width: 0;
    }
  }
</style>