<script lang="ts" setup>
import { onMounted } from 'vue';

import { isEmpty } from '@vben/utils';

import { useVModel } from '@vueuse/core';
import { FormItem, Input } from 'ant-design-vue';

defineOptions({ name: 'MqttConfigForm' });

const props = defineProps<{
  modelValue: any;
}>();
const emit = defineEmits(['update:modelValue']);
const config = useVModel(props, 'modelValue', emit) as any;

/** 组件初始化 */
onMounted(() => {
  if (!isEmpty(config.value)) {
    return;
  }
  config.value = {
    url: '',
    username: '',
    password: '',
    clientId: '',
    topic: '',
  };
});
</script>

<template>
  <div class="space-y-4">
    <FormItem label="服务地址" required>
      <Input
        v-model:value="config.url"
        placeholder="请输入MQTT服务地址，如：mqtt://localhost:1883"
      />
    </FormItem>
    <FormItem label="用户名" required>
      <Input v-model:value="config.username" placeholder="请输入用户名" />
    </FormItem>
    <FormItem label="密码" required>
      <Input.Password
        v-model:value="config.password"
        placeholder="请输入密码"
      />
    </FormItem>
    <FormItem label="客户端ID" required>
      <Input v-model:value="config.clientId" placeholder="请输入客户端ID" />
    </FormItem>
    <FormItem label="主题" required>
      <Input v-model:value="config.topic" placeholder="请输入主题" />
    </FormItem>
  </div>
</template>
