<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="事项名称">
                    <el-input
                      v-model="formData.itemName"
                      placeholder="请输入事项名称"
                    />
                  </el-form-item>
                </el-col>
                <!-- 事项类型 -->
                <el-col :span="12">
                  <el-form-item label="事项类型">
                    <el-input
                      v-model="formData.itemType"
                      placeholder="请输入事项类型（如：年度/五年）"
                    />
                  </el-form-item>
                </el-col>
                <!-- 编制年度 -->
                <el-col :span="12">
                  <el-form-item label="编制年度">
                    <el-date-picker
                      v-model="formData.planYear"
                      type="year"
                      format="YYYY"
                      value-format="YYYY"
                      placeholder="请选择编制年度"
                      picker-options="{ disabledDate: (date) => date > new Date() }"
                    />
                  </el-form-item>
                </el-col>
                <!-- 规划周期(年) -->
                <el-col :span="12">
                  <el-form-item label="规划周期(年)">
                    <el-input-number
                      v-model="formData.planCycle"
                      placeholder="请输入规划周期"
                      :min="1"
                      :max="100"
                      style="width: 100%"
                    />
                    <span class="input-tip">单位：年</span>
                  </el-form-item>
                </el-col>
                <!-- 编制单位 -->
                <el-col :span="12">
                  <el-form-item label="编制单位">
                    <el-input
                      v-model="formData.planUnit"
                      placeholder="请输入编制单位"
                    />
                  </el-form-item>
                </el-col>
                <!-- 牵头部门 -->
                <el-col :span="12">
                  <el-form-item label="牵头部门">
                    <el-input
                      v-model="formData.leadingDepartment"
                      placeholder="请输入牵头部门"
                    />
                  </el-form-item>
                </el-col>
                <!-- 填报人 -->
                <el-col :span="12">
                  <el-form-item label="填报人">
                    <el-input
                      v-model="formData.creatorName"
                      placeholder="请输入填报人姓名"
                    />
                  </el-form-item>
                </el-col>
                <!-- 填报时间 -->
                <el-col :span="12">
                  <el-form-item label="填报时间">
                    <el-date-picker
                      v-model="formData.creatorTime"
                      type="date"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      placeholder="请选择填报时间"
                      picker-options="{ disabledDate: (date) => date > new Date() }"
                    />
                  </el-form-item>
                </el-col>

                <!-- 附件上传区域 - 上级单位投资规划 -->
                <el-col :span="24">
                  <el-form-item label="上级单位投资规划" label-width="200">
                    <FileUploader v-model="formData.sjdwtzgh" />
                  </el-form-item>
                </el-col>
                <!-- 附件上传区域 - 本级单位投资规划 -->
                <el-col :span="24">
                  <el-form-item label="本级单位投资规划" label-width="200">
                    <FileUploader v-model="formData.bjdwtzgh" />
                  </el-form-item>
                </el-col>
                <!-- 附件上传区域 - 其他材料 -->
                <el-col :span="24">
                  <el-form-item label="其他材料" label-width="200">
                    <FileUploader v-model="formData.qtcl" />
                  </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 rcTzghId = ref(route.query.id || ""); // 投资规划记录ID（匹配表名）
const options = ref({}); // 预留配置项，后续有下拉可扩展

// ========== 表单核心数据（完全匹配RcTzgh表结构） ==========
const formData = reactive({
  itemName: "", // 事项名称
  itemType: "", // 事项类型
  planYear: "", // 编制年度（YYYY格式）
  planCycle: "", // 规划周期(年)
  planUnit: "", // 编制单位
  leadingDepartment: "", // 牵头部门
  creatorName: "", // 填报人
  creatorTime: "", // 填报时间
  sjdwtzgh: [], // 上级单位投资规划（附件JSON）
  bjdwtzgh: [], // 本级单位投资规划（附件JSON）
  qtcl: [], // 其他材料（附件JSON）
  creator: proxy.$store?.getters?.userId || "", // 创建人ID（从全局状态取，可根据实际调整）
  del: 0, // 删除标识，默认正常
});

// ========== 接口请求 ==========
// 获取投资规划单条记录详情（编辑/预览时用）
const getRcTzghDetail = () => {
  loading.value = true;
  proxy.$post({
    url: "/api/project/getTzgh", // 匹配投资规划接口
    data: { id: rcTzghId.value },
    callback: (data) => {
      loading.value = false;
      Object.assign(formData, data);
      // 处理时间/数字格式，避免渲染报错
      formData.planYear = data.planYear || "";
      formData.planCycle = Number(data.planCycle) || "";
      formData.creatorTime = data.creatorTime || "";
      // 附件数组默认值
      formData.sjdwtzgh = data.sjdwtzgh || [];
      formData.bjdwtzgh = data.bjdwtzgh || [];
      formData.qtcl = data.qtcl || [];
    },
    error: () => (loading.value = false),
  });
};

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

// 保存/提交表单（新增/编辑统一处理）
const saveClick = () => {
  // // 简单表单校验
  // if (!formData.itemName || !formData.itemType || !formData.planYear) {
  //   ElMessage.warning("请填写必填的事项名称、事项类型、编制年度");
  //   return;
  // }
  // if (
  //   !formData.planCycle ||
  //   !formData.planUnit ||
  //   !formData.leadingDepartment
  // ) {
  //   ElMessage.warning("请填写必填的规划周期、编制单位、牵头部门");
  //   return;
  // }
  // if (!formData.creatorName || !formData.creatorTime) {
  //   ElMessage.warning("请填写必填的填报人、填报时间");
  //   return;
  // }

  loading.value = true;
  // 匹配投资规划的新增/编辑接口
  const url = rcTzghId.value
    ? "/api/project/updateTzgh"
    : "/api/project/createTzgh";
  proxy.$post({
    url: url,
    data: { ...formData },
    callback: () => {
      loading.value = false;
      ElMessage.success(
        rcTzghId.value ? "投资规划编辑成功" : "投资规划新增成功"
      );
      router.back(-1);
    },
    error: (err) => {
      loading.value = false;
      ElMessage.error(err.msg || "操作失败，请稍后重试");
    },
  });
};

// ========== 页面初始化 ==========
onMounted(() => {
  // 编辑/预览模式，加载投资规划详情数据
  if (rcTzghId.value) {
    getRcTzghDetail();
  }
});
</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;
}
// 数字输入框提示文字
.input-tip {
  margin-left: 8px;
  color: #909399;
  font-size: 12px;
}
// 附件上传区域间距
:deep(.el-upload) {
  margin-bottom: 10px;
}
</style>
