<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"
              label-width="160px"
              :disabled="isPreview"
            >
              <!-- 项目信息选择 -->
              <el-row :gutter="20" style="margin-bottom: 20px">
                <el-col :span="12">
                  <el-form-item label="项目信息" required>
                    <el-select
                      v-model="formData.projectId"
                      :disabled="projectDisabled"
                      placeholder="请选择项目信息"
                      no-data-text="暂无数据"
                      @change="changeProject"
                    >
                      <el-option
                        v-for="item in projectList"
                        :key="item.key"
                        :label="item.projectName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <!-- 分类标签页 -->
              <el-tabs v-model="pageActiveName" type="border-card">
                <!-- 合同类 -->
                <el-tab-pane label="合同类" name="合同类">
                  <el-row :gutter="20">
                    <!-- 权益类合同 -->
                    <el-col :span="24">
                      <el-form-item label="权益类合同">
                        <FileUploader
                          v-model="formData.qylht"
                          :custom-columns="[
                            {
                              prop: 'htlx',
                              label: '权益类合同类型',
                              type: 'dictSelect',
                              dictName: 'qylhtlx',
                            },
                            {
                              prop: 'jfqdsj',
                              label: '甲方签订时间',
                              type: 'date',
                              width: 180,
                              format: 'YYYY-MM-DD',
                            },
                            {
                              prop: 'yfqdsj',
                              label: '乙方签订时间',
                              type: 'date',
                              width: 180,
                              format: 'YYYY-MM-DD',
                            },
                          ]"
                          @custom-col-change="handleCustomColChange"
                        />
                      </el-form-item>
                    </el-col>
                    <!-- 经济类合同 -->
                    <el-col :span="24">
                      <el-form-item label="经济类合同">
                        <FileUploader
                          :custom-columns="[
                            {
                              prop: 'htlx',
                              label: '经济类合同类型',
                              type: 'dictSelect',
                              dictName: 'jjlhtlx',
                            },
                            {
                              prop: 'jfqdsj',
                              label: '甲方签订时间',
                              type: 'date',
                              width: 180,
                              format: 'YYYY-MM-DD',
                            },
                            {
                              prop: 'yfqdsj',
                              label: '乙方签订时间',
                              type: 'date',
                              width: 180,
                              format: 'YYYY-MM-DD',
                            },
                          ]"
                          v-model="formData.jjlht"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-tab-pane>

                <!-- 造价类 -->
                <el-tab-pane label="造价类" name="造价类">
                  <el-row :gutter="20">
                    <!-- 造价文件 -->
                    <el-col :span="24">
                      <el-form-item label="决策文件">
                        <FileUploader v-model="formData.juecewj" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="估算文件">
                        <FileUploader v-model="formData.gusuanwj" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="概算文件">
                        <FileUploader v-model="formData.gaisuanwj" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="预算文件">
                        <FileUploader v-model="formData.yswj" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="调概文件">
                        <FileUploader v-model="formData.tgwj" />
                      </el-form-item>
                    </el-col>
                    <!-- 动用预备费审批文件 -->
                    <el-col :span="24">
                      <el-form-item label="动用预备费审批文件">
                        <FileUploader
                          :custom-columns="customColumnsJs"
                          v-model="formData.ybfspwj"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-tab-pane>

                <!-- 变更索赔类 -->
                <el-tab-pane label="变更索赔类" name="变更索赔类">
                  <el-row :gutter="20">
                    <!-- 变更索赔文件 -->

                    <el-col :span="24">
                      <el-form-item label="变更索赔文件">
                        <FileUploader
                          v-model="formData.bgsp"
                          :custom-columns="customColumnsJs"
                        >
                          <template #actions>
                            <div class="gov-notice-wrapper">
                              <div class="notice-item">
                                <span class="item-label">【变更】</span>
                                <span class="item-text"
                                  >投资项目金额达到300万元（含）以上的设计变更立项、施工图和费用审核。</span
                                >
                              </div>
                              <div class="notice-item">
                                <span class="item-label">【索赔】</span>
                                <span class="item-text"
                                  >预计金额300万元（含）以上的工程索赔立项、费用审核。</span
                                >
                              </div>
                            </div>
                          </template>
                        </FileUploader>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-tab-pane>

                <!-- 工商出资类 -->
                <el-tab-pane label="工商出资类" name="工商出资类">
                  <el-row :gutter="20">
                    <!-- 股权结构 -->
                    <el-col :span="24">
                      <el-form-item
                        label="股权结构、资金来源及构成发生重大变化的报告及审批文件"
                      >
                        <FileUploader
                          v-model="formData.gqjg"
                          :custom-columns="customColumnsJs"
                        />
                      </el-form-item>
                    </el-col>
                    <!-- 接入财务金融部资本金出资台账，台账更新，系统上跟着更新 -->
                    <!-- <el-col :span="24">
                      <el-form-item
                        label="接入财务金融部资本金出资台账，台账更新，系统上跟着更新"
                      >
                        <FileUploader v-model="formData.cwjr" />
                      </el-form-item>
                    </el-col> -->
                  </el-row>
                </el-tab-pane>

                <!-- 其他类 -->
                <el-tab-pane label="其他类" name="其他类">
                  <el-row :gutter="20">
                    <!-- 其他文件 -->
                    <el-col :span="24">
                      <el-form-item label="其他文件">
                        <FileUploader v-model="formData.qt" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-tab-pane>
              </el-tabs>
            </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";
