<template>
  <div class="add-project-container">
    <div class="add-project-content" v-loading="loading">
      <routerBack />
      <div class="tabs-content">
        <div class="project-tab-content-wrapper">
          <div class="tab-content">
            <el-form :model="formData" :label-width="80" :disabled="isPreview">
              <el-collapse
                v-model="activeCollapse"
                v-collapse-nav="navigationItems"
              >
                <el-collapse-item title="项目信息" name="项目信息">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="项目信息" required>
                        <el-select
                          v-model="formData.projectId"
                          placeholder="请选择"
                          no-data-text="暂无数据"
                        >
                          <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-row>
                </el-collapse-item>
                <el-collapse-item
                  title="费用分项控制、阶段对比表"
                  name="费用分项控制、阶段对比表"
                >
                  <el-row :gutter="20">
                    <template v-if="fyfxkzIsEdit">
                      <el-col :span="6">
                        <el-form-item label="本期时间" required>
                          <el-date-picker
                            v-model="fyfxkzFormData.bqsj"
                            type="month"
                            placeholder="请选择"
                            value-format="YYYY-MM"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item label="上期时间" required>
                          <el-date-picker
                            v-model="fyfxkzFormData.sqsj"
                            type="month"
                            placeholder="请选择"
                            value-format="YYYY-MM"
                            :disabled-date="fyfxkzDisabledDate"
                          />
                        </el-form-item>
                      </el-col>
                    </template>
                    <el-col :span="6" :offset="fyfxkzIsEdit ? 6 : 18">
                      <div class="tab-handle">
                        <template v-if="fyfxkzIsEdit">
                          <el-button
                            type="default"
                            size="small"
                            @click="cancelFyfxkz"
                            >取消</el-button
                          >
                          <el-button
                            type="primary"
                            size="small"
                            @click="saveFyfxkz"
                            >确定</el-button
                          >
                        </template>
                        <template v-else>
                          <el-select
                            v-model="selectRange"
                            placeholder="请选择"
                            no-data-text="暂无数据"
                            :style="{ width: '200px', marginRight: '20px' }"
                            @change="changeRange"
                          >
                            <el-option
                              v-for="item in rangeList"
                              :key="item.key"
                              :label="item.key"
                              :value="item.key"
                            ></el-option>
                          </el-select>
                          <el-button
                            v-if="selectRange"
                            type="primary"
                            size="small"
                            @click="editFyfxkz"
                            >编辑</el-button
                          >
                          <el-button
                            type="primary"
                            size="small"
                            @click="addFyfxkz"
                            >新增</el-button
                          >
                        </template>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-table
                        :data="fyfxkzData"
                        style="width: 100%"
                        empty-text="暂无数据"
                        border
                        height="500"
                      >
                        <el-table-column type="index" label="序号" width="60" />
                        <el-table-column prop="xm" label="项目" width="240">
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.xm"
                              :disabled="!fyfxkzIsEdit"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="zbgs"
                          label="招标估算"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.zbgs"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                              :disabled="!fyfxkzIsEdit"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="jcgs"
                          label="决策估算"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.jcgs"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                              :disabled="!fyfxkzIsEdit"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="pfgusuan"
                          label="批复估算"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.pfgusuan"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                              :disabled="!fyfxkzIsEdit"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="pfgs"
                          label="批复概算"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.pfgs"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                              :disabled="!fyfxkzIsEdit"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="tkjgs"
                          label="同口径概算"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.tkjgs"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                              :disabled="!fyfxkzIsEdit"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="pfys"
                          label="批复预算"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.pfys"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                              :disabled="!fyfxkzIsEdit"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="zbqy"
                          label="招标签约"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.zbqy"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                              :disabled="!fyfxkzIsEdit"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="jgjssj"
                          label="竣工决算审计"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.jgjssj"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                              :disabled="!fyfxkzIsEdit"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="tgje"
                          label="调概金额"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.tgje"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                              :disabled="!fyfxkzIsEdit"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="sqyc"
                          label="上期预测"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.sqyc"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                              :disabled="!fyfxkzIsEdit"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="bqyc"
                          label="本期预测"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.bqyc"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                              :disabled="!fyfxkzIsEdit"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="bqjsq"
                          label="本期-上期"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.bqjsq"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                              :disabled="!fyfxkzIsEdit"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="cysm"
                          label="本期较上期差异原因说明"
                          width="240"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.cysm"
                              type="textarea"
                              :disabled="!fyfxkzIsEdit"
                            />
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item
                  title="决策条件落实情况"
                  name="决策条件落实情况"
                >
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="决策单位">
                        <el-select
                          v-model="formData.jcdw"
                          placeholder="请选择"
                          no-data-text="暂无数据"
                        >
                          <el-option
                            v-for="item in jcdwList"
                            :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="项目批复意见落实情况"
                        :label-width="170"
                      ></el-form-item>
                      <div class="tab-handle">
                        <el-button
                          type="primary"
                          size="small"
                          @click="addPfyjlsqk"
                          >新增</el-button
                        >
                      </div>
                      <el-table
                        :data="pfyjlsqkData"
                        style="width: 100%"
                        empty-text="暂无数据"
                        border
                      >
                        <el-table-column type="index" width="60" />
                        <el-table-column prop="zyx" label="重要性" width="180">
                          <template #default="scope">
                            <el-input v-model="scope.row.zyx" />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="ssjd"
                          label="实施阶段"
                          width="180"
                        >
                          <template #default="scope">
                            <el-select
                              v-model="scope.row.ssjd"
                              placeholder="请选择"
                              no-data-text="暂无数据"
                            >
                              <el-option
                                v-for="item in ssjdList"
                                :key="item.key"
                                :label="item.name"
                                :value="item.key"
                              ></el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="pfnr"
                          label="批复内容"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.pfnr"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="pfyjlsqkjtsm"
                          label="批复意见落实情况具体说明"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.pfyjlsqkjtsm"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="lszxqk"
                          label="落实（执行）情况"
                          width="180"
                        >
                          <template #default="scope">
                            <el-select
                              v-model="scope.row.lszxqk"
                              placeholder="请选择"
                              no-data-text="暂无数据"
                            >
                              <el-option
                                v-for="item in lsqkList"
                                :key="item.key"
                                :label="item.name"
                                :value="item.key"
                              ></el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="wlsyy"
                          label="未落实原因"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.wlsyy"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="xybgzcs"
                          label="下一步工作措施"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.xybgzcs"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="yjwcsj"
                          label="预计完成时间"
                          width="260"
                        >
                          <template #default="scope">
                            <el-date-picker
                              v-model="scope.row.yjwcsj"
                              type="datetime"
                              placeholder="请选择"
                              value-format="YYYY-MM-DD HH:mm:ss"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="zrld"
                          label="责任领导"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input v-model="scope.row.zrld" />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="zrbmjzrr"
                          label="责任部门及责任人"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input v-model="scope.row.zrbmjzrr" />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="sfgx"
                          label="是否更新"
                          width="160"
                        >
                          <template #default="scope">
                            <el-radio-group v-model="scope.row.sfgx">
                              <el-radio value="1">是</el-radio>
                              <el-radio value="2">否</el-radio>
                            </el-radio-group>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="文件上传"
                          prop="wjsc"
                          width="180"
                        >
                          <template #default="scope">
                            <el-upload
                              v-if="!scope.row.wjsc"
                              :action="
                                windowConfig.baseUrl + '/api/file/upload'
                              "
                              :headers="{ Authorization: token }"
                              :show-file-list="false"
                              :on-success="
                                (res, file) => addWjscFile(res, file, scope.row)
                              "
                            >
                              <el-button link type="primary">上传</el-button>
                            </el-upload>
                            <div class="upload-file-wrap" v-else>
                              <span
                                class="file-name"
                                @click="downloadFile(scope.row.wjsc)"
                                >{{ scope.row.wjsc.originalname }}</span
                              >
                              <span
                                class="delete-btn"
                                @click="deleteWjscFile(scope.row, scope.$index)"
                              >
                                <el-icon><CloseBold /></el-icon>
                              </span>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="bz" label="备注" width="180">
                          <template #default="scope">
                            <el-input v-model="scope.row.bz" type="textarea" />
                          </template>
                        </el-table-column>
                        <el-table-column label="操作" width="60" fixed="right">
                          <template #default="scope">
                            <el-button
                              link
                              type="danger"
                              size="small"
                              @click="deletePfyjlsqk(scope.$index)"
                              >删除</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item
                  title="其他建设目标重大偏差"
                  name="其他建设目标重大偏差"
                >
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item
                        label="工期"
                        :label-width="50"
                      ></el-form-item>
                      <div class="tab-handle">
                        <el-button type="primary" size="small" @click="addGq"
                          >新增</el-button
                        >
                      </div>
                      <el-table
                        :data="gqData"
                        style="width: 100%"
                        empty-text="暂无数据"
                        border
                      >
                        <el-table-column type="index" width="60" />
                        <el-table-column
                          label="监理开工令上传"
                          prop="jlkglsc"
                          width="180"
                        >
                          <template #default="scope">
                            <el-upload
                              v-if="!scope.row.jlkglsc"
                              :action="
                                windowConfig.baseUrl + '/api/file/upload'
                              "
                              :headers="{ Authorization: token }"
                              :show-file-list="false"
                              :on-success="
                                (res, file) =>
                                  addJlkglFile(res, file, scope.row)
                              "
                            >
                              <el-button link type="primary">上传</el-button>
                            </el-upload>
                            <div class="upload-file-wrap" v-else>
                              <span
                                class="file-name"
                                @click="downloadFile(scope.row.jlkglsc)"
                                >{{ scope.row.jlkglsc.originalname }}</span
                              >
                              <span
                                class="delete-btn"
                                @click="
                                  deleteJlkglFile(scope.row, scope.$index)
                                "
                              >
                                <el-icon><CloseBold /></el-icon>
                              </span>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="行业主管部门施工许可证上传"
                          prop="sgxkzsc"
                          width="180"
                        >
                          <template #default="scope">
                            <el-upload
                              v-if="!scope.row.sgxkzsc"
                              :action="
                                windowConfig.baseUrl + '/api/file/upload'
                              "
                              :headers="{ Authorization: token }"
                              :show-file-list="false"
                              :on-success="
                                (res, file) =>
                                  addSgxkzFile(res, file, scope.row)
                              "
                            >
                              <el-button link type="primary">上传</el-button>
                            </el-upload>
                            <div class="upload-file-wrap" v-else>
                              <span
                                class="file-name"
                                @click="downloadFile(scope.row.sgxkzsc)"
                                >{{ scope.row.sgxkzsc.originalname }}</span
                              >
                              <span
                                class="delete-btn"
                                @click="
                                  deleteSgxkzFile(scope.row, scope.$index)
                                "
                              >
                                <el-icon><CloseBold /></el-icon>
                              </span>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="kglsj"
                          label="监理开工令开工时间"
                          width="260"
                        >
                          <template #default="scope">
                            <el-date-picker
                              v-model="scope.row.kglsj"
                              type="date"
                              placeholder="请选择"
                              value-format="YYYY-MM-DD"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="sgxksj"
                          label="施工许可时间"
                          width="260"
                        >
                          <template #default="scope">
                            <el-date-picker
                              v-model="scope.row.sgxksj"
                              type="date"
                              placeholder="请选择"
                              value-format="YYYY-MM-DD"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="yjsjwgsj"
                          label="预计/实际完成时间"
                          width="260"
                        >
                          <template #default="scope">
                            <el-date-picker
                              v-model="scope.row.yjsjwgsj"
                              type="date"
                              placeholder="请选择"
                              value-format="YYYY-MM-DD"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="htgqydms"
                          label="合同工期约定描述"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.htgqydms"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="gqywsm"
                          label="工期延误说明"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.gqywsm"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="gqtqsm"
                          label="工期提前说明"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.gqtqsm"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column label="操作" width="60" fixed="right">
                          <template #default="scope">
                            <el-button
                              link
                              type="danger"
                              size="small"
                              @click="deleteGq(scope.$index)"
                              >删除</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item
                        label="安全质量环保"
                        :label-width="100"
                      ></el-form-item>
                      <div class="tab-handle">
                        <el-button
                          type="primary"
                          size="small"
                          @click="addAqzlhb"
                          >新增</el-button
                        >
                      </div>
                      <el-table
                        :data="aqzlhbData"
                        style="width: 100%"
                        empty-text="暂无数据"
                        border
                      >
                        <el-table-column type="index" width="60" />
                        <el-table-column prop="jlkglsc" label="目标描述">
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.jlkglsc"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column prop="ly" label="来源">
                          <template #default="scope">
                            <el-select
                              v-model="scope.row.ly"
                              placeholder="请选择"
                              no-data-text="暂无数据"
                            >
                              <el-option
                                v-for="item in lyList"
                                :key="item.key"
                                :label="item.name"
                                :value="item.key"
                              ></el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="sffsaqzlhbwt"
                          label="是否发生较大及以上安全质量环保问题被行政处罚"
                        >
                          <template #default="scope">
                            <el-radio-group v-model="scope.row.sffsaqzlhbwt">
                              <el-radio value="1">是</el-radio>
                              <el-radio value="2">否</el-radio>
                            </el-radio-group>
                          </template>
                        </el-table-column>
                        <el-table-column label="操作" width="60" fixed="right">
                          <template #default="scope">
                            <el-button
                              link
                              type="danger"
                              size="small"
                              @click="deleteAqzlhb(scope.$index)"
                              >删除</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                    <el-col :span="24" class="fileCla">
                      <el-form-item
                        label-width="320"
                        label="较大及以上安全质量环保问题行政处罚文件上传"
                      >
                        <FileUploader
                          v-model="formData.qtjsmbzdpc"
                        ></FileUploader>
                      </el-form-item>
                      <!-- <el-upload
                          :action="windowConfig.baseUrl + '/api/file/upload'"
                          :headers="{ Authorization: token }"
                          :show-file-list="false"
                          multiple
                          :on-success="addMbpcFile"
                        >
                          <el-button type="default">上传</el-button>
                        </el-upload>
                        <el-button
                          type="default"
                          @click="multiDeleteMbpc"
                          :disabled="!mbpcSelectIds.length"
                          >删除选中文件</el-button
                        > -->
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item title="投资收益" name="投资收益">
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item
                        label="财务评价主要边界条件变化对比表"
                        :label-width="230"
                      ></el-form-item>
                      <el-row :gutter="20">
                        <template v-if="cwpjIsEdit">
                          <el-col :span="6">
                            <el-form-item label="起始时间" required>
                              <el-date-picker
                                v-model="cwpjFormData.bqsj"
                                type="month"
                                placeholder="请选择"
                                value-format="YYYY-MM"
                              />
                            </el-form-item>
                          </el-col>
                          <el-col :span="6">
                            <el-form-item label="截止时间" required>
                              <el-date-picker
                                v-model="cwpjFormData.sqsj"
                                type="month"
                                placeholder="请选择"
                                value-format="YYYY-MM"
                                :disabled-date="cwpjDisabledDate"
                              />
                            </el-form-item>
                          </el-col>
                        </template>
                        <el-col :span="6" :offset="cwpjIsEdit ? 6 : 18">
                          <div class="tab-handle">
                            <template v-if="cwpjIsEdit">
                              <el-button
                                type="default"
                                size="small"
                                @click="cancelCwpj"
                                >取消</el-button
                              >
                              <el-button
                                type="primary"
                                size="small"
                                @click="saveCwpj"
                                >确定</el-button
                              >
                            </template>
                            <template v-else>
                              <el-select
                                v-model="cwpjSelectRange"
                                placeholder="请选择"
                                no-data-text="暂无数据"
                                :style="{ width: '200px', marginRight: '20px' }"
                                @change="changeCwpjRange"
                              >
                                <el-option
                                  v-for="item in cwpjRangeList"
                                  :key="item.key"
                                  :label="item.key"
                                  :value="item.key"
                                ></el-option>
                              </el-select>
                              <el-button
                                v-if="cwpjSelectRange"
                                type="primary"
                                size="small"
                                @click="editCwpj"
                                >编辑</el-button
                              >
                              <el-button
                                type="primary"
                                size="small"
                                @click="addCwpj"
                                >新增</el-button
                              >
                            </template>
                          </div>
                        </el-col>
                      </el-row>
                      <el-table
                        :data="cwpjData"
                        style="width: 100%"
                        empty-text="暂无数据"
                        border
                        height="500"
                      >
                        <el-table-column type="index" label="序号" width="60" />
                        <el-table-column prop="bjtj" label="边界条件" />
                        <el-table-column prop="jc" label="决策">
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.jc"
                              :disabled="!cwpjIsEdit"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column prop="xz" label="现状">
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.xz"
                              type="textarea"
                              :disabled="!cwpjIsEdit"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column prop="zycysm" label="主要差异说明">
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.zycysm"
                              type="textarea"
                              :disabled="!cwpjIsEdit"
                            />
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item
                        label="投资收益指标变化对比表"
                        :label-width="170"
                      ></el-form-item>
                      <el-table
                        :data="tzsyData"
                        style="width: 100%"
                        empty-text="暂无数据"
                        border
                        height="500"
                      >
                        <el-table-column type="index" label="序号" width="60" />
                        <el-table-column prop="pjzb" label="评价指标" />
                        <el-table-column prop="jczb" label="决策指标">
                          <template #default="scope">
                            <el-input v-model="scope.row.jczb" />
                          </template>
                        </el-table-column>
                        <el-table-column prop="xzzb" label="现状指标">
                          <template #default="scope">
                            <el-input v-model="scope.row.xz" type="textarea" />
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                  </el-row>
                </el-collapse-item>
              </el-collapse>
            </el-form>
          </div>
          <div class="navigation-wrapper">
            <CollapseNavigation
              :nav-items="navigationItems"
              :active-item="activeCollapse"
              title="目录导航"
              width="auto"
              @nav-click="handleNavClick"
            />
          </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, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import FileUploader from "@/components/FileUploader/index.vue";
