<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="600px"
    @close="handleClose"
  >
    <el-form :model="form" label-width="100px">
      <el-form-item label="需求标题" required>
        <el-input v-model="form.title" placeholder="请输入需求标题" />
      </el-form-item>
      <el-form-item label="需求描述" required>
        <el-input
          v-model="form.desc"
          type="textarea"
          rows="4"
          placeholder="请输入需求描述"
        />
      </el-form-item>
      <el-form-item label="申请人">
        <el-input v-model="form.applicant" placeholder="请输入申请人" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.phone" placeholder="请输入电话" />
      </el-form-item>
      <el-form-item label="需求状态">
        <el-select v-model="form.status" placeholder="请选择状态">
          <el-option label="待处理" :value="1" />
          <el-option label="处理中" :value="2" />
          <el-option label="已完成" :value="3" />
          <el-option label="已拒绝" :value="4" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { ElMessage } from "element-plus";
import { addDemand, editDemand } from "@/api/demand";

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "新增需求",
  },
  demand: {
    type: Object,
    default: () => ({
      id: "",
      title: "",
      desc: "",
      applicant: "",
      status: 1,
    }),
  },
});

// Emits
const emit = defineEmits(["close", "submit"]);

// 状态
const dialogVisible = ref(props.visible);
const dialogTitle = ref(props.title);

// 表单数据
const form = reactive({
  id: "",
  title: "",
  desc: "",
  applicant: "",
  status: 1,
});

// 监听props变化
watch(
  () => props.visible,
  (newVal) => {
    dialogVisible.value = newVal;
  },
);

watch(
  () => props.title,
  (newVal) => {
    dialogTitle.value = newVal;
  },
);

watch(
  () => props.demand,
  (newVal) => {
    Object.assign(form, newVal);
  },
  { deep: true },
);

// 处理关闭
const handleClose = () => {
  emit("close");
};

// 提交表单
const handleSubmit = async () => {
  // 表单验证
  if (!form.title || !form.desc) {
    ElMessage.warning("请填写必填项");
    return;
  }

  try {
    let result;
    if (form.id) {
      // 编辑
      result = await editDemand(form.id, form);
    } else {
      // 新增
      result = await addDemand(form);
    }

    if (result.code === 200) {
      ElMessage.success(form.id ? "编辑成功" : "新增成功");
      emit("submit", { ...form });
    } else {
      ElMessage.error(result.msg || "操作失败");
    }
  } catch (error) {
    ElMessage.error("网络错误，请稍后重试");
    console.error("提交表单失败:", error);
  }
};
</script>

<style lang="less" scoped>
.dialog-footer {
  text-align: right;
}
</style>
