<template>
  <div class="add-project-container">
    <div class="add-project-content" v-loading="loading">
      <routerBack />

      <div class="tabs-content">
        <el-tabs v-model="pageActiveName" type="border-card">
          <el-tab-pane label="全生命周期责任书" name="全生命周期责任书">
            <div class="project-tab-content">
              <div class="tab-content">
                <el-form
                  :model="formData"
                  :label-width="130"
                  :disabled="isPreview"
                >
                  <el-collapse v-model="activeCollapse">
                    <el-collapse-item
                      title="责任书基本信息"
                      name="责任书基本信息"
                    >
                      <el-row :gutter="20">
                        <el-col :span="12">
                          <el-form-item label="责任书类型">
                            <el-tree-select
                              v-model="formData.zrslx"
                              :data="zrslxList"
                              node-key="key"
                              :props="zrslxProps"
                              placeholder="请选择"
                              render-after-expand
                              @node-click="changeZrslx"
                            >
                              <template #label>
                                <span>{{ selectedFullPath }}</span>
                              </template>
                            </el-tree-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <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="24">
                          <el-form-item label="责任书文件">
                            <el-upload
                              :action="
                                windowConfig.baseUrl + '/api/file/upload'
                              "
                              :headers="{ Authorization: token }"
                              :show-file-list="false"
                              multiple
                              :on-success="addZrsFile"
                            >
                              <el-button type="default">上传</el-button>
                            </el-upload>
                            <el-button
                              type="default"
                              @click="multiDeleteZrs"
                              :disabled="!zrsSelectIds.length"
                              >删除选中文件</el-button
                            >
                          </el-form-item>
                          <el-form-item label="">
                            <el-table
                              :data="zrsData"
                              style="width: 100%"
                              empty-text="暂无数据"
                              border
                              @selection-change="zrsSelectionChange"
                            >
                              <el-table-column type="selection" width="55" />
                              <el-table-column
                                prop="originalname"
                                label="文件名"
                              />
                              <el-table-column
                                prop="updatedAt"
                                label="上传时间"
                              >
                                <template #default="{ row, index }">
                                  <span>{{
                                    moment(row.updatedAt).format(
                                      "YYYY-MM-DD HH:mm:SS",
                                    )
                                  }}</span>
                                </template>
                              </el-table-column>
                              <el-table-column prop="size" label="大小">
                                <template #default="{ row }">
                                  <span>{{ row.size }} MB</span>
                                </template>
                              </el-table-column>

                              <el-table-column
                                fixed="right"
                                label="操作"
                                width="100"
                              >
                                <template #default="{ row, index }">
                                  <!-- 需要在查看表单disabled时保持允许下载 -->
                                  <span
                                    class="always-click"
                                    @click="downloadFile(row)"
                                    >下载</span
                                  >
                                  <el-button
                                    link
                                    type="danger"
                                    size="small"
                                    @click="deleteZrs(index)"
                                    >删除</el-button
                                  >
                                </template>
                              </el-table-column>
                            </el-table>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="项目名称">
                            <el-input v-model="formData.projectName" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="投资主体">
                            <el-input v-model="formData.tzzt" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="项目地点">
                            <el-input v-model="formData.xmdd" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="项目开工日期">
                            <el-date-picker
                              v-model="formData.xmkgrq"
                              type="date"
                              placeholder="请选择"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="项目实施期限">
                            <el-input-number
                              v-model="formData.xmssqx"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                            ></el-input-number>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="项目内容概述">
                            <el-input
                              v-model="formData.xmnrgs"
                              type="textarea"
                              :autosize="{ minRows: 2, maxRows: 5 }"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="项目经济指标概述">
                            <el-input
                              v-model="formData.xmjjzbgs"
                              type="textarea"
                              :autosize="{ minRows: 2, maxRows: 5 }"
                            />
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-collapse-item>
                    <el-collapse-item
                      title="责任书具体指标"
                      name="责任书具体指标"
                    >
                      <el-table
                        :data="zrsjtzbData"
                        style="width: 100%"
                        empty-text="暂无数据"
                        border
                        show-summary
                        :summary-method="getSummaries"
                      >
                        <el-table-column type="index" label="序号" width="60" />
                        <el-table-column prop="zbmc" label="指标名称" />
                        <el-table-column
                          prop="zbmbz"
                          label="指标目标值"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.zbmbz"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="khjzf"
                          label="考核基准分"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.khjzf"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="sfsy"
                          label="是否适用"
                          width="90"
                        >
                          <template #default="scope">
                            <el-switch
                              v-model="scope.row.sfsy"
                              inline-prompt
                              active-value="1"
                              active-text="是"
                              inactive-value="2"
                              inactive-text="否"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column prop="khsm" label="考核说明">
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.khsm"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-collapse-item>
                    <el-collapse-item
                      title="批复意见落实情况"
                      name="批复意见落实情况"
                    >
                      <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="lx" label="类型">
                          <template #default="scope">
                            <el-select
                              v-model="scope.row.lx"
                              placeholder="请选择"
                              no-data-text="暂无数据"
                            >
                              <el-option
                                v-for="item in pfyjlxList"
                                :key="item.key"
                                :label="item.name"
                                :value="item.key"
                              ></el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <el-table-column prop="pfyj" label="批复意见">
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.pfyj"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column prop="jzf" label="基准分">
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.jzf"
                              :min="0"
                              :max="99999999999.99999999"
                              controls-position="right"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column prop="lsqk" label="落实情况">
                          <template #default="scope">
                            <el-select
                              v-model="scope.row.lsqk"
                              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="lssj" label="落实时间">
                          <template #default="scope">
                            <el-date-picker
                              v-model="scope.row.lssj"
                              type="datetime"
                              placeholder="请选择"
                              value-format="YYYY-MM-DD HH:mm:ss"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="lsqkjtsm"
                          label="落实情况具体说明"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.lsqkjtsm"
                              type="textarea"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column label="操作" width="60">
                          <template #default="scope">
                            <el-button
                              link
                              type="danger"
                              size="small"
                              @click="deletePfyjlsqk(scope.$index)"
                              >删除</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-collapse-item>
                  </el-collapse>
                </el-form>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="全生命周期管理策划" name="全生命周期管理策划">
            <div class="project-tab-content">
              <div class="tab-content">
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="策划文件">
                      <el-upload
                        :action="windowConfig.baseUrl + '/api/file/upload'"
                        :headers="{ Authorization: token }"
                        :show-file-list="false"
                        multiple
                        :disabled="isPreview"
                        :on-success="addChwjFile"
                      >
                        <el-button :disabled="isPreview" type="default"
                          >上传</el-button
                        >
                      </el-upload>
                      <el-button
                        type="default"
                        @click="multiDeleteChwj"
                        :disabled="!chwjSelectIds.length"
                        >删除选中文件</el-button
                      >
                    </el-form-item>
                    <el-form-item label="">
                      <el-table
                        :data="chwjData"
                        style="width: 100%"
                        empty-text="暂无数据"
                        border
                        @selection-change="chwjSelectionChange"
                      >
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="originalname" label="文件名" />
                        <el-table-column prop="updatedAt" label="上传时间">
                          <template #default="{ row, index }">
                            <span>{{
                              moment(row.updatedAt).format(
                                "YYYY-MM-DD HH:mm:SS",
                              )
                            }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column prop="size" label="大小">
                          <template #default="{ row }">
                            <span>{{ row.size }} MB</span>
                          </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                          <template #default="{ row, index }">
                            <!-- 需要在查看表单disabled时保持允许下载 -->
                            <span
                              class="always-click"
                              @click="downloadFile(row)"
                              >下载</span
                            >
                            <el-button
                              link
                              type="danger"
                              size="small"
                              @click="deleteChwj(index)"
                              >删除</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="年度经营管理责任书" name="年度经营管理责任书">
            <div class="project-tab-content">
              <div class="tab-content">
                <el-form
                  :model="formData"
                  :label-width="180"
                  :disabled="isPreview"
                >
                  <el-collapse v-model="ndActiveCollapse">
                    <!-- 基本信息 -->
                    <el-collapse-item title="基本信息" name="基本信息">
                      <el-row :gutter="20">
                        <el-col :span="12">
                          <el-form-item label="项目名称">
                            <el-input v-model="formData.nd_xmxx_projectName" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="决策主体">
                            <el-input v-model="formData.nd_xmxx_jczt" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="监管单位">
                            <el-select
                              v-model="formData.nd_xmxx_jgdw"
                              placeholder="请选择"
                              clearable
                            >
                              <el-option
                                v-for="item in jgdwList"
                                :key="item.key"
                                :label="item.name"
                                :value="item.key"
                              />
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="签订单位">
                            <el-select
                              v-model="formData.nd_xmxx_qddw"
                              placeholder="请选择"
                              clearable
                            >
                              <el-option
                                v-for="item in qddwList"
                                :key="item.key"
                                :label="item.name"
                                :value="item.key"
                              />
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="投资主体">
                            <el-input v-model="formData.nd_xmxx_tzzt" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="项目地点">
                            <el-input v-model="formData.nd_xmxx_xmdd" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="建设期(月份)">
                            <el-input-number
                              v-model="formData.nd_xmxx_jsq"
                              :min="0"
                              controls-position="right"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="项目投产时间">
                            <el-date-picker
                              v-model="formData.nd_xmxx_xmccsj"
                              type="date"
                              placeholder="请选择"
                              value-format="YYYY-MM-DD"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="运营期">
                            <el-input-number
                              v-model="formData.nd_xmxx_yyq"
                              :min="0"
                              controls-position="right"
                            />
                            <span style="margin-left: 5px">年</span>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="计划竣工时间">
                            <el-date-picker
                              v-model="formData.nd_xmxx_jhgcsj"
                              type="date"
                              placeholder="请选择"
                              value-format="YYYY-MM-DD"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="决策时间">
                            <el-date-picker
                              v-model="formData.nd_xmxx_jcsj"
                              type="date"
                              placeholder="请选择"
                              value-format="YYYY-MM-DD"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="24">
                          <el-form-item label="项目内容">
                            <el-input
                              v-model="formData.nd_xmxx_xmnr"
                              type="textarea"
                              :autosize="{ minRows: 3, maxRows: 6 }"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="24">
                          <el-form-item label="项目主要方案内容">
                            <el-input
                              v-model="formData.nd_xmxx_xmzyfanr"
                              type="textarea"
                              :autosize="{ minRows: 2, maxRows: 5 }"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="全投资财务内部收益率%（税前）">
                            <el-input-number
                              v-model="formData.nd_xmxx_qtzwsyln"
                              :min="0"
                              :max="100"
                              :precision="2"
                              controls-position="right"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="资本金财务内部收益率%（税后）">
                            <el-input-number
                              v-model="formData.nd_xmxx_zjbwsylh"
                              :min="0"
                              :max="100"
                              :precision="2"
                              controls-position="right"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="签订日期">
                            <el-date-picker
                              v-model="formData.nd_xmxx_qdrq"
                              type="date"
                              placeholder="请选择"
                              value-format="YYYY-MM-DD"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="填报人">
                            <el-input v-model="formData.nd_xmxx_tbr" />
                          </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="项目总投资(万元)">
                            <el-input-number
                              v-model="formData.xmztz"
                              :min="0"
                              :precision="2"
                              controls-position="right"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="建安费(万元)">
                            <el-input-number
                              v-model="formData.jaf"
                              :min="0"
                              :precision="2"
                              controls-position="right"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="设备及工具购置费(万元)">
                            <el-input-number
                              v-model="formData.sbjgjgzf"
                              :min="0"
                              :precision="2"
                              controls-position="right"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="土地相关费用(万元)">
                            <el-input-number
                              v-model="formData.tdxgfy"
                              :min="0"
                              :precision="2"
                              controls-position="right"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="建设单位管理费(万元)">
                            <el-input-number
                              v-model="formData.jsdwglf"
                              :min="0"
                              :precision="2"
                              controls-position="right"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="其他建设项目管理费(万元)">
                            <el-input-number
                              v-model="formData.qtjsxmglf"
                              :min="0"
                              :precision="2"
                              controls-position="right"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="其他费用(万元)">
                            <el-input-number
                              v-model="formData.qtfy"
                              :min="0"
                              :precision="2"
                              controls-position="right"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="能建方建安费(万元)">
                            <el-input-number
                              v-model="formData.njfjaf"
                              :min="0"
                              :precision="2"
                              controls-position="right"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="建设期利息(万元)">
                            <el-input-number
                              v-model="formData.jsqlx"
                              :min="0"
                              :precision="2"
                              controls-position="right"
                            />
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-collapse-item>

                    <!-- 运营期目标责任书 -->
                    <el-collapse-item
                      title="运营期目标责任书"
                      name="运营期目标责任书"
                    >
                      <div class="collapse-title">投融资与运营指标（万元）</div>
                      <div class="tab-handle" style="margin-bottom: 10px">
                        <el-button
                          type="primary"
                          size="small"
                          @click="addTrzRow"
                          >新增指标</el-button
                        >
                      </div>
                      <el-table
                        :data="trzData"
                        style="width: 100%"
                        empty-text="暂无数据"
                        border
                      >
                        <el-table-column type="index" label="序号" width="60" />
                        <el-table-column
                          prop="zbmc"
                          label="指标名称"
                          width="260"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.zbmc"
                              placeholder="请输入指标名称"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="sfkh"
                          label="是否考核"
                          width="100"
                        >
                          <template #default="scope">
                            <el-select
                              v-model="scope.row.sfkh"
                              placeholder="请选择"
                            >
                              <el-option label="是" value="1" />
                              <el-option label="否" value="2" />
                            </el-select>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="zrmzb"
                          label="责任目标值"
                          width="140"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.zrmzb"
                              :min="0"
                              :precision="2"
                              controls-position="right"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="khjzf"
                          label="考核基准分"
                          width="120"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.khjzf"
                              :min="0"
                              :precision="2"
                              controls-position="right"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column prop="jfxz" label="计分细则">
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.jfxz"
                              type="textarea"
                              :autosize="{ minRows: 2, maxRows: 4 }"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80" fixed="right">
                          <template #default="scope">
                            <el-button
                              link
                              type="danger"
                              size="small"
                              @click="deleteTrzRow(scope.$index)"
                              >删除</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-collapse-item>

                    <!-- 其他对项目决策与实施有颠覆性影响的边界条件 -->
                    <el-collapse-item
                      title="其他对项目决策与实施有颠覆性影响的边界条件"
                      name="边界条件"
                    >
                      <div class="tab-handle" style="margin-bottom: 10px">
                        <el-button
                          type="primary"
                          size="small"
                          @click="addBjtjRow"
                          >新增</el-button
                        >
                      </div>
                      <el-table
                        :data="bjtjData"
                        style="width: 100%"
                        empty-text="暂无数据"
                        border
                      >
                        <el-table-column type="index" label="序号" width="60" />
                        <el-table-column prop="zbmc" label="指标名称">
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.zbmc"
                              placeholder="请输入指标名称"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="khjzf"
                          label="考核基准分"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.khjzf"
                              :min="0"
                              :precision="2"
                              controls-position="right"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column prop="jfxz" label="计分细则">
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.jfxz"
                              type="textarea"
                              :autosize="{ minRows: 2, maxRows: 4 }"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80" fixed="right">
                          <template #default="scope">
                            <el-button
                              link
                              type="danger"
                              size="small"
                              @click="deleteBjtjRow(scope.$index)"
                              >删除</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-collapse-item>

                    <!-- 项目实施过程中其他提高项目投资收益或带动公司市场开拓的情况 -->
                    <el-collapse-item
                      title="项目实施过程中其他提高项目投资收益或带动公司市场开拓的情况"
                      name="市场开拓"
                    >
                      <div class="tab-handle" style="margin-bottom: 10px">
                        <el-button
                          type="primary"
                          size="small"
                          @click="addScktRow"
                          >新增</el-button
                        >
                      </div>
                      <el-table
                        :data="scktData"
                        style="width: 100%"
                        empty-text="暂无数据"
                        border
                      >
                        <el-table-column type="index" label="序号" width="60" />
                        <el-table-column prop="zbmc" label="指标名称">
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.zbmc"
                              placeholder="请输入指标名称"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="khjzf"
                          label="考核基准分"
                          width="180"
                        >
                          <template #default="scope">
                            <el-input-number
                              v-model="scope.row.khjzf"
                              :min="0"
                              :precision="2"
                              controls-position="right"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column prop="jfxz" label="计分细则">
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.jfxz"
                              type="textarea"
                              :autosize="{ minRows: 2, maxRows: 4 }"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80" fixed="right">
                          <template #default="scope">
                            <el-button
                              link
                              type="danger"
                              size="small"
                              @click="deleteScktRow(scope.$index)"
                              >删除</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                    </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.nd_qdxx_qdzt"
                              placeholder="请选择"
                              clearable
                            >
                              <el-option
                                v-for="item in qdztList"
                                :key="item.key"
                                :label="item.name"
                                :value="item.key"
                              />
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="是否按时签订">
                            <el-radio-group v-model="formData.nd_qdxx_sfasqd">
                              <el-radio label="1">是</el-radio>
                              <el-radio label="2">否</el-radio>
                            </el-radio-group>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="签订单位">
                            <el-input v-model="formData.nd_qdxx_qddw" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="24">
                          <el-form-item
                            label="已盖章签字的运营阶段目标责任书附件"
                          >
                            <el-upload
                              :action="
                                windowConfig.baseUrl + '/api/file/upload'
                              "
                              :headers="{ Authorization: token }"
                              :show-file-list="false"
                              multiple
                              :on-success="addQdfjFile"
                            >
                              <el-button type="default">上传</el-button>
                            </el-upload>
                            <el-button
                              type="default"
                              @click="multiDeleteQdfj"
                              :disabled="!qdfjSelectIds.length"
                              >删除选中文件</el-button
                            >
                          </el-form-item>
                          <el-form-item label="">
                            <el-table
                              :data="qdfjData"
                              style="width: 100%"
                              empty-text="暂无数据"
                              border
                              @selection-change="qdfjSelectionChange"
                            >
                              <el-table-column type="selection" width="55" />
                              <el-table-column
                                prop="originalname"
                                label="文件名"
                              />
                              <el-table-column
                                prop="updatedAt"
                                label="上传时间"
                              >
                                <template #default="{ row }">
                                  <span>{{
                                    moment(row.updatedAt).format(
                                      "YYYY-MM-DD HH:mm:SS",
                                    )
                                  }}</span>
                                </template>
                              </el-table-column>
                              <el-table-column prop="size" label="大小">
                                <template #default="{ row }">
                                  <span>{{ row.size }} MB</span>
                                </template>
                              </el-table-column>
                              <el-table-column
                                fixed="right"
                                label="操作"
                                width="100"
                              >
                                <template #default="{ row, index }">
                                  <span
                                    class="always-click"
                                    @click="downloadFile(row)"
                                    >下载</span
                                  >
                                  <el-button
                                    link
                                    type="danger"
                                    size="small"
                                    @click="deleteQdfj(index)"
                                    >删除</el-button
                                  >
                                </template>
                              </el-table-column>
                            </el-table>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-collapse-item>
                  </el-collapse>
                </el-form>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </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, h, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const pageActiveName = ref("全生命周期责任书");
let token = ref("");
token.value = userStore.authToken || sessionStorage.getItem("authToken") || "";
import routerBack from "@/components/common/routerBack.vue";

const activeCollapse = reactive([
  "责任书基本信息",
  "责任书具体指标",
  "批复意见落实情况",
]);
const ndActiveCollapse = reactive([
  "基本信息",
  "造价信息",
  "运营期目标责任书",
  "签订信息",
]);
let formData = reactive({});
let loading = ref(false);
// 责任书类型
let zrslxList = reactive([]);
let zrslxProps = {
  label: "name",
};
let selectedFullPath = ref(""); //已选项的全路径名称
watch(
  () => formData.zrslx,
  (newVal) => {
    if (newVal) {
      selectedFullPath.value = getFullPathById(newVal);
    } else {
      selectedFullPath.value = "";
    }
  },
);
// 构建节点映射表
const nodeMap = new Map();
let buildNodeMap;
const getFullPathById = (id) => {
  const node = nodeMap.get(id);
  if (!node) return "";

  const path = [];
  let current = node;

  while (current) {
    path.unshift(current.name);
    current = current.parent;
  }

  return path.join(" / ");
};
// 项目列表
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;
    },
  });
};
// 批复意见落实情况
let pfyjlxList = reactive([]);
let lsqkList = reactive([]);
let pfyjlsqkData = ref([]);
// 年度经营管理责任书相关数据
let jgdwList = reactive([]);
let qddwList = reactive([]);
let qdztList = reactive([]);
let trzData = ref([]);
let bjtjData = ref([]);
let scktData = ref([]);
let qdfjData = ref([]);
let qdfjSelectIds = ref([]);
const addPfyjlsqk = () => {
  pfyjlsqkData.value.push({});
};
const deletePfyjlsqk = (index) => {
  ElMessageBox.confirm("确认删除该项？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    pfyjlsqkData.value.splice(index, 1);
  });
};

