<template>
  <div>
    <div class="headers">
      <div class="headers-left">
        <div class="imgs">
          <img v-if="enterpriseLogo" :src="enterpriseLogo" alt="企业LOGO" class="enterprise-logo-img" />
        </div>
        <div class="img-right">
          <div class="name-title">微育科技</div>
          <div class="right-name" style="position: relative;top: 0.5px;">数智科创 · 通达未来 </div>
        </div>
      </div>
      <div class="headers-right">
        <div class="rights" @click="btnShng">
            <div class="rights-names" style="color: #5165f7;">
            上一页 &lt;  <span style="color:#4D4D4E;margin-left:8px;">{{ projectName || '项目详情' }}</span>
          </div>
        </div>

      </div>
    </div>

    <div class="areas">
      <div style="width: 222px;">
        <div class="lefts">
          <div class="left-content">
            <div class="left-img">
              <img src="@/assets/resource/ziliao.png" alt="">
            </div>
            <div class="right-name">
              <span class="ziliao">资料完整度</span>
              <span class="dushu">38%</span>
            </div>
          </div>
          <div class="content-area">
            <div class="area-name" v-for="(item, index) in listDate" :key="index" @click="btnActive(index)">
              <div class="yuan" :class="{ 'active2': active2 == index }"></div>
              <span class="namess" :class="{ 'active': active == index }">{{ item.name }}</span>
              <span class="fanhui" v-show="active == index"><i class="el-icon-arrow-right"></i></span>
            </div>

          </div>
        </div>
      </div>
      <div class="area-right">
        <div class="area-rights" id="basic-info">
          <div class="neirongs">
            <div class="zong">
              <div class="shu"></div>
              <span class="jib">基本情况</span>
            </div>
            <div class="table-area">
               <div>
                <div class="headerss">
                <div class="jiben">情况概述</div>
                <div><el-button class="bianji" type="primary" size="mini" @click="btnqingkuang">编辑</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date" label="项目代号" width="180" align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="立项时间" width="180" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="项目名称" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="项目类型" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="项目起至时间" align="center">
                  </el-table-column>
                </el-table>

              </div>
               </div>
               <div style="margin-top: 12px;">
                <div class="headerss">
                <div class="jiben">技术领域和来源</div>
                <div><el-button class="bianji" type="primary" size="mini" @click="btnJishu">编辑</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table
                  :data="tableData"
                  :header-cell-style="hideNestedHeaders"
                  border
                  style="width: 100%"
                >
                  <el-table-column prop="date" label="技术领域" width="180" align="center">
                    <el-table-column prop="name" label="立项时间" width="180" align="center"></el-table-column>
                    <el-table-column prop="address" label="项目名称" align="center"></el-table-column>
                    <el-table-column prop="address" label="项目类型" align="center"></el-table-column>
                  </el-table-column>
                  <el-table-column prop="address" label="技术来源" align="center"></el-table-column>
                </el-table>

              </div>
               </div>
            </div>
          
          </div>
        </div>
        <div class="area-rights" id="project-info">
          <div class="neirongs">
            <div class="zong">
              <div class="shu"></div>
              <span class="jib">立项情况</span>
            </div>
            <div class="table-area">
               <div>
                <div class="headerss">
                <div class="jiben">立项阶段资料</div>
                <div><el-button class="bianji" @click="btnLixiangziliao"  type="primary" size="mini" >添加上传</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table :data="documentList" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column type="index" label="序号" width="80" align="center" :index="getDocumentIndex">
                  </el-table-column>
                  <el-table-column prop="document_name" label="资料名称" width="380" align="center">
                  </el-table-column>
                  <el-table-column prop="effective_date" label="生效（发布）日期" width="180" align="center">
                    <template slot-scope="scope">
                      {{ formatDate(scope.row.effective_date) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="publisher" label="发布单位或部门" align="center">
                  </el-table-column>
                  <el-table-column prop="remark" label="备注" align="center">
                  </el-table-column>
                  <el-table-column label="操作" width="80" align="center">
                    <template slot-scope="scope">
                      <el-button @click="handleEditDocument(scope.row)" type="text" size="small" style="color: #5165f7;">详情</el-button>
                      
                    </template>
                  </el-table-column>
                </el-table>

              </div>
               </div>
               <div>
                <div class="headerss">
                <div class="jiben">投资预算</div>
                <div><el-button class="bianji" @click="btnTouziyusuanEdit"  type="primary" size="mini" >编辑</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table :data="[...tableData, ...investmentBudgetData]" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date2" label="计划投资总额(元)" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="其中" width="380" align="center">
                    <el-table-column prop="date2" label="自筹经费 (元)" align="center">
                    </el-table-column>
                    <el-table-column prop="date2" label="科技经费(元) " align="center">
                    </el-table-column>
                    <el-table-column prop="date2" label="其他拨款(元)" align="center">
                    </el-table-column>
                  </el-table-column>
                 
                  <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                     
                      <el-button v-if="scope.row.type === 'investment'" @click="btnTouziyusuanDetail" type="text" size="small" style="color: #5165f7;">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>

              </div>
               </div>
               <div style="margin-top: 12px;">
                <div class="headerss">
                <div class="jiben">立项预算｜{{ totalBudgetAmount }}（元）</div>
                <div><el-button class="bianji" @click="btnLiyusuan" type="primary" size="mini" >编辑</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table :data="budgetList" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column type="index" label="序号" width="80" align="center" :index="getBudgetIndex">
                  </el-table-column>
                  <el-table-column prop="budget_item" label="预算项" width="380" align="center">
                  </el-table-column>
                  <el-table-column prop="budget_amount" label="预算金额（元）" width="180" align="center">
                    <template slot-scope="scope">
                      {{ formatAmount(scope.row.budget_amount) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="cost_control_amount" label="成本控制额（元）" align="center">
                    <template slot-scope="scope">
                      {{ formatAmount(scope.row.cost_control_amount) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="remark" label="备注" align="center">
                  </el-table-column>
                  
                </el-table>

              </div>
               </div>
               <div style="margin-top: 12px;">
                <div class="headerss">
                <div class="jiben">任务清单</div>
                <div><el-button class="bianji" @click="btnRen" type="primary" size="mini" >编辑</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table :data="taskList" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column type="index" label="序号" width="80" align="center" :index="getTaskIndex">
                  </el-table-column>
                  <el-table-column prop="task_item" label="任务项" width="380" align="center">
                  </el-table-column>
                  <el-table-column prop="quantity" label="数量" width="180" align="center">
                  </el-table-column>
                  <el-table-column prop="expected_completion_date" label="预计完成时间" align="center">
                    <template slot-scope="scope">
                      {{ formatDate(scope.row.expected_completion_date) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="remark" label="备注" align="center">
                  </el-table-column>
                  
                </el-table>

              </div>
               </div>
            </div>
          
          </div>
        </div>
        <div class="area-rights" id="project-members">
          <div class="neirongs">
            <div class="zong">
              <div class="shu"></div>
              <span class="jib">项目人员</span>
            </div>
            <div class="table-area">
               <div>
                <div class="headerss">
                <div class="jiben">成员明细  
                  <el-tooltip class="item" effect="dark" content="成员明细" placement="top-start">
                    <i  class="el-icon-info" style="color: #D6D8EA;margin-left: 9px;"></i>
                </el-tooltip>
                
                </div>
                <div><el-button class="bianji" @click="btnCheng" type="primary" size="mini" >编辑</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table :data="memberList" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column type="index" label="序号" width="80" align="center" :index="getMemberIndex">
                  </el-table-column>
                  <el-table-column prop="name" label="姓名"  align="center">
                  </el-table-column>
                  <el-table-column prop="role" label="项目角色"  align="center">
                  </el-table-column>
                  <el-table-column prop="specialization" label="专业分工" align="center">
                  </el-table-column>
                  <el-table-column prop="join_date" label="进入项目日期" align="center">
                    <template slot-scope="scope">
                      {{ formatDate(scope.row.join_date) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="leave_date" label="离开项目日期" align="center">
                    <template slot-scope="scope">
                      {{ formatDate(scope.row.leave_date) }}
                    </template>
                  </el-table-column>
                  <el-table-column label="累计工时（天）" align="center">
                    <template slot-scope="scope">
                      {{ calculateWorkDays(scope.row.join_date, scope.row.leave_date) }}
                    </template>
                  </el-table-column>
                </el-table>

              </div>
               </div>
              
            </div>
          
          </div>
        </div>
        <div class="area-rights" id="contract-manage">
          <div class="neirongs">
            <div class="zong">
              <div class="shu"></div>
              <span class="jib">合同管理</span>
            </div>
            <div class="table-area">
               <div>
                <div class="headerss">
                <div class="jiben">合同明细  
                
                
                </div>
                <div class="rightsss">
                  <el-form ref="form" :inline="true" :model="form" label-width="80px">
                  <el-form-item label="合同性质"> 
                    <el-select v-model="value"  size="mini" style="height: 30px; line-height: 30px;width: 120px;"  class="biankuang" clearable placeholder="请选择" @change="filterContractList">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item> 
                  <el-form-item >
                    <el-button class="bianji" @click="btnHetongmingxi" type="primary" size="mini" style="position: relative;top: -2px;">编辑</el-button>
                  </el-form-item>                 
                </el-form>
                
                </div>
              </div>
              <div class="table-areas" >
                <el-table :data="filteredContractList" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column type="index" label="序号" width="80" align="center" :index="getContractIndex">
                  </el-table-column>
                  <el-table-column prop="contract_no" label="合同编号"  align="center">
                  </el-table-column>
                  <el-table-column prop="contract_name" label="合同（项目/费用）名称"  align="center">
                  </el-table-column>
                  <el-table-column prop="contract_type" label="合同类型" align="center">
                    <template slot-scope="scope">
                      {{ formatContractType(scope.row.contract_type) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="contract_sign_date" label="合同签订日期" align="center">
                    <template slot-scope="scope">
                      {{ formatDate(scope.row.contract_sign_date) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="contract_amount" label="合同金额（元）" align="center">
                    <template slot-scope="scope">
                      {{ formatAmount(scope.row.contract_amount) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="total_account_amount" label="合计开票金额（元）" align="center">
                    <template slot-scope="scope">
                      {{ formatAmount(scope.row.total_account_amount) || '-' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                  align="center"
                  label="操作"
                  width="80">
                  <template slot-scope="scope">
                    <el-button @click="btnHetongmingxidetail(scope.row)" type="text" size="small">主页</el-button>
                  
                  </template>
    </el-table-column>
                </el-table>

              </div>
               </div>
              
            </div>
          
          </div>
        </div>
        <div class="area-rights" id="expenses">
          <div class="neirongs">
            <div class="zong">
              <div class="shu"></div>
              <span class="jib">费用支出</span>
            </div>
            <div class="table-area">
               <div>
                <div class="headerss">
                <div class="jiben">支出明细  
                
                
                </div>
                <div class="rightsss">
                  <el-form ref="form" :inline="true" :model="form" label-width="80px">
                  <el-form-item label="费用类型"> 
                    <el-select v-model="value" size="mini" style="width: 180px;"  class="biankuang" clearable placeholder="请选择">
                        <el-option
                        
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item> 
                  <el-form-item label="是否产生支出"> 
                    <el-select v-model="value" size="mini" style="width: 80px;"  class="biankuang" clearable placeholder="请选择">
                        <el-option
                        
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item> 
                  <el-form-item label="时间筛选"> 
                    <el-date-picker
                    style="position:relative;top: 6px;width: 130px;"
                    class="biankuang"
                    v-model="value3"
                    type="year"
                    placeholder="选择年">
                  </el-date-picker>
                  </el-form-item> 
                  <el-form-item label="" class="selects"> 
                    <el-select v-model="value" size="mini" style="width: 80px;"  class="biankuang" clearable placeholder="请选择">
                        <el-option
                        
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item> 
                  <el-form-item label="" class="selects" style="left: -22px;"> 
                    <el-select v-model="value" size="mini" style="width: 80px;"  class="biankuang" clearable placeholder="请选择">
                        <el-option
                        
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item >
                    <el-button class="bianji" @click="btnzhichu" type="primary" size="mini" style="position: relative;top: -2px;">编辑</el-button>
                  </el-form-item>                 
                </el-form>
                
                </div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date2" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="合同编号"  align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="合同（项目/费用）名称"  align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="合同类型" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="合同签订日期" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="合同金额（元）" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="合计开票金额（元）" align="center">
                  </el-table-column>
                  <el-table-column
                  align="center"
                  label="操作"
                  width="80">
                  <template slot-scope="scope">
                    <el-button @click="btnfeiyongzhu(scope.row)" type="text" size="small">主页</el-button>
                  
                  </template>
            </el-table-column>
                </el-table>

              </div>
               </div>
               <!-- 科技部门费用支出 -->
               <div>
                <div class="headerss">
                <div class="jiben">支出明细  
                
                
                </div>
                <div class="rightsss">
                  <el-form ref="form" :inline="true" :model="form" label-width="80px">
                  <el-form-item label="费用类型"> 
                    <el-select v-model="value" size="mini" style="width: 180px;"  class="biankuang" clearable placeholder="请选择">
                        <el-option
                        
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item> 
                  <el-form-item label="是否产生支出"> 
                    <el-select v-model="value" size="mini" style="width: 80px;"  class="biankuang" clearable placeholder="请选择">
                        <el-option
                        
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item> 
                  <el-form-item label="时间筛选"> 
                    <el-date-picker
                    style="position:relative;top: 6px;width: 130px;"
                    class="biankuang"
                    v-model="value3"
                    type="year"
                    placeholder="选择年">
                  </el-date-picker>
                  </el-form-item> 
                  <el-form-item label="" class="selects"> 
                    <el-select v-model="value" size="mini" style="width: 80px;"  class="biankuang" clearable placeholder="请选择">
                        <el-option
                        
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item> 
                  <el-form-item label="" class="selects" style="left: -22px;"> 
                    <el-select v-model="value" size="mini" style="width: 80px;"  class="biankuang" clearable placeholder="请选择">
                        <el-option
                        
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item >
                    <el-button class="bianji" @click="btnkejifeiyong" type="primary" size="mini" style="position: relative;top: -2px;">编辑</el-button>
                  </el-form-item>                 
                </el-form>
                
                </div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date2" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="费用类型"  align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="最近付款日期"  align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="合计支出金额" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="其中科技经费支出" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="合计凭证数" align="center">
                  </el-table-column>
              
                  <el-table-column
                  align="center"
                  label="操作"
                  width="80">
                  <template slot-scope="scope">
                    <el-button @click="btnfeiyongzhukeji(scope.row)" type="text" size="small">主页</el-button>
                  
                  </template>
            </el-table-column>
                </el-table>

              </div>
               </div>
            </div>
          
          </div>
        </div>
        <div class="area-rights" id="project-track">
          <div class="neirongs">
            <div class="zong">
              <div class="shu"></div>
              <span class="jib">项目追踪</span>
            </div>
            <div class="table-area">
               <div>
                <div class="headerss">
                <div class="jiben">进度报告  
                
                
                </div>
                <div class="rightsss">
                  <el-form ref="form" :inline="true" :model="form" label-width="80px">
                  <el-form-item label="报告类型"> 
                    <el-select v-model="value" size="mini" style="width: 180px;"  class="biankuang" clearable placeholder="请选择">
                        <el-option
                        
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item> 
                 
               
                  <el-form-item >
                    <el-button class="bianji" @click="btnjinduEdint" type="primary" size="mini" style="position: relative;top: -2px;">编辑</el-button>
                    <el-button class="bianji" @click="btntixin" type="primary" size="mini" style="position: relative;top: -2px;">提醒设置</el-button>
                  </el-form-item>                 
                </el-form>
                
                </div>
              </div>
              <div class="table-areas" >
                <el-table :data="reportList" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column type="index" label="序号" width="80" align="center" :index="getReportIndex">
                  </el-table-column>
                  <el-table-column prop="report_name" label="报告名称"  align="center">
                  </el-table-column>
                  <el-table-column prop="report_type" label="报告类型"  align="center">
                    <template slot-scope="scope">
                      {{ formatReportType(scope.row.report_type) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="report_date" label="报告日期" align="center">
                    <template slot-scope="scope">
                      {{ formatDate(scope.row.report_date) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="user_id" label="报告（负责）人" align="center">
                  </el-table-column>
                  <el-table-column prop="remark" label="备注" align="center">
                  </el-table-column>
                  <el-table-column
                  align="center"
                  label="操作"
                  width="80">
                  <template slot-scope="scope">
                    <el-button @click="btnjindubaogao(scope.row)" type="text" size="small">详情</el-button>
                  
                  </template>
            </el-table-column>
                </el-table>

              </div>
               </div>
               <div>
                <div class="headerss">
                <div class="jiben">项目节点  
                
                
                </div>
                <div class="rightsss">
                  <el-form ref="form" :inline="true" :model="form" label-width="80px">
                  <el-form-item label="完成情况"> 
                    <el-select v-model="value" size="mini" style="width: 180px;"  class="biankuang" clearable placeholder="请选择">
                        <el-option
                        
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item> 
                 
               
                  <el-form-item >
                    <el-button class="bianji" @click="btnjeidian" type="primary" size="mini" style="position: relative;top: -2px;">编辑</el-button>
                    <el-button class="bianji" @click="btntixing" type="primary" size="mini" style="position: relative;top: -2px;">提醒设置</el-button>
                  </el-form-item>                 
                </el-form>
                
                </div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date2" label="图片" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="节点（提醒）时间"  align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="节点事项说明"  align="center" width="300">
                  </el-table-column>
                  <el-table-column prop="address" label="完成情况" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="节点负责人" align="center">
                  </el-table-column>
                 
                  <el-table-column
                  align="center"
                  label="操作"
                  width="80">
                  <template slot-scope="scope">
                    <el-button @click="btnjiedianxiang(scope.row)" type="text" size="small">详情</el-button>
                  
                  </template>
            </el-table-column>
                </el-table>

              </div>
               </div>
            </div>
        
          </div>
        </div>
        <div class="area-rights" id="mid-check">
          <div class="neirongs">
            <div class="zong">
              <div class="shu"></div>
              <span class="jib">中期检查</span>
            </div>
            <div class="table-area">
               <div>
                <div class="headerss">
                <div class="jiben">检查情况  
                
                
                </div>
                <div class="rightsss">
                  <el-form ref="form" :inline="true" :model="form" label-width="80px">
                  <el-form-item >
                    <el-button class="bianji" @click="btnzhogni" type="primary" size="mini" style="position: relative;top: -2px;">编辑</el-button>
                  </el-form-item>                 
                </el-form>
                
                </div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date2" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="检查名称（标题）"  align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="检查日期"  align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="项目完成进度" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="经费已投入（元）" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="技术风险评估" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="市场风险评估" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="检查结果" align="center">
                  </el-table-column>
                  <el-table-column
                  align="center"
                  label="操作"
                  width="80">
                  <template slot-scope="scope">
                    <el-button @click="btnjianchaDetial(scope.row)" type="text" size="small">详情</el-button>
                  
                  </template>
            </el-table-column>
                </el-table>

              </div>
               </div>
              
            </div>
          
          </div>
        </div>
        <div class="area-rights" id="project-close">
          <div class="neirongs">
            <div class="zong">
              <div class="shu"></div>
              <span class="jib">项目结题</span>
            </div>
            <div class="table-area">
               <div>
                <div class="headerss">
                <div class="jiben">结题情况  
                
                
                </div>
                <div class="rightsss">
                  <el-form ref="form" :inline="true" :model="form" label-width="80px">
                  <el-form-item >
                    <el-button class="bianji" @click="btnJieti" type="primary" size="mini" style="position: relative;top: -2px;">编辑</el-button>
                  </el-form-item>                 
                </el-form>
                
                </div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date2" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="结题名称（标题）"  align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="项目完成情况"  align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="经费已投入（元）" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="项目结束时间" align="center">
                  </el-table-column>
                  <el-table-column prop="address" label="验收结果" align="center">
                  </el-table-column>
               
                  <el-table-column
                  align="center"
                  label="操作"
                  width="80">
                  <template slot-scope="scope">
                    <el-button @click="btnjietixiangqin(scope.row)" type="text" size="small">详情</el-button>
                  
                  </template>
            </el-table-column>
                </el-table>

              </div>
               </div>
              
            </div>
          
          </div>
        </div>
        <div class="area-rights" id="core-docs">
          <div class="neirongs">
            <div class="zong">
              <div class="shu"></div>
              <span class="jib">核心文档</span>
            </div>
            <div class="table-area">
               <div>
                <div class="headerss">
                <div class="jiben">需求类文档  
                  <el-tooltip class="item" effect="dark" content="需求类文档" placement="top-start">
                    <i  class="el-icon-info" style="color: #D6D8EA;margin-left: 9px;"></i>
                </el-tooltip>
                
                </div>
                <div><el-button class="bianji" @click="btnWen" type="primary" size="mini" >编辑</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date2" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="文档名称"  align="center" >
                  </el-table-column>
                  <el-table-column prop="name" label="相关负责人"  align="center" :width="200">
                  </el-table-column>
                  <el-table-column prop="address" label="发布（生效）日期" align="center" :width="200">
                  </el-table-column>
                  <el-table-column prop="date" label="备注"  align="center" >
                  </el-table-column>
                  <el-table-column
                  align="center"
                  label="操作"
                  width="80">
                  <template slot-scope="scope">
                    <el-button @click="btnwendangxiang(scope.row)" type="text" size="small">详情</el-button>
                  
                  </template>
            </el-table-column>
                </el-table>

              </div>
               </div>
               <div>
                <div class="headerss">
                <div class="jiben">设计类文档  
                  <el-tooltip class="item" effect="dark" content="需求类文档" placement="top-start">
                    <i  class="el-icon-info" style="color: #D6D8EA;margin-left: 9px;"></i>
                </el-tooltip>
                
                </div>
                <div><el-button class="bianji" @click="btnWen" type="primary" size="mini" >编辑</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date2" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="文档名称"  align="center" >
                  </el-table-column>
                  <el-table-column prop="name" label="相关负责人"  align="center" :width="200">
                  </el-table-column>
                  <el-table-column prop="address" label="发布（生效）日期" align="center" :width="200">
                  </el-table-column>
                  <el-table-column prop="date" label="备注"  align="center" >
                  </el-table-column>
                  <el-table-column
                  align="center"
                  label="操作"
                  width="80">
                  <template slot-scope="scope">
                    <el-button @click="btnwendangxiang(scope.row)" type="text" size="small">详情</el-button>
                  
                  </template>
            </el-table-column>
                </el-table>

              </div>
               </div>
               <div>
                <div class="headerss">
                <div class="jiben">开发类文档  
                  <el-tooltip class="item" effect="dark" content="开发类文档" placement="top-start">
                    <i  class="el-icon-info" style="color: #D6D8EA;margin-left: 9px;"></i>
                </el-tooltip>
                
                </div>
                <div><el-button class="bianji" @click="btnWen" type="primary" size="mini" >编辑</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date2" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="文档名称"  align="center" >
                  </el-table-column>
                  <el-table-column prop="name" label="相关负责人"  align="center" :width="200">
                  </el-table-column>
                  <el-table-column prop="address" label="发布（生效）日期" align="center" :width="200">
                  </el-table-column>
                  <el-table-column prop="date" label="备注"  align="center" >
                  </el-table-column>
                  <el-table-column
                  align="center"
                  label="操作"
                  width="80">
                  <template slot-scope="scope">
                    <el-button @click="btnwendangxiang(scope.row)" type="text" size="small">详情</el-button>
                  
                  </template>
            </el-table-column>
                </el-table>

              </div>
               </div>
               <div>
                <div class="headerss">
                <div class="jiben">测试类文档  
                  <el-tooltip class="item" effect="dark" content="测试类文档" placement="top-start">
                    <i  class="el-icon-info" style="color: #D6D8EA;margin-left: 9px;"></i>
                </el-tooltip>
                
                </div>
                <div><el-button class="bianji" @click="btnWen" type="primary" size="mini" >编辑</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date2" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="文档名称"  align="center" >
                  </el-table-column>
                  <el-table-column prop="name" label="相关负责人"  align="center" :width="200">
                  </el-table-column>
                  <el-table-column prop="address" label="发布（生效）日期" align="center" :width="200">
                  </el-table-column>
                  <el-table-column prop="date" label="备注"  align="center" >
                  </el-table-column>
                  <el-table-column
                  align="center"
                  label="操作"
                  width="80">
                  <template slot-scope="scope">
                    <el-button @click="btnwendangxiang(scope.row)" type="text" size="small">详情</el-button>
                  
                  </template>
            </el-table-column>
                </el-table>

              </div>
               </div>
               <div>
                <div class="headerss">
                <div class="jiben">交付类文档  
                  <el-tooltip class="item" effect="dark" content="交付类文档" placement="top-start">
                    <i  class="el-icon-info" style="color: #D6D8EA;margin-left: 9px;"></i>
                </el-tooltip>
                
                </div>
                <div><el-button class="bianji" @click="btnWen" type="primary" size="mini" >编辑</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date2" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="文档名称"  align="center" >
                  </el-table-column>
                  <el-table-column prop="name" label="相关负责人"  align="center" :width="200">
                  </el-table-column>
                  <el-table-column prop="address" label="发布（生效）日期" align="center" :width="200">
                  </el-table-column>
                  <el-table-column prop="date" label="备注"  align="center" >
                  </el-table-column>
                  <el-table-column
                  align="center"
                  label="操作"
                  width="80">
                  <template slot-scope="scope">
                    <el-button @click="btnwendangxiang(scope.row)" type="text" size="small">详情</el-button>
                  
                  </template>
            </el-table-column>
                </el-table>

              </div>
               </div>
            </div>
          
          </div>
        </div>
        <div class="area-rights" id="achievement">
          <div class="neirongs">
            <div class="zong">
              <div class="shu"></div>
              <span class="jib">成果管理</span>
            </div>
            <div class="table-area">
               <div>
                <div class="headerss">
                <div class="jiben">科技成果  
                  <el-tooltip class="item" effect="dark" content="科技成果" placement="top-start">
                    <i  class="el-icon-info" style="color: #D6D8EA;margin-left: 9px;"></i>
                </el-tooltip>
                
                </div>
                <div><el-button class="bianji" @click="btnkejichengguo" type="primary" size="mini" >编辑</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date2" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="产生日期"  align="center" >
                  </el-table-column>
                  <el-table-column prop="name" label="科技成果名称"  align="center" >
                  </el-table-column>
                  <el-table-column prop="address" label="成果来源" align="center" >
                  </el-table-column>
                  <el-table-column prop="date" label="成果类型"  align="center" >
                  </el-table-column>
                  <el-table-column prop="date" label="转化形式"  align="center" >
                  </el-table-column>
                  <el-table-column prop="date" label="转化结果"  align="center" >
                  </el-table-column>
                  <el-table-column
                  align="center"
                  label="操作"
                  width="120">
                  <template slot-scope="scope">
                    <el-button class="yanse" @click="btnkejichengguoDetail(scope.row)" type="text" size="small">详情</el-button>
                 
                  </template>
                </el-table-column>
                 
                </el-table>

              </div>
               </div>
               <div>
                <div class="headerss">
                <div class="jiben">知识产权  
                 
                
                </div>
                <div><el-button class="bianji" @click="btnzhichichang" type="primary" size="mini" >编辑</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date2" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="产权IP编号"  align="center" >
                  </el-table-column>
                  <el-table-column prop="name" label="名称"  align="center" :width="400">
                  </el-table-column>
                  <el-table-column prop="address" label="类别" align="center" >
                  </el-table-column>
                  <el-table-column prop="date" label="获得方式"  align="center" >
                  </el-table-column>
                  <el-table-column
                  align="center"
                  label="操作"
                  width="120">
                  <template slot-scope="scope">
                    <el-button class="yanse" @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                    <el-button class="yanse" @click="handleClick(scope.row)" type="text" size="small" style="color: #F56C6C;">删除</el-button>
                  </template>
                </el-table-column>
                </el-table>

              </div>
               </div>
               <div>
                <div class="headerss">
                <div class="jiben">成果报告  
                  <el-tooltip class="item" effect="dark" content="成果报告" placement="top-start">
                    <i  class="el-icon-info" style="color: #D6D8EA;margin-left: 9px;"></i>
                </el-tooltip>
                
                </div>
                <div><el-button class="bianji" @click="btnWen" type="primary" size="mini" >编辑</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date2" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="文档名称"  align="center" >
                  </el-table-column>
                  <el-table-column prop="name" label="类别"  align="center" :width="200">
                  </el-table-column>
                  <el-table-column prop="address" label="获得方式" align="center" :width="200">
                  </el-table-column>
               
                </el-table>

              </div>
               </div>
               <div>
                <div class="headerss">
                <div class="jiben">成果图示  
                  <el-tooltip class="item" effect="dark" content="成果图示" placement="top-start">
                    <i  class="el-icon-info" style="color: #D6D8EA;margin-left: 9px;"></i>
                </el-tooltip>
                
                </div>
                <div><el-button class="bianji" @click="btnChengguo" type="primary" size="mini" >编辑</el-button></div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column prop="date2" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="date" label="图示名称"  align="center" >
                  </el-table-column>
                  <el-table-column prop="name" label="图示数量（张）"  align="center" :width="200">
                  </el-table-column>
                  <el-table-column
                  align="center"
                  label="操作"
                  width="120">
                  <template slot-scope="scope">
                    <el-button class="yanse" @click="chengguoimg(scope.row)" type="text" size="small">详情</el-button>
                    <el-button class="yanse" @click="handleClick(scope.row)" type="text" size="small" style="color: #F56C6C;">删除</el-button>
                  </template>
                </el-table-column>
                </el-table>

              </div>
               </div>
              
            </div>
          
          </div>
        </div>
        <div class="area-rights" id="financial">
          <div class="neirongs">
            <div class="zong">
              <div class="shu"></div>
              <span class="jib">财务决算</span>
            </div>
            <div class="table-area">
               <div>
                <div class="headerss">
                <div class="jiben">研发支出辅助账  
                
                
                </div>
                <div class="rightsss">
                  <el-form ref="form" :inline="true" :model="form" label-width="80px">
                  <el-form-item label="时间筛选"> 
                    <el-date-picker
                    style="position:relative;top: 6px;width: 130px;"
                    class="biankuang"
                    v-model="value3"
                    type="year"
                    placeholder="选择年">
                  </el-date-picker>
                  </el-form-item> 
                  <el-form-item label="" class="selects"> 
                    <el-select v-model="value" size="mini" style="width: 80px;"  class="biankuang" clearable placeholder="请选择">
                        <el-option
                        
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item> 
                  <el-form-item label="" class="selects" style="left: -22px;"> 
                    <el-select v-model="value" size="mini" style="width: 80px;"  class="biankuang" clearable placeholder="请选择">
                        <el-option
                        
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item >
                    <el-button class="bianji" type="primary" size="mini" style="position: relative;top: -2px;">下载</el-button>
                  </el-form-item>                 
                </el-form>
                
                </div>
              </div>
              <div class="table-areas" >
                <el-table :data="tableData" :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" border style="width: 100%">
                  <el-table-column label="凭证信息" align="center">
                    <el-table-column prop="date" label="日期"  align="center">
                    </el-table-column>
                    <el-table-column prop="name" label="凭证号"  align="center" >
                    </el-table-column>
                    <el-table-column prop="address" label="摘要" align="center" >
                    </el-table-column>
                  </el-table-column>
                  <el-table-column label="会计凭证记载金额" prop="address" align="center">
                    
                  
                  </el-table-column>
                  <el-table-column label="费用明细" align="center">
                    <el-table-column prop="address" label="直接投入费" align="center" >
                    </el-table-column>
                    <el-table-column prop="address" label="折旧费" align="center">
                    </el-table-column>
                    <el-table-column prop="address" label="无形资产摊销" align="center">
                    </el-table-column>
                    <el-table-column prop="address" label="新产品设计费等" align="center">
                    </el-table-column>
                  </el-table-column>
                
                  <el-table-column
                  align="center"
                  label="操作"
                  width="80">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">主页</el-button>
                  
                  </template>
            </el-table-column>
                </el-table>

              </div>
               </div>
              
            </div>
          
          </div>
        </div>
      </div>
    </div>

      <!-- 基本情况 -->
      <jieben v-if="jiben" @closeOK="closeOK"></jieben>
      <!-- 技术领域和来源 -->
      <jisulianyu v-if="jisulianyuShow" @jishuClose="jishuClose"></jisulianyu>
      <!-- 提醒设置 -->
      <tixingshezhi v-if="tixingshezhiShow" @tixinClose="tixinClose"></tixingshezhi>
      <!-- 项目节点 -->
      <jiediantixin v-if="jiediantixinShow" @jinduClose="jinduClose"></jiediantixin>
       <!-- 知识产权 -->
       <zhishichangquan v-if="zhishichangquanShow" @zhichiClose="zhichiClose"></zhishichangquan>
        <!-- 成果图示 -->
        <tupian v-if="tupianAShow" @zhichiClose="zhichiClose"></tupian>
  </div>
</template>
<script>
import { getEnterpriseLogo } from '@/utils/auth'
import {ProjectPhaseDocument,ProjectBudgetList,ProjectTaskList,ProjectMemberList,ProjectContractList,ProjectReportList} from '@/api/projectmanagement/projecthoursDetai'
import jieben from './conponent/jieben.vue'
import jisulianyu from './conponent/jisulianyu'
import tixingshezhi from './conponent/tixingshezhi'
import jiediantixin from './conponent/jiediantixin'
import zhishichangquan from './conponent/zhishichangquan'
import tupian from './conponent/tupian.vue'
export default {
  data() {
    return {
      id:"",
      enterpriseLogo: '',
      projectName: '', // 项目名称
      projectId: '', // 项目ID
      documentList: [], // 立项阶段资料列表
      budgetList: [], // 立项预算列表
      totalBudgetAmount: '0.00', // 预算总金额
      taskList: [], // 任务清单列表
      memberList: [], // 项目人员列表
      contractList: [], // 合同明细列表（原始数据）
      filteredContractList: [], // 筛选后的合同明细列表
      reportList: [], // 进度报告列表
      value: '', // 合同性质筛选值
      value3: '', // 日期选择器值
      options: [
        { value: 1, label: '技术合同' },
        { value: 2, label: '采购租赁' },
        { value: 3, label: '外聘劳务' },
        { value: 4, label: '其他' }
      ], // 合同性质选项
      zhishichangquanShow:false,
      jiediantixinShow:false,
      jisulianyuShow:false,
      jiben:false,
      tixingshezhiShow:false,
      tupianAShow:false,
      form:{
        name:""
      },
      tableData: [{
        date2:1,
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }],
      investmentBudgetData: [{
        date2: 1,
        date: '投资预算',
        name: '-',
        address: '-',
        type: 'investment'
      }],
      active2: 0,
      active: 0,
      activeItemIndex: null,
      activeMenu: '0',
      activeColor: '#409EFF',
      listDate: [
        { name: '基本情况', id: 'basic-info' },
        { name: '立项情况', id: 'project-info' },
        { name: '项目人员', id: 'project-members' },
        { name: '合同管理', id: 'contract-manage' },
        { name: '费用支出', id: 'expenses' },
        { name: '项目追踪', id: 'project-track' },
        { name: '中期检查', id: 'mid-check' },
        { name: '项目结题', id: 'project-close' },
        { name: '核心文档', id: 'core-docs' },
        { name: '成果管理', id: 'achievement' },
        { name: '财务结算', id: 'financial' }
      ]
    }
  },
  components:{
    jieben,
    jisulianyu,
    tixingshezhi,
    jiediantixin,
    zhishichangquan,
    tupian
  },
  created() {
    this.loadEnterpriseLogo()
    // 从路由参数获取项目名称和ID
    this.projectName = this.$route.query.project_name || ''
    this.id = this.$route.query.id || ''
    this.projectId = this.id // 同时赋值给projectId
    console.log('项目ID:', this.id, '项目名称:', this.projectName)
    // 获取立项阶段资料列表
    if(this.id){
      this.getProjectPhaseDocument()
      this.getProjectBudgetList()
      this.getProjectTaskList()
      this.getProjectMemberList()
      this.getProjectContractList()
      this.getProjectReportList()
    } else {
      console.warn('未获取到项目ID，无法加载立项阶段资料')
    }
  },
  mounted(){
    
  },
  methods: {
    //立项阶段资料
    getProjectPhaseDocument(){
      if (!this.id) {
        console.warn('项目ID不存在，无法获取立项阶段资料')
        return
      }
      const parm = {
        page: 1,
        limit: 100,
        project_id: Number(this.id) || this.id
      }
      console.log('调用立项阶段资料接口，参数:', parm)
      ProjectPhaseDocument(parm).then((res) => {
        console.log('立项阶段资料接口返回:', res)
        if (res && res.code === 1) {
          this.documentList = res.data.data || res.data.list || []
          console.log('立项阶段资料列表:', this.documentList)
        } else {
          console.error('获取立项阶段资料失败:', res?.msg)
          this.documentList = []
        }
      }).catch((error) => {
        console.error('获取立项阶段资料失败:', error)
        this.documentList = []
      })
    },
    // 获取立项预算列表
    getProjectBudgetList() {
      if (!this.id) {
        console.warn('项目ID不存在，无法获取立项预算')
        return
      }
      const params = {
        page: 1,
        limit: 100,
        project_id: Number(this.id) || this.id
      }
      console.log('调用立项预算接口，参数:', params)
      ProjectBudgetList(params).then((res) => {
        console.log('立项预算接口返回:', res)
        if (res && res.code === 1) {
          this.budgetList = res.data.data || res.data.list || []
          // 计算总金额
          this.calculateTotalBudget()
          console.log('立项预算列表:', this.budgetList)
        } else {
          console.error('获取立项预算失败:', res?.msg)
          this.budgetList = []
          this.totalBudgetAmount = '0.00'
        }
      }).catch((error) => {
        console.error('获取立项预算失败:', error)
        this.budgetList = []
        this.totalBudgetAmount = '0.00'
      })
    },
    // 计算预算总金额
    calculateTotalBudget() {
      let total = 0
      this.budgetList.forEach(item => {
        const amount = parseFloat(item.budget_amount) || 0
        total += amount
      })
      this.totalBudgetAmount = total.toFixed(2)
    },
    // 获取预算序号
    getBudgetIndex(index) {
      return index + 1
    },
    // 格式化金额
    formatAmount(amount) {
      if (!amount && amount !== 0) return '-'
      const num = parseFloat(amount)
      if (isNaN(num)) return '-'
      return num.toFixed(2)
    },
    // 获取任务清单列表
    getProjectTaskList() {
      if (!this.id) {
        console.warn('项目ID不存在，无法获取任务清单')
        return
      }
      const params = {
        page: 1,
        limit: 100,
        project_id: Number(this.id) || this.id
      }
      console.log('调用任务清单接口，参数:', params)
      ProjectTaskList(params).then((res) => {
        console.log('任务清单接口返回:', res)
        if (res && res.code === 1) {
          this.taskList = res.data.data || res.data.list || []
          console.log('任务清单列表:', this.taskList)
        } else {
          console.error('获取任务清单失败:', res?.msg)
          this.taskList = []
        }
      }).catch((error) => {
        console.error('获取任务清单失败:', error)
        this.taskList = []
      })
    },
    // 获取任务序号
    getTaskIndex(index) {
      return index + 1
    },
    // 获取项目人员列表
    getProjectMemberList() {
      if (!this.id) {
        console.warn('项目ID不存在，无法获取项目人员')
        return
      }
      const params = {
        page: 1,
        limit: 100,
        project_id: Number(this.id) || this.id
      }
      console.log('调用项目人员接口，参数:', params)
      ProjectMemberList(params).then((res) => {
        console.log('项目人员接口返回:', res)
        if (res && res.code === 1) {
          this.memberList = res.data.data || res.data.list || []
          console.log('项目人员列表:', this.memberList)
        } else {
          console.error('获取项目人员失败:', res?.msg)
          this.memberList = []
        }
      }).catch((error) => {
        console.error('获取项目人员失败:', error)
        this.memberList = []
      })
    },
    // 获取合同明细列表
    getProjectContractList() {
      if (!this.id) {
        console.warn('项目ID不存在，无法获取合同明细')
        return
      }
      const params = {
        page: 1,
        limit: 100,
        project_id: Number(this.id) || this.id
      }
      console.log('调用合同明细接口，参数:', params)
      ProjectContractList(params).then((res) => {
        console.log('合同明细接口返回:', res)
        if (res && res.code === 1) {
          this.contractList = res.data.data || res.data.list || []
          console.log('合同明细列表:', this.contractList)
          // 初始化筛选后的列表
          this.filterContractList()
        } else {
          console.error('获取合同明细失败:', res?.msg)
          this.contractList = []
          this.filteredContractList = []
        }
      }).catch((error) => {
        console.error('获取合同明细失败:', error)
        this.contractList = []
        this.filteredContractList = []
      })
    },
    // 筛选合同明细列表
    filterContractList() {
      if (!this.value) {
        // 如果没有选择筛选条件，显示全部
        this.filteredContractList = this.contractList
      } else {
        // 根据合同类型筛选
        this.filteredContractList = this.contractList.filter(item => {
          return item.contract_type === this.value
        })
      }
      console.log('筛选后的合同明细列表:', this.filteredContractList, '筛选条件:', this.value)
    },
    // 获取成员序号
    getMemberIndex(index) {
      return index + 1
    },
    // 获取合同序号
    getContractIndex(index) {
      return index + 1
    },
    // 格式化合同类型
    formatContractType(type) {
      if (type === null || type === undefined || type === '') return '-'
      const typeMap = {
        1: '技术合同',
        2: '采购租赁',
        3: '外聘劳务',
        4: '其他'
      }
      return typeMap[type] || '-'
    },
    // 获取进度报告列表
    getProjectReportList() {
      if (!this.id) {
        console.warn('项目ID不存在，无法获取进度报告')
        return
      }
      const params = {
        page: 1,
        limit: 100,
        project_id: Number(this.id) || this.id
      }
      console.log('调用进度报告接口，参数:', params)
      ProjectReportList(params).then((res) => {
        console.log('进度报告接口返回:', res)
        if (res && res.code === 1) {
          this.reportList = res.data.data || res.data.list || []
          console.log('进度报告列表:', this.reportList)
        } else {
          console.error('获取进度报告失败:', res?.msg)
          this.reportList = []
        }
      }).catch((error) => {
        console.error('获取进度报告失败:', error)
        this.reportList = []
      })
    },
    // 获取报告序号
    getReportIndex(index) {
      return index + 1
    },
    // 格式化报告类型
    formatReportType(type) {
      if (type === null || type === undefined || type === '') return '-'
      const typeMap = {
        1: '季度报告',
        2: '年度报告',
        3: '中期报告',
        4: '月度报告',
        5: '其他'
      }
      return typeMap[type] || '-'
    },
    // 计算累计工时（天）
    calculateWorkDays(joinDate, leaveDate) {
      if (!joinDate) return '-'
      
      const endDate = leaveDate || new Date().toISOString().split('T')[0]
      const start = new Date(joinDate)
      const end = new Date(endDate)
      
      if (isNaN(start.getTime()) || isNaN(end.getTime())) {
        return '-'
      }
      
      // 计算天数差
      const diffTime = Math.abs(end - start)
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
      
      return diffDays || '-'
    },
    // 加载企业LOGO
    loadEnterpriseLogo() {
      const logo = getEnterpriseLogo()
      if (logo) {
        this.enterpriseLogo = logo
      }
    },
    //科技费用明细

    btnkejifeiyong(){
      this.$router.push('/feiyongmingxikeji')
    },
    btnfeiyongzhukeji(){
      this.$router.push('/feiyongmingxiDetail')
    },
    //成果图片
    chengguoimg(){
      this.tupianAShow=true
    },
    //成果编辑
    btnChengguo(){
      this.$router.push('/chengguo')
    },
    //知识产权编辑
    btnzhichichang(){
      this.zhishichangquanShow=true
    },
    //知识产权关闭
    zhichiClose(){
      this.zhishichangquanShow=false
    },
    //科技成果详情
    btnkejichengguoDetail(){
      this.$router.push('/kejichengguoDetail')
    },
    //科技成果编辑
    btnkejichengguo(){
      this.$router.push('/kejichengguo')
    },
    //文档详情
    btnwendangxiang(){
      this.$router.push('/wendangDetai')
    },
    //文档编辑
    btnWen(){
      this.$router.push('/wendang')
    },
    //结题详情
    btnjietixiangqin(){
      this.$router.push('/jiantiDetial')
    },

    //结题编辑
    btnJieti(){
      this.$router.push('/jianti')
    },
    //检查情况编辑
    btnzhogni(){
      this.$router.push('/zhongqi')
    },
    //检查情况详情
    btnjianchaDetial(){
      this.$router.push('/zhongqiDetai')
    },
    //节点详情
    btnjiedianxiang(){
      this.$router.push('/xiangmujiedianEdint')
    },
    //项目节点编辑
    btnjeidian(){
      this.$router.push('/xiangmujiedian')
    },
    //项目节点关闭
    jinduClose(){
      this.jiediantixinShow=false
    },
    //项目节点提醒
    btntixing(){
        this.jiediantixinShow=true
    },
    //进度报告详情
    btnjindubaogao(row){
      const params = {
        project_id: this.id || this.projectId,
        id: row?.id || ''
      }
      this.$router.push({
        path: '/jindubaogaoDetail',
        query: params
      })
    },
    //编辑进度报告
    btnjinduEdint(){
      const projectId = this.id || this.projectId
      if (!projectId) {
        this.$message.warning('缺少项目ID，无法跳转到进度报告编辑页')
        return
      }
      this.$router.push({
        path: '/jindubaogao',
        query: {
          project_id: projectId,
          id: projectId
        }
      })
    },
    //关闭提醒
    tixinClose(){
      this.tixingshezhiShow=false
    },
    //提醒设置
    btntixin(){
      this.tixingshezhiShow=true
    },
    //支出明细主页
    btnfeiyongzhu(){
      this.$router.push('/indexzhu')
    },
    //支出明细编辑
    btnzhichu(){
      this.$router.push('/feiyongmingxi')
    },
    //合同明细主页
    btnHetongmingxidetail(row){
      if (!row || !row.id) {
        this.$message.warning('缺少合同ID，无法跳转到详情页')
        return
      }
      this.$router.push({
        path: '/hetongmingxinDetails',
        query: {
          contract_id: row.id,
          id: row.id,
          project_id: this.id || this.projectId
        }
      })
    },
    //合同明细
    btnHetongmingxi(){
      if (!this.id && !this.projectId) {
        this.$message.warning('缺少项目ID，无法跳转到合同明细编辑页')
        return
      }
      const projectId = this.id || this.projectId
      this.$router.push({
        path: '/hetongmingxin',
        query: {
          project_id: projectId,
          id: projectId
        }
      })
    },
    //成员明细
    btnCheng(){
      this.$router.push('/chengyuan')
    },
    //任务清单
    btnRen(){
      const projectId = this.projectId || this.id
      console.log('跳转到任务清单编辑页面，项目ID:', projectId)
      if (!projectId) {
        this.$message.warning('缺少项目ID，无法跳转')
        return
      }
      this.$router.push({
        path: '/renwuqingdan',
        query: {
          project_id: projectId
        }
      })
    },
    //立即预算
    btnLiyusuan(){
      const projectId = this.projectId || this.id
      console.log('跳转到立项预算编辑页面，项目ID:', projectId)
      if (!projectId) {
        this.$message.warning('缺少项目ID，无法跳转')
        return
      }
      this.$router.push({
        path: '/lixiangyusuan',
        query: {
          project_id: projectId
        }
      })
    },
    //立项资料
    btnLixiangziliao(){
      const projectId = this.projectId || this.id
      console.log('跳转到编辑页面，项目ID:', projectId)
      if (!projectId) {
        this.$message.warning('缺少项目ID，无法跳转')
        return
      }
      this.$router.push({
        path: '/lixiangziliaoEdint',
        query: {
          project_id: projectId
        }
      })
    },
    // 获取文档序号
    getDocumentIndex(index) {
      return index + 1
    },
    // 格式化日期
    formatDate(date) {
      if (!date) return '-'
      // 如果是时间戳，转换为日期
      if (typeof date === 'number') {
        const d = new Date(date * 1000)
        return d.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')
      }
      // 如果是字符串，直接返回（可能已经是 YYYY-MM-DD 格式）
      return date
    },
    // 编辑文档
    handleEditDocument(row) {
      const projectId = this.projectId || this.id
      this.$router.push({
        path: '/lixiangziliao',
        query: {
          project_id: projectId,
          document_id: row.id
        }
      })
    },
    // 下载文档
    handleDownloadDocument(row) {
      if (row.file_path) {
        // 如果文件路径是完整URL，直接打开
        if (row.file_path.startsWith('http://') || row.file_path.startsWith('https://')) {
          window.open(row.file_path, '_blank')
        } else {
          // 如果是相对路径，需要拼接基础URL
          const baseUrl = process.env.VUE_APP_BASE_API || ''
          window.open(baseUrl + row.file_path, '_blank')
        }
      } else {
        this.$message.warning('文件路径不存在')
      }
    },
    //投资预算编辑
    btnTouziyusuanEdit(){
      this.$router.push('/touziyusuanEdit')
    },
    //投资预算详情
    btnTouziyusuanDetail(){
      this.$router.push('/touziyusuanDetail')
    },
    //情况概述
    btnqingkuang(){
      this.jiben=true
    },
    closeOK(){
      this.jiben=false
    },
    //技术领先和来源
    jishuClose(){
      this.jisulianyuShow=false
    },
    btnJishu(){
      this.jisulianyuShow=true
    },
    //上一页
    btnShng(){
      this.$router.go(-1)
    },
    hideNestedHeaders({ column }) {
    if (column.label === "立项时间" || column.label === "项目名称" || column.label === "项目类型") {
      return { display: 'none' }; // ⭐️ 隐藏子列表头
    }
    return { background: '#EDEFFE', color: '#363636' }; // ⭐️ 主表头样式
  },

    //点击左边的切换
    btnActive(e) {
      this.active = e
      this.active2 = e
      this.scrollToSection(e);
    },
    scrollToSection(index) {
      const targetId = this.listDate[index].id;
      const element = document.getElementById(targetId);
      
      if (element) {
        // 计算需要滚动的距离（考虑顶部固定栏）
        const headerHeight = document.querySelector('.headers').offsetHeight;
        const scrollTop = element.offsetTop - headerHeight;
        
        // 使用requestAnimationFrame实现平滑滚动
        const startPos = window.pageYOffset;
        const distance = scrollTop - startPos;
        const duration = 500;
        let startTime = null;
        
        const animateScroll = (timestamp) => {
          if (!startTime) startTime = timestamp;
          const progress = timestamp - startTime;
          const percent = Math.min(progress / duration, 1);
          
          window.scrollTo(0, startPos + distance * percent);
          
          if (progress < duration) {
            window.requestAnimationFrame(animateScroll);
          }
        };
        
        window.requestAnimationFrame(animateScroll);
      }
    }

  }




}
</script>
<style>
.hide-nested-headers .el-table__header .el-table-column--nested th {
  display: none;
}
.hide-all-headers .el-table__header-wrapper {
  display: none !important;
}

</style>
<style scoped>
::v-deep .el-table--border th.el-table__cell, .el-table__fixed-right-patch {
    border-bottom: 1px solid #DCE0FD !important;
    border-left: 1px solid #DCE0FD !important;
    border-right: 1px solid #DCE0FD !important;
}
::v-deep .el-input__prefix{
  height: 100%;
    left: 5px;
    transition: all .3s;
    position: relative !important;
    /* top: -34px  !important; */
}
.selects{
  position: relative;
  left: -11px;
}
.biankuang{
  border: 1px solid #EDEFFE;
  height: 30px; 
  line-height: 30px
}
.biankuang :deep(.el-input__inner) {
  height: 28px !important;
  line-height: 28px !important;
  padding-top: 0;
  padding-bottom: 0;
}

.rightsss{
  position: relative;
  top: -18px;
}
.jib{
  position: relative;
    left: 12px;
    top: -4px;
    font-size: 18px;
}
.jiben{
  position: relative;
    top: -4px;
   
    left: 12px;
}
.bianji{
  background-color: #DCE0FD;
  color: #5065F6;
  border: 1px solid #5065F6;
  position: relative;
  top: -6px;
}
.headerss{
  display: flex;
  justify-content: space-between;
  width: 96%;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 15px;
  height: 18px;
}
.table-areas {
  width: 96%;
  margin: 0 auto;
}

.table-area {
  width: 100%;
  padding-bottom: 20px;
  background: white;
  border-radius: 10px;
}

.areas {
  display: flex;
}

.area-right {
  flex: 1;
}

.area-rights {
  width: 97%;
  margin: 0 auto;
  margin-top:20px;
}

.fanhui {
  float: right;
  color: #5165f7;
  position: relative;
  top: -3px;
}
.zong{
  margin-left: 33px;
    padding-bottom: 14px;
}
.shu {
  width: 4px;
    height: 18px;
    background: #5165f7;
    position: relative;
    top: 0px;
    /* left: 40%; */
    display: inline-block;
}

.active {
  color: #5165f7 !important;
}

.active2 {
  background: #5165f7 !important;
}

.rights-names {
  margin-left: 32px;
  cursor: pointer;
}

.rights {
  width: 96%;
  height: 100%;
  margin: 0 auto;
  line-height: 94px;
  display: flex;
  position: relative;
  left: -27px;
}

.name-title {
  position: relative;
  top: -6px;
  font-weight: bold;
}

.right-name {
  font-size: 12px;
}
.yanse{
  color: #5065F6;
}
.img-right {
  font-size: 14px;
  position: relative;
  top: 40px;
  height: 40px;
  margin-left: 12px;
}

.imgs {
  width: 45px;
  height: 46px;
  background: #5165f7;
  border-radius: 6px;
  position: relative;
  top: 26px;
  margin-left: 24px;
  overflow: hidden;
}

.enterprise-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.headers-right {
  flex: 1;
  background: white;

}

.headers-left {
  width: 222px;
  height: 100%;
  display: flex;
  background: white;
  border-right: 1px solid #EDEFFE;
}

.headers {
  width: 100%;
  height: 90px;
  display: flex;
  border-bottom: 1px solid #EDEFFE;
}

.yuan {
  width: 10px;
  height: 10px;
  background-color: #EAEBF0;
  border-radius: 50%;
  z-index: 99;
  position: absolute;
  left: -6px;
}

.namess {
  margin-left: 18px;
  margin-left: 18px;
  position: relative;
  top: -5px;
}

.area-name {
  width: 100%;
  height: 56px;
  position: relative;
  border-left: 1px solid #F2F2F2;
  cursor: pointer;
}

.content-area {
  width: 78%;
  margin: 0 auto;
  margin-top: 32px;
}

.right-name {
  position: relative;
  top: -12px;
}

.dushu {
  font-size: 20px;
  font-weight: bold;
  margin-left: 7px;
}

.ziliao {
  color: #979BBC;
  font-size: 14px;
}

.left-img {
  width: 36px;
  height: 36px;

}

.left-content {
  width: 78%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  height: 42px;
  border-bottom: 1px solid #EDEFFE;
  line-height: 52px;
  margin-top: 14px;
}



:deep .el-menu-item.is-active {
  color: #5165f7 !important;
}

/* 调整整体间距 */
.lefts {
  padding: 8px 0;
  background: white;
  border-top: 1px solid #EDEFFE
}
</style>