<template>
  <div class="page-card">
    <h3>服务反馈</h3>
    <el-form :model="form" label-width="120px">
      <el-form-item label="亲人">
        <el-select v-model="form.elderId" placeholder="选择亲人">
          <el-option v-for="elder in elders" :key="elder.id" :label="elder.name" :value="elder.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="form.type">
          <el-option label="建议" value="SUGGESTION" />
          <el-option label="投诉" value="COMPLAINT" />
          <el-option label="表扬" value="PRAISE" />
        </el-select>
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="form.content" type="textarea" />
      </el-form-item>
      <el-form-item label="评分" class="rate-item">
        <el-rate v-model="form.rating" />
      </el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form>
    <div style="margin-top: 18px;">
      <h4 style="margin: 0 0 8px;">我的反馈</h4>
      <el-table :data="items" stripe>
        <el-table-column prop="createdAt" label="时间" width="180" />
        <el-table-column label="类型" width="120">
          <template slot-scope="scope">
            <el-tag :type="typeTag(scope.row.type)">{{ typeLabel(scope.row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="内容" />
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="statusTag(scope.row.status)">{{ statusLabel(scope.row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="reply" label="回复" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { familyElders, familyFeedback, familyFeedbackList } from "../../api";

export default {
  data() {
    return {
      elders: [],
      form: { elderId: "", type: "SUGGESTION", content: "", rating: 0 },
      items: []
    };
  },
  async created() {
    try {
      const res = await familyElders();
      this.elders = res.data.data;
      this.loadList();
    } catch (e) {
      this.$message.error(e.message || "加载失败");
    }
  },
  methods: {
    typeLabel(type) {
      if (type === "SUGGESTION") return "建议";
      if (type === "COMPLAINT") return "投诉";
      if (type === "PRAISE") return "表扬";
      return type || "-";
    },
    typeTag(type) {
      if (type === "SUGGESTION") return "info";
      if (type === "COMPLAINT") return "danger";
      if (type === "PRAISE") return "success";
      return "info";
    },
    statusLabel(status) {
      if (status === "NEW") return "新建";
      if (status === "PROCESSING") return "处理中";
      if (status === "CLOSED") return "已关闭";
      return status || "-";
    },
    statusTag(status) {
      if (status === "NEW") return "warning";
      if (status === "PROCESSING") return "";
      if (status === "CLOSED") return "success";
      return "info";
    },
    async loadList() {
      try {
        const res = await familyFeedbackList();
        this.items = res.data.data;
      } catch (e) {
        this.$message.error(e.message || "加载失败");
      }
    },
    async submit() {
      try {
        await familyFeedback(this.form);
        this.$message.success("提交成功");
        this.form.content = "";
        this.form.rating = 0;
        this.loadList();
      } catch (e) {
        this.$message.error(e.message || "提交失败");
      }
    }
  }
};
</script>

<style scoped>
.rate-item ::v-deep .el-form-item__content {
  display: flex;
  align-items: center;
}
</style>

