<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-collapse v-model="activeCollapse">
                <!-- 选择类型 -->
                <el-collapse-item title="选择类型" name="选择类型">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="请选择登记类型">
                        <!-- <CommonSelector
                          :radio="true"
                          v-model="formData.djlx"
                          dictName="xmtc_djlx"
                        /> -->
                        <el-radio-group v-model="formData.djlx">
                          <el-radio value="1">中止</el-radio>
                          <el-radio value="2">重启</el-radio>
                          <el-radio value="3">终止</el-radio>
                          <el-radio value="4">推出</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <!-- 基本信息 -->
                <el-collapse-item title="基本信息" name="基本信息">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="项目名称" required>
                        <el-select
                          v-model="formData.projectId"
                          placeholder="请选择项目名称"
                          no-data-text="暂无数据"
                          @change="changeProject"
                        >
                          <el-option
                            v-for="item in projectList"
                            :key="item.id"
                            :label="item.projectName"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="项目编号">
                        <el-input
                          v-model="formData.xmbh"
                          placeholder="请输入项目编号"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="是否联合体">
                        <el-input
                          v-model="formData.sfLht"
                          placeholder="请输入是否联合体"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="申报单位">
                        <el-input
                          v-model="formData.sbdw"
                          placeholder="请输入申报单位"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="所属二级企业">
                        <el-input
                          v-model="formData.ssejqy"
                          placeholder="请输入所属二级企业"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="一级分类">
                        <el-input
                          v-model="formData.yjFl"
                          placeholder="请输入一级分类"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="二级分类">
                        <el-input
                          v-model="formData.ejFl"
                          placeholder="请输入二级分类"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="投资板块">
                        <el-input
                          v-model="formData.tzBk"
                          placeholder="请输入投资板块"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="细分板块">
                        <el-input
                          v-model="formData.xfBk"
                          placeholder="请输入细分板块"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="项目公司全称">
                        <el-input
                          v-model="formData.xmgsmc"
                          placeholder="请输入项目公司全称"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="项目批复时间">
                        <el-input
                          v-model="formData.xmPfsj"
                          placeholder="请输入项目批复时间"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="报备时间">
                        <el-input
                          v-model="formData.bbsj"
                          placeholder="请输入报备时间"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="项目建设期 (月)">
                        <el-input
                          v-model="formData.xmjsqy"
                          :min="0"
                          placeholder="请输入项目建设期 (月)"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="运营年限（年）">
                        <el-input
                          v-model="formData.yynxn"
                          :min="0"
                          placeholder="请输入运营年限（年）"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="项目预计起始时间">
                        <el-date-picker
                          v-model="formData.xmkgsjyj"
                          type="date"
                          placeholder="请选择项目预计起始时间"
                          value-format="YYYY-MM-DD"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="项目预计完成时间">
                        <el-date-picker
                          v-model="formData.xmjgsjyj"
                          type="date"
                          placeholder="请选择项目预计完成时间"
                          value-format="YYYY-MM-DD"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="退出申请日期">
                        <el-date-picker
                          v-model="formData.tcSqrq"
                          type="date"
                          placeholder="请选择退出申请日期"
                          value-format="YYYY-MM-DD"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="申请日期">
                        <el-date-picker
                          v-model="formData.sqrq"
                          type="date"
                          placeholder="请选择申请日期"
                          value-format="YYYY-MM-DD"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="填报人">
                        <el-input
                          v-model="formData.tbr"
                          placeholder="请输入填报人"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="填报人联系电话">
                        <el-input
                          v-model="formData.tbrlxdh"
                          placeholder="请输入填报人联系电话"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="当前净资产">
                        <el-input
                          v-model="formData.zqRz"
                          :min="0"
                          :precision="2"
                          controls-position="right"
                          placeholder="0.00"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="项目的主要建设内容">
                        <el-input
                          v-model="formData.xmJsContent"
                          type="textarea"
                          rows="3"
                          placeholder="请输入项目的主要建设内容"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="我方出资人及持股比例">
                        <el-input
                          v-model="formData.cgRatio"
                          type="textarea"
                          rows="3"
                          placeholder="请输入我方出资人及持股比例"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>

                <!-- 项目投资效益 -->
                <el-collapse-item title="项目投资效益" name="项目投资效益">
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label=" ">
                        <DynamicTable
                          :showAddButton="false"
                          :columns="transferColumns"
                          :disabled="isPreview"
                          v-model="formData.projectGdxxs"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item title="项目中止内容" name="项目中止内容">
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="中止原因">
                        <el-input
                          v-model="formData.zzyy"
                          type="textarea"
                          rows="2"
                          placeholder="请输入中止原因"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="中止详细原因">
                        <el-input
                          v-model="formData.zzxxyy"
                          type="textarea"
                          rows="3"
                          placeholder="请输入中止详细原因"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="其他说明">
                        <el-input
                          v-model="formData.qtsm"
                          type="textarea"
                          rows="3"
                          placeholder="请输入其他说明"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="中止报告">
                        <FileUploader v-model="formData.zzbg"></FileUploader>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="其他相关支撑材料">
                        <FileUploader
                          v-model="formData.qtxgzccl"
                        ></FileUploader>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="报批报备文件">
                        <FileUploader v-model="formData.bpbbwj"></FileUploader>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item title="项目重启内容" name="项目重启内容">
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="中止原因">
                        <el-input
                          v-model="formData.zzyy"
                          type="textarea"
                          rows="2"
                          placeholder="请输入中止原因"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="中止详细原因">
                        <el-input
                          v-model="formData.zzxxyy"
                          type="textarea"
                          rows="3"
                          placeholder="请输入中止详细原因"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="其他说明">
                        <el-input
                          v-model="formData.qtsm"
                          type="textarea"
                          rows="3"
                          placeholder="请输入其他说明"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="中止报告">
                        <FileUploader v-model="formData.zzbg"></FileUploader>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="其他相关支撑材料">
                        <FileUploader
                          v-model="formData.qtxgzccl"
                        ></FileUploader>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="报批报备文件">
                        <FileUploader v-model="formData.bpbbwj"></FileUploader>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item title="项目终止内容" name="项目终止内容">
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="中止原因">
                        <el-input
                          v-model="formData.zzyy"
                          type="textarea"
                          rows="2"
                          placeholder="请输入中止原因"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="中止详细原因">
                        <el-input
                          v-model="formData.zzxxyy"
                          type="textarea"
                          rows="3"
                          placeholder="请输入中止详细原因"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="其他说明">
                        <el-input
                          v-model="formData.qtsm"
                          type="textarea"
                          rows="3"
                          placeholder="请输入其他说明"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="中止报告">
                        <FileUploader v-model="formData.zzbg"></FileUploader>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="其他相关支撑材料">
                        <FileUploader
                          v-model="formData.qtxgzccl"
                        ></FileUploader>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="报批报备文件">
                        <FileUploader v-model="formData.bpbbwj"></FileUploader>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item title="项目退出内容" name="项目退出内容">
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="中止原因">
                        <el-input
                          v-model="formData.zzyy"
                          type="textarea"
                          rows="2"
                          placeholder="请输入中止原因"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="中止详细原因">
                        <el-input
                          v-model="formData.zzxxyy"
                          type="textarea"
                          rows="3"
                          placeholder="请输入中止详细原因"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="其他说明">
                        <el-input
                          v-model="formData.qtsm"
                          type="textarea"
                          rows="3"
                          placeholder="请输入其他说明"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="中止报告">
                        <FileUploader v-model="formData.zzbg"></FileUploader>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="其他相关支撑材料">
                        <FileUploader
                          v-model="formData.qtxgzccl"
                        ></FileUploader>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="报批报备文件">
                        <FileUploader v-model="formData.bpbbwj"></FileUploader>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>
              </el-collapse>
            </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 DynamicTable from "@/components/FormDynamicTable/index.vue";
