<template>
  <div class="add-project-container">
    <div class="add-project-content" v-loading="loading">
      <routerBack
        :show-save="!loading && !isPreview"
        :loading="loading"
        @save="saveClick"
      />
      <div class="tabs-content">
        <div class="project-tab-content">
          <div class="tab-content">
            <el-form :model="formData" :disabled="isPreview">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="文件名称">
                    <el-input
                      v-model="formData.wjmc"
                      placeholder="请输入文件名称"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="颁布时间" required>
                    <el-date-picker
                      v-model="formData.bbsj"
                      type="date"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      placeholder="请选择颁布时间"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="文件层级">
                    <el-radio-group
                      v-model="formData.wjcj"
                      placeholder="请选择文件层级"
                    >
                      <el-radio
                        v-for="item in options?.fileHierarchy"
                        :key="item.id"
                        :value="item.key"
                        >{{ item.name }}</el-radio
                      >
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="文件类别">
                    <el-select
                      v-model="formData.wjlb"
                      placeholder="请选择文件类别"
                    >
                      <el-option
                        v-for="item in options?.fileType"
                        :key="item.key"
                        :label="item.name"
                        :value="item.key"
                      ></el-option>
                    </el-select>
                  </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 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>
  </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";
import routerBack from "@/components/common/routerBack.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({
  fjsc: [], // 附件上传
});

// ========== 接口请求 ==========
// 获取单条记录详情（编辑/预览时用）
const getJsqtzjcDetail = () => {
  loading.value = true;
  proxy.$post({
    url: "/api/project/getTxjs",
    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 = () => {
  loading.value = true;
  const url = rcCgqyglId.value
    ? "/api/project/updateTxjs"
    : "/api/project/createTxjs";
  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">
.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>
