<template>
  <div class="add-project-container">
    <div class="add-project-content" v-loading="loading">
      <div class="add-project-header">
        <div class="header-left"></div>
        <div class="header-right">
          <el-button type="default" @click="backClick">返回</el-button>
          <template v-if="!loading && !isPreview">
            <el-button type="primary" @click="saveClick">保存</el-button>
          </template>
        </div>
      </div>
      <div class="tabs-content">
        <div class="project-tab-content">
          <div class="tab-content">
            <el-form :model="formData" :label-width="200" :disabled="isPreview">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="问题标题" required>
                    <el-input
                      v-model="formData.issueTitle"
                      placeholder="请输入问题标题"
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="问题类别" required>
                    <CommonSelector
                      v-model="formData.issueCategory"
                      dictName="xxhwtlb"
                    >
                    </CommonSelector>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="问题描述" required>
                    <el-input
                      v-model="formData.issueDescription"
                      placeholder="请输入问题描述"
                      show-word-limit
                      type="textarea"
                      rows="3"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label-width="0" label="">
                    <FileUploader v-model="formData.fjsc" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import FileUploader from "../../components/FileUploader/index.vue";

// 路由&全局实例
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();

// ========== 核心状态 ==========
const loading = ref(false); // 加载状态
const isPreview = ref(!!route.query.isPreview); // 是否预览模式
const rcCgqyglId = ref(route.query.id || ""); // 当前编辑记录ID
const options = ref({}); // 下拉/单选全局配置项（文件层级/类别）

// ========== 表单核心数据（删除无用数组，仅保留页面绑定的字段） ==========
const formData = reactive({
  wjmc: "", // 文件名称
  bbsj: "", // 颁布时间
  wjcj: "", // 文件层级
  wjlb: "", // 问题类别
  fjsc: [], // 附件上传
});

// ========== 接口请求 ==========
// 获取单条记录详情（编辑/预览时用）
const getJsqtzjcDetail = () => {
  loading.value = true;
  proxy.$post({
    url: "/api/project/getXxhjs",
    data: { id: rcCgqyglId.value },
    callback: (data) => {
      loading.value = false;
      Object.assign(formData, data);
      // 确保附件数组有默认值，避免渲染报错
      formData.fjsc = data.fjsc || [];
    },
    error: () => (loading.value = false),
  });
};

// ========== 页面操作方法 ==========
// 返回上一页
const backClick = () => {
  router.back(-1);
};

// 保存/提交表单（新增/编辑统一处理）
const saveClick = () => {
  if (!formData.issueTitle) {
    ElMessage.warning("请填写问题标题");
    return;
  }
  if (!formData.issueCategory) {
    ElMessage.warning("请选择问题类别");
    return;
  }
  if (!formData.issueDescription) {
    ElMessage.warning("请填写问题描述");
    return;
  }
  loading.value = true;
  const url = rcCgqyglId.value
    ? "/api/project/updateXxhjs"
    : "/api/project/createXxhjs";
  proxy.$post({
    url: url,
    data: { ...formData },
    callback: () => {
      loading.value = false;
      ElMessage.success(rcCgqyglId.value ? "编辑成功" : "新增成功");
      router.back(-1);
    },
    error: () => {
      loading.value = false;
    },
  });
};

// ========== 页面初始化 ==========
onMounted(() => {
  // 从sessionStorage获取全局配置项（文件层级/类别）
  try {
    options.value = JSON.parse(sessionStorage.getItem("resourceData")) || {};
  } catch (e) {
    options.value = {};
  }
  // 编辑/预览模式，加载详情数据
  if (rcCgqyglId.value) {
    getJsqtzjcDetail();
  }
});
</script>

<style scoped lang="less">
@import "@/styles/verticalManages.less";

.add-project-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.add-project-content {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
}

.add-project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

// 保留核心样式，删除无用的表格/折叠面板样式（页面未使用）
:deep(.el-form-item__label) {
  font-weight: 500;
}
</style>