import routerBack from "@/components/common/routerBack.vue";
import CollapseNavigation from "@/components/CollapseNavigation/index.vue";

import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
let token = ref("");
token.value = userStore.authToken || sessionStorage.getItem("authToken") || "";

const activeCollapse = reactive([
  "投资额控制",
  "费用分项控制、阶段对比表",
  "决策条件落实情况",
  "项目信息",
  "其他建设目标重大偏差",
  "投资收益",
]);

// ========== 导航配置（由 v-collapse-nav 指令自动生成） ==========
const navigationItems = ref([]);

// 导航点击处理
const handleNavClick = (item) => {
  console.log("Navigation clicked:", item);

  // 点击导航时自动展开对应的折叠面板
  if (!activeCollapse.includes(item.name)) {
    activeCollapse.push(item.name);
  }

  // 等待 DOM 更新后滚动
  nextTick(() => {
    setTimeout(() => {
      const targetId = `collapse-${item.name}`;
      const targetElement = document.getElementById(targetId);

      console.log("Scrolling to element:", {
        targetId,
        found: !!targetElement,
        element: targetElement,
      });

      if (targetElement) {
        // 使用 scrollIntoView 获得更平滑的效果
        targetElement.scrollIntoView({
          behavior: "smooth",
          block: "start",
          inline: "nearest",
        });

        // 可选：添加额外的偏移量调整
        setTimeout(() => {
          const elementPosition = targetElement.getBoundingClientRect().top;
          if (elementPosition < 80) {
            // 如果距离顶部太近，向上滚动一点
            window.scrollBy({
              top: elementPosition - 80,
              behavior: "smooth",
            });
          }
        }, 300);
      } else {
        console.error("Element not found:", targetId);
        console.log(
          "Available collapse elements:",
          document.querySelectorAll('[id^="collapse-"]'),
        );
      }
    }, 300); // 增加延迟确保动画完成
  });
};
let formData = reactive({});
let loading = ref(false);