import FileUploader from "@/components/FileUploader/index.vue";

const transferColumns = ref([
  {
    prop: "njfcgbl",
    label: "审批时",
    disabled: true,
    type: "input",
    headerGroup: "投资总额（万元）",
    placeholder: "请输入审批时金额",
  },
  {
    prop: "njfcgblqk",
    label: "已投资",
    type: "input",
    headerGroup: "投资总额（万元）",
    placeholder: "审批时已投资金额",
  },
  {
    prop: "njfcgblqk_nt",
    label: "审批时",
    disabled: true,
    type: "input",
    headerGroup: "我方资本金出资（万元）",
    placeholder: "请填写审批时",
  },
  {
    prop: "zwfcgbl",
    label: "已投资",
    type: "input",
    headerGroup: "我方资本金出资（万元）",
    placeholder: "请填写已投资",
  },
  {
    prop: "jjcgbl",
    label: "预计",
    disabled: true,
    type: "input",
    headerGroup: "项目全投资内部收益率（税前）%",
    placeholder: "请填写预计",
    min: 0,
  },
  {
    prop: "njfglmc",
    label: "预计",
    type: "input",
    headerGroup: "项目全投资内部收益率（税前）%",
    placeholder: "请填写预计",
  },
  {
    prop: "jjcgbl2",
    label: "预计",
    disabled: true,
    type: "input",
    headerGroup: "项目全投资内部收益率（税后）%",
    placeholder: "请填写预计",
    min: 0,
  },
  {
    prop: "njfglmc2",
    label: "预计",
    type: "input",
    headerGroup: "项目全投资内部收益率（税后）%",
    placeholder: "请填写预计",
  },
]);

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