let isPreview = !!route.query.isPreview;
let statementId = route.query.statementId;
// 查看编辑详情
const getStatementInfo = () => {
  loading.value = true;
  proxy.$post({
    url: "/api/project/getTzmbzrsInfo",
    data: {
      id: statementId,
    },
    callback: (res) => {
      loading.value = false;
      Object.assign(formData, res);
      Object.assign(zrsData.value, res.zrswj);
      Object.assign(
        zrsjtzbData.value,
        res.tzmbzrsZbs.map((item) => {
          return {
            ...item,
            sfsy: item.sfsy && item.sfsy.toString(),
          };
        }),
      );
      Object.assign(chwjData.value, res.chwj);
      Object.assign(jyglzrsData.value, res.tzmbzrsNds);
      Object.assign(pfyjlsqkData.value, res.tzmbzrsPfyjs);
      // 年度经营管理责任书数据
      Object.assign(trzData.value, res.ndTrz || []);
      Object.assign(bjtjData.value, res.ndBjtj || []);
      Object.assign(scktData.value, res.ndSckt || []);
      Object.assign(qdfjData.value, res.ndQdfj || []);
    },
  });
};
onMounted(() => {
  getProjectData();
  let resourceData = JSON.parse(sessionStorage.getItem("resourceData"));
  zrslxList = resourceData.level;
  pfyjlxList = resourceData.ssjd;
  lsqkList = resourceData.lszxqk;
  // 年度经营管理责任书相关字典
  jgdwList = resourceData.jgdw || [];
  qddwList = resourceData.qddw || [];
  qdztList = resourceData.qdzt || [];

  statementId && getStatementInfo();
  buildNodeMap = (nodes, parent = null) => {
    nodes.forEach((node) => {
      node.parent = parent;
      nodeMap.set(node.key, node);
      if (node.children && node.children.length > 0) {
        buildNodeMap(node.children, node);
      }
    });
  };
  // 初始化构建映射
  buildNodeMap(zrslxList);
});
// 选择关联项目，同步相关字段信息
const changeProject = (val) => {
  let selectData = projectList.value.filter((item) => item.id === val)[0];
  if (selectData) {
    formData.projectName = selectData.projectName;
    formData.tzzt = selectData.tzzt;
  }
};