// 项目列表
let projectList = ref([]);
const getProjectData = (params = {}) => {
  proxy.$post({
    url: "/api/project/listProject",
    data: {
      page: 1,
      pagesize: 1000,
      attributes: [],
      menuType: "xmjc",
      ...params,
    },
    callback: (data) => {
      projectList.value = data.rows;
    },
  });
};
// 费用分项控制、阶段对比表
const fyfxkzFormData = reactive({});
let rangeList = ref([]); // 往期列表
const selectRange = ref(""); // 选择查看往期数据
const fyfxkzDefaultData = [
  {
    xm: "建筑安装工程费",
  },
  {
    xm: "土地使用及拆迁补偿费",
  },
  {
    xm: "项目建设其他费",
  },
  {
    xm: "建设单位管理费",
  },
  {
    xm: "信息化费",
  },
  {
    xm: "监理费",
  },
  {
    xm: "预备费",
  },
  {
    xm: "建设期贷款利息",
  },
  {
    xm: "新增费用",
  },
  {
    xm: "合计",
  },
];
let fyfxkzData = ref([]);
let fyfxkzIsEdit = ref(false);

let isPreview = !!route.query.isPreview;
let controlId = route.query.controlId;
const getControlInfo = () => {
  loading.value = true;
  proxy.$post({
    url: "/api/project/getTzkzInfo",
    data: {
      id: controlId,
    },
    callback: (res) => {
      loading.value = false;
      Object.assign(formData, res);
      if (res.tzkztzekzs && res.tzkztzekzs.length) {
        rangeList.value = res.tzkztzekzs.map((item) => {
          return {
            ...item,
            bqsj: proxy.moment(item.bqsj).format("YYYY-MM"),
            sqsj: proxy.moment(item.sqsj).format("YYYY-MM"),
          };
        });
        selectRange.value = res.tzkztzekzs[0].key;
        fyfxkzData.value = res.tzkztzekzs[0].tables;
      }
      Object.assign(pfyjlsqkData.value, res.tzkzjcpfyjs);
      Object.assign(gqData.value, res.tzkzgqs);
      Object.assign(aqzlhbData.value, res.tzkzaqzlhbs);
      if (res.tzkzcwpjs && res.tzkzcwpjs.length) {
        cwpjRangeList.value = res.tzkzcwpjs.map((item) => {
          return {
            ...item,
            bqsj: proxy.moment(item.bqsj).format("YYYY-MM"),
            sqsj: proxy.moment(item.sqsj).format("YYYY-MM"),
          };
        });
        cwpjSelectRange.value = res.tzkzcwpjs[0].key;
        cwpjData.value = res.tzkzcwpjs[0].tables;
      }
      Object.assign(tzsyData.value, res.tzkztzsys);
    },
  });
};
let ssjdList = reactive([]);
let jcdwList = reactive([]);
let lsqkList = reactive([]);
let lyList = reactive([]); // 安全质量环保-来源列表

