<template>
  <view class="message-add-page">
      <button class="save-btn" @click="handleAddFeedback">
        <text>保存</text>
      </button>


    <!-- 表单内容 -->
    <view class="form-container">
      <uni-forms 
        ref="formRef" 
        :model="form" 
        :rules="rules"
        labelPosition="left"
      >
        <uni-forms-item 
          label="标题" 
          name="title"
          required
        >
          <uni-easyinput 
            v-model="form.title" 
            placeholder="请输入标题"
          ></uni-easyinput>
        </uni-forms-item>
        
        <uni-forms-item 
          label="项目" 
          name="projectId"
        >
          <oa-project-select 
            v-model="form.projectId" 
          ></oa-project-select>
        </uni-forms-item>
        
        <uni-forms-item 
          label="内容" 
          name="content"
          required
        >
          <uni-easyinput 
            v-model="form.content" 
            type="textarea" 
            placeholder="请输入反馈内容"
            :height="200"
          ></uni-easyinput>
        </uni-forms-item>
      </uni-forms>
    </view>
  </view>
</template>

<script>
import { addFeedback } from "@/api/oa/feedback";

export default {
  data() {
    return {
      // 表单数据
      form: {
        title: "",
        content: "",
        projectId: null,
      },
      // 表单校验规则
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 2, max: 50, message: "标题长度在 2 到 50 个字符", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请输入反馈内容", trigger: "blur" },
        ],
      }
    };
  },
  methods: {
    // 提交新增反馈
    handleAddFeedback() {
      this.$refs.formRef.validate().then(() => {
        addFeedback(this.form)
          .then(() => {
            uni.showToast({
              title: "反馈新增成功！",
              icon: "success"
            });
            // 返回列表页
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          })
          .catch(err => {
            uni.showToast({
              title: err.message || "新增失败",
              icon: "none"
            });
          });
      }).catch(err => {
        console.log('表单验证失败：', err);
      });
    },
    
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.message-add-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  background-color: #3e7bfa;
  color: #fff;
}

.back-btn {
  background-color: transparent;
  border: none;
  color: #fff;
  padding: 5px 10px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.save-btn {
  background-color: transparent;
  border: none;
  color: #fff;
  padding: 5px 10px;
  font-size: 16px;
}

.form-container {
  padding: 15px;
  background-color: #fff;
  margin: 10px;
  border-radius: 8px;
}

.uni-forms {
  --label-width: 80px;
}

.uni-forms-item {
  margin-bottom: 15px;
}
</style>