<script setup lang="ts">
import { ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { addMqttServer, updateMqttServer, MqttServerDTO, UpdateMqttServerCommand } from "@/api/cabinet/mqttServer";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  row: {
    type: Object as () => MqttServerDTO,
    default: () => ({})
  }
});

const emit = defineEmits(["update:visible", "refresh"]);

const formRef = ref();
const formData = ref<UpdateMqttServerCommand>({
  mqttServerId: 0,
  serverUrl: "",
  username: "",
  password: "",
  topicFilter: "",
  publishTopic: ""
});

const rules = {
  serverUrl: [{ required: true, message: "请输入服务地址", trigger: "blur" }],
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  topicFilter: [{ required: true, message: "请输入主题过滤", trigger: "blur" }],
  publishTopic: [{ required: true, message: "请输入发布主题", trigger: "blur" }]
};

watch(
  () => props.visible,
  val => {
    if (val) {
      if (props.row?.mqttServerId) {
        formData.value = {
          ...props.row,
          mqttServerId: props.row.mqttServerId
        };
      } else {
        formData.value = {
          mqttServerId: 0,
          serverUrl: "",
          username: "",
          password: "",
          topicFilter: "",
          publishTopic: ""
        };
      }
    }
  }
);

const handleSubmit = async () => {
  try {
    await formRef.value.validate();

    if (formData.value.mqttServerId) {
      await updateMqttServer(formData.value.mqttServerId, formData.value);
      ElMessage.success("修改成功");
    } else {
      await addMqttServer(formData.value);
      ElMessage.success("新增成功");
    }

    emit("update:visible", false);
    emit("refresh");
  } catch (error) {
    console.error(error);
  }
};

const handleClose = () => {
  emit("update:visible", false);
};
</script>

<template>
  <el-dialog :title="formData.mqttServerId ? '编辑MQTT服务' : '新增MQTT服务'" :model-value="visible"
    @update:model-value="handleClose" width="600px">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="服务ID" prop="mqttServerId" v-if="formData.mqttServerId">
        <el-input v-model="formData.mqttServerId" :disabled="true" />
      </el-form-item>
      <el-form-item label="服务地址" prop="serverUrl">
        <el-input v-model="formData.serverUrl" placeholder="请输入服务地址" />
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password" type="password" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="主题过滤" prop="topicFilter">
        <el-input v-model="formData.topicFilter" placeholder="请输入主题过滤" />
      </el-form-item>
      <el-form-item label="发布主题" prop="publishTopic">
        <el-input v-model="formData.publishTopic" placeholder="请输入发布主题" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>