onMounted(() => {
  getProjectData();
  let resourceData = JSON.parse(sessionStorage.getItem("resourceData"));
  ssjdList = resourceData.ssjd;
  jcdwList = resourceData.jcdw;
  lsqkList = resourceData.lszxqk;
  lyList = resourceData.source;
  if (controlId) {
    getControlInfo();
    fyfxkzIsEdit.value = false;
    cwpjIsEdit.value = false;
  } else {
    fyfxkzData.value = JSON.parse(JSON.stringify(fyfxkzDefaultData));
    fyfxkzIsEdit.value = true;
    cwpjData.value = JSON.parse(JSON.stringify(cwpjDefaultData));
    cwpjIsEdit.value = true;
  }
});
// 费用分项控制：截止时间禁用日期方法
const fyfxkzDisabledDate = (time) => {
  if (!fyfxkzFormData.bqsj) return false;
  const startTime = new Date(fyfxkzFormData.bqsj);
  return time.getTime() < startTime.getTime();
};

// 新增费用分项控制、阶段对比表
const addFyfxkz = () => {
  selectRange.value = "";
  fyfxkzIsEdit.value = true;
  fyfxkzData.value = JSON.parse(JSON.stringify(fyfxkzDefaultData));
  fyfxkzFormData.bqsj = "";
  fyfxkzFormData.sqsj = "";
};
const editFyfxkz = () => {
  fyfxkzIsEdit.value = true;
  let selectData = rangeList.value.filter(
    (item) => item.key === selectRange.value,
  );
  fyfxkzFormData.bqsj = selectData[0].bqsj;
  fyfxkzFormData.sqsj = selectData[0].sqsj;
};
const saveFyfxkz = () => {
  if (fyfxkzFormData.bqsj && fyfxkzFormData.sqsj) {
    // 验证截止时间不能小于起始时间
    if (fyfxkzFormData.sqsj < fyfxkzFormData.bqsj) {
      return ElMessage.warning("截止时间不能小于起始时间");
    }

    const newKey = fyfxkzFormData.bqsj + "至" + fyfxkzFormData.sqsj;

    // 验证时间范围是否重复（排除当前编辑的记录）
    const isDuplicate = rangeList.value.some(
      (item) => item.key === newKey && item.key !== selectRange.value,
    );
    if (isDuplicate) {
      return ElMessage.warning("该时间范围已存在，请选择其他时间");
    }

    if (selectRange.value) {
      rangeList.value = rangeList.value.map((item) => {
        if (item.key === selectRange.value) {
          selectRange.value = newKey;
          return {
            bqsj: fyfxkzFormData.bqsj,
            sqsj: fyfxkzFormData.sqsj,
            key: newKey,
            tables: fyfxkzData.value,
          };
        } else {
          return {
            ...item,
          };
        }
      });
    } else {
      rangeList.value.push({
        bqsj: fyfxkzFormData.bqsj,
        sqsj: fyfxkzFormData.sqsj,
        key: newKey,
        tables: fyfxkzData.value,
      });
    }
    fyfxkzIsEdit.value = false;
    if (!selectRange.value) {
      selectRange.value = rangeList.value[0].key;
      fyfxkzData.value = rangeList.value[0].tables;
    } else {
      let selectData = rangeList.value.filter(
        (item) => item.key === selectRange.value,
      );
      fyfxkzData.value = selectData.length ? selectData[0].tables : [];
    }
  } else {
    ElMessage.warning("请补充本期及上期时间");
  }
};
const cancelFyfxkz = () => {
  if (selectRange.value) {
    fyfxkzData.value = rangeList.value[0].tables;
  } else if (formData.id) {
    fyfxkzData.value = [];
  } else {
    fyfxkzData.value = JSON.parse(JSON.stringify(fyfxkzDefaultData));
  }
  fyfxkzIsEdit.value = false;
};
const changeRange = (val) => {
  fyfxkzData.value = rangeList.value.filter(
    (item) => item.key === val,
  )[0].tables;
};