import { useProjectDetail } from "@/composables/useProjectDetail";
// 初始化全局变量
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();

const { projectDisabled, cachedInfo } = useProjectDetail();

const customColumnsJs = [
  {
    prop: "js",
    label: "介绍",
    type: "textarea",
    width: 180,
    format: "YYYY-MM-DD",
  },
];
// 标签页默认激活项
const pageActiveName = ref("合同类");

// 表单数据 - 补充所有用到的字段
const formData = reactive({
  projectName: "",
  projectId: "",
  del: 0, // 删除标记，0为正常
  // 合同类
  qylht: "", // 权益类合同
  jjlht: "", // 经济类合同
  // 造价类
  zjwj: "", // 造价文件
  ybfspwj: "", // 动用预备费审批文件
  // 变更索赔类
  bgsp: "", // 变更索赔文件
  // 工商出资类
  gqjg: "", // 股权结构
  cwjr: "", // 资金来源及构成
  // 其他类
  qt: "", // 其他文件
});

// 加载状态
const loading = ref(false);
// 是否预览模式
const isPreview = ref(!!route.query.isPreview);
// 项目列表数据
const projectList = ref([]);
// 当前编辑的记录ID
const rcCgqyglId = ref(route.query.id || "");

// ========== 通用方法 ==========
// 获取项目列表
const getProjectData = (params = {}) => {
  proxy.$post({
    url: "/api/project/listProject",
    data: {
      page: 1,
      pagesize: 1000,
      attributes: [],
      menuType: "xmjc",
      ...params,
    },
    callback: (data) => {
      projectList.value = data.rows || [];
    },
    errorCallback: () => {
      ElMessage.error("获取项目列表失败");
    },
  });
};

// 选择项目后同步项目名称
const changeProject = (val) => {
  const selectItem = projectList.value.find((item) => item.id === val);
  if (selectItem) {
    formData.projectName = selectItem.projectName;
  }
};

// 获取单条记录详情（编辑/预览）
const getJsqtzjcDetail = () => {
  if (!rcCgqyglId.value) return;

  loading.value = true;
  proxy.$post({
    url: "/api/project/getZdsxspInfo",
    data: { id: rcCgqyglId.value },
    callback: (data) => {
      loading.value = false;
      // 赋值表单数据
      Object.assign(formData, data);
    },
    errorCallback: () => {
      loading.value = false;
      ElMessage.error("网络异常，获取数据失败");
    },
  });
};

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

// 保存/提交表单
const saveClick = () => {
  // 基础校验
  if (!formData.projectId) {
    ElMessage.warning("请选择项目信息");
    return;
  }

  loading.value = true;
  // 区分新增/编辑
  const url = rcCgqyglId.value
    ? "/api/project/updateZdsxsp"
    : "/api/project/createZdsxsp";

  // 组装提交数据
  const submitData = {
    ...formData,
    projectId: formData.projectId + "", // 确保为字符串类型
  };

  proxy.$post({
    url: url,
    data: submitData,
    callback: () => {
      loading.value = false;
      ElMessage.success(rcCgqyglId.value ? "编辑成功" : "新增成功");
      router.back(-1);
    },
    errorCallback: () => {
      loading.value = false;
      ElMessage.error("保存失败，请重试");
    },
  });
};

// 页面初始化
onMounted(() => {
  // 获取项目列表
  getProjectData();
  if (cachedInfo) {
    formData.projectName = cachedInfo.projectName || "";
    formData.projectId = cachedInfo.projectId || "";
  }
  if (rcCgqyglId.value) {
    getJsqtzjcDetail();
  }
});
</script>

<style scoped lang="less">
// 标签页样式优化
:deep(.el-tabs--border-card) {
  --el-tabs-card-border-color: var(--el-border-color);
  --el-tabs-header-text-color: var(--el-text-color-primary);
  --el-tabs-active-text-color: var(--el-color-primary);
}

// 表单间距优化
.el-form-item {
  margin-bottom: 16px;
}

.el-row {
  margin-bottom: 8px;
}

// 政府公文样式
.gov-notice-wrapper {
  background-color: #ffffff;

  .notice-item {
    padding-left: 16px;
    display: flex;
    align-items: flex-start;
    line-height: 1.8;
    font-size: 14px;
    color: #606266;

    &:last-child {
      margin-bottom: 0;
    }

    .item-label {
      color: #e6a23c;
      font-weight: 600;
      margin-right: 8px;
      flex-shrink: 0;
    }

    .item-text {
      flex: 1;
      text-align: justify;
    }
  }
}
</style>
