<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import { getFeedbackDetail, modifyFeedback } from "@/api/feedback";
import { ElMessage } from "element-plus";

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

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

const state = reactive({
  ruleForm: {
    id: null as number | null,
    title: "",
    type: "",
    submitTime: "",
    submitUserId: "",
    attachList: "",
    content: "",
    replyContent: "",
    replyTime: "",
    replyUserId: "",
    status: 1
  },
  attachUrls: [] as string[]
});

const getTitle = () => {
  return "反馈详情";
};

const isView = () => dialogType.value === "view";

const open = async (type: "view" | "edit" = "view", row?: any) => {
  dialogType.value = type;
  if (row) {
    loading.value = true;
    try {
      const res = await getFeedbackDetail(row.id);
      Object.assign(state.ruleForm, res);
      if (res.attachList) {
        try {
          state.attachUrls = JSON.parse(res.attachList).map((k: any) => k.url);
        } catch (e) {
          state.attachUrls = [];
        }
      }
    } catch (e) {
      ElMessage.error("获取详情失败");
    } finally {
      loading.value = false;
    }
  }
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
  state.attachUrls = [];
};

const handleSubmit = async () => {
  const valid = await formRef.value?.validate().catch(() => false);
  if (!valid) return;

  loading.value = true;
  try {
    await modifyFeedback(state.ruleForm);
    ElMessage.success("回复成功");
    handleClose();
    emit("refresh");
  } catch (e) {
    ElMessage.error("操作失败");
  } finally {
    loading.value = false;
  }
};

defineExpose({ open });
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="getTitle()"
    width="820px"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-form ref="formRef" :model="state.ruleForm" label-width="100px" label-position="top">
      <el-form-item label="反馈标题">
        <el-input :model-value="state.ruleForm.title" readonly />
      </el-form-item>
      <el-form-item label="纠错类型">
        <el-input :model-value="state.ruleForm.type" readonly />
      </el-form-item>
      <el-form-item label="提交时间">
        <el-input :model-value="state.ruleForm.submitTime" readonly />
      </el-form-item>
      <el-form-item label="反馈人">
        <el-input :model-value="state.ruleForm.submitUserId" readonly />
      </el-form-item>
      <el-form-item label="附件列表" v-if="state.attachUrls.length > 0">
        <div style="display: flex; gap: 10px; flex-wrap: wrap">
          <el-image
            v-for="(url, idx) in state.attachUrls"
            :key="idx"
            :src="url"
            style="width: 100px; height: 100px"
            fit="cover"
            :preview-src-list="state.attachUrls"
          />
        </div>
      </el-form-item>
      <el-form-item label="问题描述">
        <el-input :model-value="state.ruleForm.content" type="textarea" :rows="3" readonly />
      </el-form-item>
      <el-form-item label="回复内容" prop="replyContent" v-if="!isView()">
        <el-input v-model="state.ruleForm.replyContent" type="textarea" :rows="4" placeholder="请输入回复内容" />
      </el-form-item>
      <el-form-item label="回复内容" v-if="isView() && state.ruleForm.replyContent">
        <el-input :model-value="state.ruleForm.replyContent" type="textarea" :rows="3" readonly />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
      <el-button v-if="!isView()" :loading="loading" type="primary" @click="handleSubmit">提交回复</el-button>
    </template>
  </el-dialog>
</template>