// 项目批复意见落实情况
let pfyjlsqkData = ref([]);
const addPfyjlsqk = () => {
  pfyjlsqkData.value.push({});
};
const addWjscFile = (res, file, row) => {
  row.wjsc = {};
  Object.assign(row.wjsc, res.data);
};
const deleteWjscFile = (row, index) => {
  let { wjsc, ...data } = row;
  pfyjlsqkData.value[index] = data;
};
const deletePfyjlsqk = (index) => {
  ElMessageBox.confirm("确认删除该项？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    pfyjlsqkData.value.splice(index, 1);
  });
};

// 其他建设目标重大偏差
//-工期
let gqData = ref([]);
const addGq = () => {
  gqData.value.push({});
};
// --监理开工令上传
const addJlkglFile = (res, file, row) => {
  row.jlkglsc = {};
  Object.assign(row.jlkglsc, res.data);
};
const deleteJlkglFile = (row, index) => {
  let { wjsc, ...data } = row;
  gqData.value[index] = data;
};
// --行业主管部门施工许可证上传
const addSgxkzFile = (res, file, row) => {
  row.sgxkzsc = {};
  Object.assign(row.sgxkzsc, res.data);
};
const deleteSgxkzFile = (row, index) => {
  let { wjsc, ...data } = row;
  gqData.value[index] = data;
};
const deleteGq = (index) => {
  ElMessageBox.confirm("确认删除该项？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    gqData.value.splice(index, 1);
  });
};
// -安全质量环保
let aqzlhbData = ref([]);
const addAqzlhb = () => {
  aqzlhbData.value.push({});
};
const deleteAqzlhb = (index) => {
  ElMessageBox.confirm("确认删除该项？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    aqzlhbData.value.splice(index, 1);
  });
};