// 责任书文件
let zrsData = ref([]);
const addZrsFile = (res, file) => {
  zrsData.value.push(res.data);
};
const deleteZrs = (index) => {
  ElMessageBox.confirm("确认删除该项？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      zrsData.value.splice(index, 1);
    })
    .catch(() => {});
};
let zrsSelectIds = ref([]);
const zrsSelectionChange = (datas) => {
  zrsSelectIds.value = datas.map((item) => item.id);
};
const multiDeleteZrs = () => {
  ElMessageBox.confirm("确认删除选中数据？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      zrsData.value = zrsData.value.filter(
        (item) => !zrsSelectIds.value.includes(item.id),
      );
    })
    .catch(() => {});
};
// 责任书具体指标
let zrsjtzbData = ref([]);
let qsmzqZrs = [
  {
    xh: "1",
    zbmc: "项目总投资(亿元)",
  },
  {
    xh: "1.1",
    zbmc: "建安费用(亿元)",
  },
  {
    xh: "2",
    zbmc: "项目带动工程收益(亿元)",
  },
  {
    xh: "2.1",
    zbmc: "工程收益率(%)",
  },
  {
    xh: "3",
    zbmc: "政府补助资金到位(亿元)",
  },
  {
    xh: "4",
    zbmc: "我方资本金投入(亿元)",
  },
  {
    xh: "5",
    zbmc: "我方负责引入的股权融资(亿元)",
  },
  {
    xh: "6",
    zbmc: "项目融资额(亿元)",
  },
  {
    xh: "6.1",
    zbmc: "融资利率(%)",
  },
  {
    xh: "7",
    zbmc: "项目实现营业收入累计(亿元)",
  },
  {
    xh: "8",
    zbmc: "项目经营净现金流累计(亿元)",
  },
  {
    xh: "9",
    zbmc: "项目全投资财务内部收益率（税前）(%)",
  },
  {
    xh: "10",
    zbmc: "项目资本金财务内部收益率(%)",
  },
  {
    xh: "11",
    zbmc: "项目竣工投产时间(年月)",
  },
];
let jsqZrs = [
  {
    xh: "1",
    zbmc: "项目总投资 (亿元)",
  },
  {
    xh: "1.1",
    zbmc: "建安费用(亿元)",
  },
  {
    xh: "2",
    zbmc: "项目带动工程收益 (亿元)",
  },
  {
    xh: "2.1",
    zbmc: "工程收益率(%)",
  },
  {
    xh: "3",
    zbmc: "建设期政府补助资金(亿元)",
  },
  {
    xh: "4",
    zbmc: "我方资本金投入(亿元)",
  },
  {
    xh: "5",
    zbmc: "我方负责引入的股权融资(亿元)",
  },
  {
    xh: "5.1",
    zbmc: "股权融资成本(%)",
  },
  {
    xh: "6",
    zbmc: "项目建设期融资额(亿元)",
  },
  {
    xh: "6.1",
    zbmc: "融资利率(%)",
  },
  {
    xh: "7",
    zbmc: "项目全投资财务内部收益率（税前）(%)",
  },
  {
    xh: "8",
    zbmc: "项目资本金财务内部收益率(%)",
  },
  {
    xh: "9",
    zbmc: "项目竣工投产时间(年月)",
  },
];
let yyqZrs = [
  {
    xh: "1",
    zbmc: "运营期政府补助资金到位(亿元)",
  },
  {
    xh: "2",
    zbmc: "项目运营期融资额(亿元)",
  },
  {
    xh: "2.1",
    zbmc: "融资利率(%)",
  },
  {
    xh: "3",
    zbmc: "项目实现营业收入累计(亿元)",
  },
  {
    xh: "3.1",
    zbmc: "利润总额累计(亿元)",
  },
  {
    xh: "4",
    zbmc: "项目经营净现金流累计(亿元)",
  },
  {
    xh: "5",
    zbmc: "项目全投资财务内部收益率（税前）(%)",
  },
  {
    xh: "6",
    zbmc: "项目资本金财务内部收益率(%)",
  },
];
let ndZrs = [
  {
    xh: "1",
    zbmc: "本年度完成投资(亿元)",
  },
  {
    xh: "1.1",
    zbmc: "建安费用(亿元)",
  },
  {
    xh: "1.2",
    zbmc: "项目征地拆迁费(亿元)",
  },
  {
    xh: "2",
    zbmc: "本年度工程收益(亿元)",
  },
  {
    xh: "2.1",
    zbmc: "工程收益率(%)",
  },
  {
    xh: "3",
    zbmc: "本年度政府补助资金(亿元)",
  },
  {
    xh: "4",
    zbmc: "本年度我方资本金投入(亿元)",
  },
  {
    xh: "5",
    zbmc: "本年度我方负责引入的股权融资(亿元)",
  },
  {
    xh: "5.1",
    zbmc: "股权融资成本(%)",
  },
  {
    xh: "6",
    zbmc: "本年度项目融资额(亿元)",
  },
  {
    xh: "6.1",
    zbmc: "融资利率(%)",
  },
  {
    xh: "7",
    zbmc: "本年度投资项目实现营业收入(亿元)",
  },
  {
    xh: "8",
    zbmc: "本年度项目经营净现金流(亿元)",
  },
  {
    xh: "9",
    zbmc: "项目全投资财务内部收益率（税前）(%)",
  },
  {
    xh: "10",
    zbmc: "项目资本金财务内部收益率(%)",
  },
];
// 选择责任书类型，同步切换责任书具体指标数据
const changeZrslx = (data) => {
  if (!data.children || !data.children.length) {
    // 点击到最内层子节点
    if (data.name.indexOf("年度") != -1) {
      zrsjtzbData.value = ndZrs;
    } else if (data.name.indexOf("建设") != -1) {
      zrsjtzbData.value = jsqZrs;
    } else if (data.name.indexOf("运营") != -1) {
      zrsjtzbData.value = yyqZrs;
    } else {
      zrsjtzbData.value = qsmzqZrs;
    }
  }
};
const getSummaries = (param) => {
  const { columns, data } = param;
  let sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[0] = h("div", "合计");
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (["khjzf"].includes(column.property)) {
      sums[index] = `${values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!Number.isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0)}`;
    } else {
      sums[index] = "";
    }
  });
  return sums;
};
// 策划文件
let chwjData = ref([]);
const addChwjFile = (res, file) => {
  chwjData.value.push(res.data);
};
const deleteChwj = (index) => {
  ElMessageBox.confirm("确认删除该项？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      chwjData.value.splice(index, 1);
    })
    .catch(() => {});
};
let chwjSelectIds = ref([]);
const chwjSelectionChange = (datas) => {
  chwjSelectIds.value = datas.map((item) => item.id);
};
const multiDeleteChwj = () => {
  ElMessageBox.confirm("确认删除选中数据？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      chwjData.value = chwjData.value.filter(
        (item) => !chwjSelectIds.value.includes(item.id),
      );
    })
    .catch(() => {});
};
// 经营管理责任书
let jyglzrsData = ref([]);
const addJyglzrs = () => {
  jyglzrsData.value.push({});
};
const deleteJyglzrs = (index) => {
  jyglzrsData.value.splice(index, 1);
};
const addJyglzrsFile = (res, file, row) => {
  row.jyglzrs = {};
  Object.assign(row.jyglzrs, res.data);
};
const deleteRowFile = (row, index) => {
  let { jyglzrs, ...data } = row;
  jyglzrsData.value[index] = data;
};
// 投融资与运营指标
const addTrzRow = () => {
  trzData.value.push({
    zbmc: "",
    sfkh: "1",
    zrmzb: 0,
    khjzf: 0,
    jfxz: "",
  });
};
const deleteTrzRow = (index) => {
  ElMessageBox.confirm("确认删除该项？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      trzData.value.splice(index, 1);
    })
    .catch(() => {});
};
// 边界条件
const addBjtjRow = () => {
  bjtjData.value.push({
    zbmc: "",
    khjzf: 0,
    jfxz: "",
  });
};
const deleteBjtjRow = (index) => {
  ElMessageBox.confirm("确认删除该项？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      bjtjData.value.splice(index, 1);
    })
    .catch(() => {});
};
// 市场开拓
const addScktRow = () => {
  scktData.value.push({
    zbmc: "",
    khjzf: 0,
    jfxz: "",
  });
};
const deleteScktRow = (index) => {
  ElMessageBox.confirm("确认删除该项？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      scktData.value.splice(index, 1);
    })
    .catch(() => {});
};
// 签订附件
const addQdfjFile = (res, file) => {
  qdfjData.value.push(res.data);
};
const deleteQdfj = (index) => {
  ElMessageBox.confirm("确认删除该项？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      qdfjData.value.splice(index, 1);
    })
    .catch(() => {});
};
const qdfjSelectionChange = (datas) => {
  qdfjSelectIds.value = datas.map((item) => item.id);
};
const multiDeleteQdfj = () => {
  ElMessageBox.confirm("确认删除选中数据？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      qdfjData.value = qdfjData.value.filter(
        (item) => !qdfjSelectIds.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 backClick = () => {
  router.back(-1);
};
const saveClick = () => {
  if (formData.projectId) {
    let url = formData.id ? "updateTzmbzrs" : "createTzmbzrs";
    proxy.$post({
      url: "/api/project/" + url,
      data: {
        ...formData,
        zrswj: zrsData.value,
        tzmbzrsZbs: zrsjtzbData.value,
        chwj: chwjData.value,
        tzmbzrsNds: jyglzrsData.value,
        tzmbzrsPfyjs: pfyjlsqkData.value,
        // 年度经营管理责任书相关数据
        ndTrz: trzData.value,
        ndBjtj: bjtjData.value,
        ndSckt: scktData.value,
        ndQdfj: qdfjData.value,
      },
      callback: (data) => {
        router.back(-1);
      },
    });
  } else {
    ElMessage.warning("请选择项目信息");
  }
};
</script>

<style lang="less">
.add-project-header {
  margin-bottom: 10px;
}
.collapse-title {
  font-size: 14px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: 3px solid #409eff;
}
.always-click {
  color: #409eff;
  cursor: pointer;
  margin-right: 10px;
  &:hover {
    text-decoration: underline;
  }
}
.tab-handle {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