// ========== 基础配置 ==========
const activeCollapse = ref([
  "选择类型",
  "基本信息",
  "项目中止内容",
  "项目重启内容",
  "项目终止内容",
  "项目退出内容",
  "项目投资效益",
]);
const loading = ref(false);
const isPreview = ref(!!route.query.isPreview);
const projectList = ref([]);
const rcCgqyglId = ref(route.query.id || "");

// ========== 表单数据（仅保留核心使用的字段） ==========
const formData = reactive({
  // 动态表格数据
  projectGdxxs: [
    {
      njfcgbl: "",
      njfcgblqk_nt: "",
      jjcgbl: "",
      jjcgbl2: "",
      njfcgblqk: "",
      zwfcgbl: "",
      njfglmc: "",
      njfglmc2: "",
    },
  ],
  // 基础字段
  projectId: "",
  projectName: "",
  djlx: "", // 登记类型
  xmbh: "", // 项目编号
  sfLht: "", // 是否联合体
  sbdw: "", // 申报单位
  ssejqy: "", // 所属二级企业
  yjFl: "", // 一级分类
  ejFl: "", // 二级分类
  tzBk: "", // 投资板块
  xfBk: "", // 细分板块
  xmgsmc: "", // 项目公司全称
  xmPfsj: "", // 项目批复时间
  bbsj: "", // 报备时间
  xmkgsjyj: "", // 项目预计起始时间
  xmjgsjyj: "", // 项目预计完成时间
  tcSqrq: "", // 退出申请日期
  sqrq: "", // 申请日期
  xmjsqy: 0, // 项目建设期（月）
  yynxn: 0, // 运营年限（年）
  tbr: "", // 填报人
  tbrlxdh: "", // 填报人联系电话
  zqRz: 0.0, // 当前净资产
  xmJsContent: "", // 项目主要建设内容
  cgRatio: "", // 我方出资人及持股比例
});

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

// ========== 选择项目同步名称及相关信息 ==========
const changeProject = (val) => {
  proxy.$post({
    url: "/api/project/getProjectFinalInfo",
    data: { id: val },
    callback: (data) => {
      loading.value = false;
      formData.projectName = data.projectName || "";
      formData.sbdw = data.sbdw || "";
      formData.xmgsmc = data.xmgsmc || "";
      formData.xmkgsjyj = data.xmkgsjyj || "";
      formData.xmjgsjyj = data.xmjgsjyj || "";
      formData.xmjd = data.xmjd || "";
      formData.yynxn = data.yynxn || "";
      formData.xmjsqy = data.xmjsqy || "";

      // 回填项目投资效益表格数据
      formData.projectGdxxs[0].njfcgblqk_nt =
        data.projectXmtzzes?.at(1)?.children?.at(0)?.rmbjj || "";
      formData.projectGdxxs[0].njfcgbl =
        data.projectXmtzzes?.at(2)?.rmbjj || "";
      formData.projectGdxxs[0].jjcgbl = data.projectCwpjzbs?.at(0)?.num || "";
      formData.projectGdxxs[0].jjcgbl2 = data.projectCwpjzbs?.at(1)?.num || "";
    },
    error: () => {
      loading.value = false;
      ElMessage.error("获取项目详情失败");
    },
  });
  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/getTzjh",
    data: { id: rcCgqyglId.value },
    callback: async (data) => {
      loading.value = false;
      if (!data) return ElMessage.error("未查询到数据");
      Object.assign(formData, data);
    },
    error: () => {
      loading.value = false;
      ElMessage.error("获取投资计划详情失败");
    },
  });
};

// ========== 保存表单 ==========
const saveClick = () => {
  if (!formData.projectId) return ElMessage.warning("请选择项目信息");
  loading.value = true;
  const url = rcCgqyglId.value
    ? "/api/project/updateTzjh"
    : "/api/project/createTzjh";

  // 组装提交数据
  const submitData = {
    ...formData,
    projectId: String(formData.projectId),
  };

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

// ========== 辅助方法 ==========
const backClick = () => router.back(-1);

onMounted(() => {
  getProjectData();
  if (rcCgqyglId.value) {
    // 编辑/预览：拉取接口数据
    getJsqtzjcDetail();
  }
});
</script>

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