// -文件上传
let mbpcData = ref([]);
const addMbpcFile = (res, file) => {
  mbpcData.value.push(res.data);
};
const deleteMbpc = (index) => {
  ElMessageBox.confirm("确认删除该项？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      mbpcData.value.splice(index, 1);
    })
    .catch(() => {});
};
let mbpcSelectIds = ref([]);
const mbpcSelectionChange = (datas) => {
  mbpcSelectIds.value = datas.map((item) => item.id);
};
const multiDeleteMbpc = () => {
  ElMessageBox.confirm("确认删除选中数据？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      mbpcData.value = mbpcData.value.filter(
        (item) => !mbpcSelectIds.value.includes(item.id),
      );
    })
    .catch(() => {});
};

// 下载已上传文件
const downloadFile = (data) => {
  let a = document.createElement("a");
  a.href = `${proxy.windowConfig.baseUrl}/api/file/download/${data.id}`;
  a.download = data.originalname;
  document.body.appendChild(a);
  a.click();
  a.remove();
};

// 财务评价：截止时间禁用日期方法
const cwpjDisabledDate = (time) => {
  if (!cwpjFormData.bqsj) return false;
  const startTime = new Date(cwpjFormData.bqsj);
  return time.getTime() < startTime.getTime();
};

// 财务评价主要边界条件变化对比表
const cwpjFormData = reactive({});
const cwpjDefaultData = [
  {
    bjtj: "项目总投资（万元）",
  },
  {
    bjtj: "项目资本金（万元）",
  },
  {
    bjtj: "我方出资（万元）",
  },
  {
    bjtj: "政府方出资（万元）",
  },
  {
    bjtj: "项目融资（万元）",
  },
  {
    bjtj: "年度投资比例",
  },
  {
    bjtj: "合作年限",
  },
  {
    bjtj: "长期贷款利率",
  },
  {
    bjtj: "债务偿还方式",
  },
  {
    bjtj: "项目收入（亿元）",
  },
  {
    bjtj: "通行费收入（亿元）",
  },
  {
    bjtj: "其他收入（亿元）",
  },
  {
    bjtj: "运营期补助收入（亿元）",
  },
  {
    bjtj: "经营成本（亿元）",
  },
  {
    bjtj: "税率",
  },
  {
    bjtj: "折旧摊销方式",
  },
];
let cwpjData = ref([]);
let cwpjIsEdit = ref(false);
let cwpjRangeList = ref([]);
const cwpjSelectRange = ref("");

