<script setup lang="ts">
import { reactive, ref } from "vue";
import { getDeviceDetail } from "@/api/station";
import { addDevice, modifyDevice } from "@/api/device";
import { ElMessage } from "element-plus";

const emit = defineEmits(["refresh"]);

const formRef = ref();
const dialogVisible = ref(false);
const dialogType = ref<"add" | "edit">("add");
const loading = ref(false);

const state = reactive({
  ruleForm: {
    id: null as number | null,
    deviceName: "",
    productKey: "",
    stationId: "",
    status: "",
    hasFoam: "",
    hasWater: "",
    hasPa: "",
    temperatureChip: "",
    faultReason: "",
    functions: ""
  },
  rules: {
    deviceName: [{ required: true, message: "请输入设备名称", trigger: "blur" }]
  }
});

const resetForm = () => {
  state.ruleForm = {
    id: null,
    deviceName: "",
    productKey: "",
    stationId: "",
    status: "",
    hasFoam: "",
    hasWater: "",
    hasPa: "",
    temperatureChip: "",
    faultReason: "",
    functions: ""
  };
  formRef.value?.resetFields();
};

const open = async (type: "add" | "edit", row?: any) => {
  dialogType.value = type;
  resetForm();
  
  if (type === "edit" && row?.id) {
    loading.value = true;
    try {
      const res = await getDeviceDetail(row.id);
      Object.assign(state.ruleForm, res);
    } catch (e) {
      ElMessage.error("获取设备详情失败");
    } finally {
      loading.value = false;
    }
  } else if (type === "add" && row) {
    state.ruleForm.stationId = row.stationId || "";
  }
  
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
  resetForm();
};

const handleSubmit = async () => {
  const valid = await formRef.value?.validate().catch(() => false);
  if (!valid) return;
  
  loading.value = true;
  try {
    if (state.ruleForm.id) {
      await modifyDevice(state.ruleForm);
    } else {
      await addDevice(state.ruleForm);
    }
    ElMessage.success("操作成功");
    handleClose();
    emit("refresh");
  } catch (e) {
    ElMessage.error("操作失败");
  } finally {
    loading.value = false;
  }
};

const getTitle = () => {
  return dialogType.value === "add" ? "新增设备" : "编辑设备";
};

const getSubmitText = () => {
  return dialogType.value === "add" ? "新增" : "保存";
};

defineExpose({ open });
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="getTitle()"
    width="600px"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <el-form
      ref="formRef"
      :model="state.ruleForm"
      :rules="state.rules"
      label-width="120px"
    >
      <el-form-item label="设备名称" prop="deviceName">
        <el-input v-model="state.ruleForm.deviceName" placeholder="请输入设备名称" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <ext-d-select v-model="state.ruleForm.status" type="Device.state" placeholder="请选择状态" />
      </el-form-item>
      <el-form-item label="是否有泡沫" prop="hasFoam">
        <ext-d-select v-model="state.ruleForm.hasFoam" type="YesNo" placeholder="请选择" />
      </el-form-item>
      <el-form-item label="是否有水" prop="hasWater">
        <ext-d-select v-model="state.ruleForm.hasWater" type="YesNo" placeholder="请选择" />
      </el-form-item>
      <el-form-item label="是否支持PA" prop="hasPa">
        <ext-d-select v-model="state.ruleForm.hasPa" type="YesNo" placeholder="请选择" />
      </el-form-item>
      <el-form-item label="板载温度" prop="temperatureChip">
        <el-input v-model="state.ruleForm.temperatureChip" placeholder="板载温度传感器的温度值" />
      </el-form-item>
      <el-form-item label="故障原因" prop="faultReason">
        <el-input
          v-model="state.ruleForm.faultReason"
          type="textarea"
          :rows="2"
          placeholder="请输入故障原因"
        />
      </el-form-item>
      <el-form-item label="功能" prop="functions">
        <el-input v-model="state.ruleForm.functions" placeholder="请输入功能" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button :loading="loading" type="primary" @click="handleSubmit">
          {{ getSubmitText() }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-select {
  width: 100%;
}
</style>