// 新增财务评价主要边界条件变化对比表
const addCwpj = () => {
  cwpjSelectRange.value = "";
  cwpjIsEdit.value = true;
  cwpjData.value = JSON.parse(JSON.stringify(cwpjDefaultData));
};
const editCwpj = () => {
  cwpjIsEdit.value = true;
  let selectData = cwpjRangeList.value.filter(
    (item) => item.key === cwpjSelectRange.value,
  );
  cwpjFormData.bqsj = selectData[0].bqsj;
  cwpjFormData.sqsj = selectData[0].sqsj;
};
const saveCwpj = () => {
  if (cwpjFormData.bqsj && cwpjFormData.sqsj) {
    // 验证截止时间不能小于起始时间
    if (cwpjFormData.sqsj < cwpjFormData.bqsj) {
      return ElMessage.warning("截止时间不能小于起始时间");
    }

    const newKey = cwpjFormData.bqsj + "至" + cwpjFormData.sqsj;

    // 验证时间范围是否重复（排除当前编辑的记录）
    const isDuplicate = cwpjRangeList.value.some(
      (item) => item.key === newKey && item.key !== cwpjSelectRange.value,
    );
    if (isDuplicate) {
      return ElMessage.warning("该时间范围已存在，请选择其他时间");
    }

    if (cwpjSelectRange.value) {
      cwpjRangeList.value = cwpjRangeList.value.map((item) => {
        if (item.key === cwpjSelectRange.value) {
          cwpjSelectRange.value = newKey;
          return {
            bqsj: cwpjFormData.bqsj,
            sqsj: cwpjFormData.sqsj,
            key: newKey,
            tables: cwpjData.value,
          };
        } else {
          return {
            ...item,
          };
        }
      });
    } else {
      cwpjRangeList.value.push({
        bqsj: cwpjFormData.bqsj,
        sqsj: cwpjFormData.sqsj,
        key: newKey,
        tables: cwpjData.value,
      });
    }
    cwpjIsEdit.value = false;
    if (!cwpjSelectRange.value) {
      cwpjSelectRange.value = cwpjRangeList.value[0].key;
      cwpjData.value = cwpjRangeList.value[0].tables;
    } else {
      let selectData = cwpjRangeList.value.filter(
        (item) => item.key === cwpjSelectRange.value,
      );
      cwpjData.value = selectData.length ? selectData[0].tables : [];
    }
  } else {
    ElMessage.warning("请补充本期及上期时间");
  }
};
const cancelCwpj = () => {
  if (cwpjSelectRange.value) {
    cwpjData.value = cwpjRangeList.value[0].tables;
  } else if (formData.id) {
    cwpjData.value = [];
  } else {
    cwpjData.value = JSON.parse(JSON.stringify(cwpjDefaultData));
  }
  cwpjIsEdit.value = false;
};
const changeCwpjRange = (val) => {
  cwpjData.value = cwpjRangeList.value.filter(
    (item) => item.key === val,
  )[0].tables;
};
// 投资收益指标变化对比表
const tzsyData = ref([
  {
    pjzb: "项目全投资内部收益率",
  },
  {
    pjzb: "项目资本金内部收益率",
  },
  {
    pjzb: "社会资本方内部收益率",
  },
  {
    pjzb: "资本金综合内部收益率",
  },
  {
    pjzb: "静态投资回收期（年）",
  },
  {
    pjzb: "累计净现金流（亿元）",
  },
  {
    pjzb: "静态投资回收期（年）",
  },
  {
    pjzb: "累计净现金流（亿元）",
  },
  {
    pjzb: "现金流平衡年",
  },
  {
    pjzb: "盈亏平衡年",
  },
  {
    pjzb: "可供分配利润转正年",
  },
]);

const backClick = () => {
  router.back(-1);
};
const saveClick = () => {
  if (!formData.projectId) {
    return ElMessage.warning("请选择项目信息");
  }
  if (fyfxkzIsEdit.value) {
    return ElMessage.warning("请先保存正在添加的费用分项控制、阶段对比表");
  }
  if (cwpjIsEdit.value) {
    return ElMessage.warning(
      "请先保存正在添加的财务评价主要边界条件变化对比表",
    );
  }
  let url = formData.id ? "updateTzkz" : "createTzkz";
  let project = projectList.value.filter(
    (item) => item.id === formData.projectId,
  )[0];
  proxy.$post({
    url: "/api/project/" + url,
    data: {
      ...formData,
      projectName: project ? project.projectName : "",
      tzkztzekzs: rangeList.value,
      tzkzjcpfyjs: pfyjlsqkData.value,
      tzkzgqs: gqData.value,
      tzkzaqzlhbs: aqzlhbData.value,
      tzkzcwpjs: cwpjRangeList.value,
      tzkztzsys: tzsyData.value,
    },
    callback: (data) => {
      router.back(-1);
    },
  });
};
</script>

<style lang="less">
// 布局容器
.project-tab-content-wrapper {
  display: flex;
  gap: 20px;
  position: relative;
}

.tab-content {
  flex: 1;
  min-width: 0; // 防止flex子项溢出
}

.navigation-wrapper {
  flex-shrink: 0;
  width: auto;
  padding-left: 10px;
}

.fileCla {
  .el-form-item {
    display: block !important;

    .el-form-item__label {
      margin-bottom: 16px;
    }
  }
}
.add-project-header {
  margin-bottom: 10px;
}
</style>
