<template>
    <div>
      <div class="headers">
        <div class="headers-left">
          <div class="imgs">
  
          </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;">
              上一页
            </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="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><el-button class="bianji" type="primary" size="mini" @click="handleEditProjectInfo">编辑</el-button></div>
                </div>
                <div class="form-table">
                  <div class="form-row">
                    <div class="form-label">项目名称 (系统获取)</div>
                    <div class="form-value">
                      <el-input v-model="projectForm.projectName" readonly size="small"></el-input>
                    </div>
                  </div>
                  <div class="form-row">
                    <div class="form-label">研发起止时间 (系统获取)</div>
                    <div class="form-value">
                      <el-input v-model="projectForm.rdPeriod" readonly size="small"></el-input>
                    </div>
                  </div>
                  <div class="form-row">
                    <div class="form-label">主管税务部门</div>
                    <div class="form-value">
                      <el-input v-model="projectForm.taxDepartment" placeholder="请输入" size="small"></el-input>
                    </div>
                  </div>
                  <div class="form-row">
                    <div class="form-label">项目目前所处阶段</div>
                    <div class="form-value">
                      <el-checkbox-group v-model="projectForm.projectStage">
                        <el-checkbox label="中试阶段">中试阶段</el-checkbox>
                        <el-checkbox label="工业化放大阶段">工业化放大阶段</el-checkbox>
                        <el-checkbox label="小试阶段">小试阶段</el-checkbox>
                        <el-checkbox label="成熟应用阶段">成熟应用阶段</el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </div>
                  <div class="form-row">
                    <div class="form-label">研究开发形式</div>
                    <div class="form-value">
                      <el-checkbox-group v-model="projectForm.rdForm">
                        <el-checkbox label="独立研发">独立研发</el-checkbox>
                        <el-checkbox label="与其它企业合作">与其它企业合作</el-checkbox>
                        <el-checkbox label="与院校或院所合作">与院校或院所合作</el-checkbox>
                        <el-checkbox label="与国外合作">与国外合作</el-checkbox>
                        <el-checkbox label="其他">其他</el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </div>
                </div>
                 </div>
                 <div style="margin-top: 12px;">
                  <div class="headerss">
                  <div class="jiben">经费实际投入额 (万元)</div>
                  <div><el-button class="bianji" type="primary" size="mini" @click="handleEditInvestment">编辑</el-button></div>
                </div>
                <div class="form-table">
                  <div class="form-row">
                    <div class="form-label">总计</div>
                    <div class="form-value">
                      <el-input v-model="investmentForm.total" readonly size="small"></el-input>
                    </div>
                  </div>
                  <div class="form-row form-row-split">
                    <div class="form-split-item">
                      <div class="form-label">国家投入</div>
                      <div class="form-value">
                        <el-input v-model="investmentForm.national" placeholder="请输入" size="small"></el-input>
                      </div>
                    </div>
                    <div class="form-split-item">
                      <div class="form-label">部门投入</div>
                      <div class="form-value">
                        <el-input v-model="investmentForm.department" placeholder="请输入" size="small"></el-input>
                      </div>
                    </div>
                  </div>
                  <div class="form-row form-row-group">
                    <div class="form-label form-label-group">地方财政投入</div>
                    <div class="form-value-group">
                      <div class="form-sub-row">
                        <div class="form-sub-label">合计</div>
                        <div class="form-sub-value">
                          <el-input v-model="investmentForm.localTotal" placeholder="请输入" size="small"></el-input>
                        </div>
                      </div>
                      <div class="form-sub-row">
                        <div class="form-sub-label">省级投入</div>
                        <div class="form-sub-value">
                          <el-input v-model="investmentForm.provincial" placeholder="请输入" size="small"></el-input>
                        </div>
                      </div>
                      <div class="form-sub-row">
                        <div class="form-sub-label">市州投入</div>
                        <div class="form-sub-value">
                          <el-input v-model="investmentForm.municipal" placeholder="请输入" size="small"></el-input>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-row form-row-split">
                    <div class="form-split-item">
                      <div class="form-label">基金投入</div>
                      <div class="form-value">
                        <el-input v-model="investmentForm.fund" placeholder="请输入" size="small"></el-input>
                      </div>
                    </div>
                    <div class="form-split-item">
                      <div class="form-label">自有资金</div>
                      <div class="form-value">
                        <el-input v-model="investmentForm.ownCapital" placeholder="请输入" size="small"></el-input>
                      </div>
                    </div>
                  </div>
                  <div class="form-row form-row-split">
                    <div class="form-split-item">
                      <div class="form-label">银行贷款</div>
                      <div class="form-value">
                        <el-input v-model="investmentForm.bankLoan" placeholder="请输入" size="small"></el-input>
                      </div>
                    </div>
                    <div class="form-split-item">
                      <div class="form-label">国外资金</div>
                      <div class="form-value">
                        <el-input v-model="investmentForm.foreignCapital" placeholder="请输入" size="small"></el-input>
                      </div>
                    </div>
                  </div>
                  <div class="form-row">
                    <div class="form-label">其他</div>
                    <div class="form-value">
                      <el-input v-model="investmentForm.other" placeholder="请输入" size="small"></el-input>
                    </div>
                  </div>
                </div>
                 </div>
                
                
              </div>
              <div class="xiangmu" >
                  <div class="headerss">
                    <div class="jiben">项目成果应用状态</div>
                  </div>
                  <div class="form-table">
                    <div class="form-row">
                      <div class="form-label">项目成果应用状态</div>
                      <div class="form-value">
                        <el-checkbox-group v-model="outcomeForm.applicationStatus">
                          <el-checkbox label="稳定应用">稳定应用</el-checkbox>
                          <el-checkbox label="应用后停用">应用后停用</el-checkbox>
                          <el-checkbox label="未应用">未应用</el-checkbox>
                        </el-checkbox-group>
                      </div>
                    </div>
                  </div>
                 </div>
                 <div class="xiangmu" style="margin-top: 12px;">
                  <div class="headerss">
                    <div class="jiben">主要协作单位名单</div>
                    <div class="jiben">
                        <el-button type="primary" size="small" style="position: relative;right: 28px;">新增</el-button>
                    </div>
                  </div>
                  <div class="collaboration-table-wrapper">
                    <el-table
                      :data="collaborationUnits"
                      border
                      :header-cell-style="{ background: '#EDEFFE', color: '#363636', textAlign: 'center' }"
                      :cell-style="collaborationCellStyle"
                      style="width: 100%">
                      <el-table-column prop="unitName" label="单位名称" min-width="200">
                        <template #default="{ row }">
                          <el-input
                            v-model="row.unitName"
                            placeholder="请输入"
                            size="small"
                            style="border: 1px solid #ededed;">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="address" label="通信地址" min-width="300">
                        <template #default="{ row }">
                          <el-input
                            v-model="row.address"
                            placeholder="请输入"
                            size="small"
                            style="border: 1px solid #ededed;">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="contact" label="联系人" min-width="150">
                        <template #default="{ row }">
                          <el-input
                            v-model="row.contact"
                            placeholder="请输入"
                            size="small"
                            style="border: 1px solid #ededed;">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="phone" label="电话" min-width="180">
                        <template #default="{ row }">
                          <el-input
                            v-model="row.phone"
                            placeholder="请输入"
                            size="small"
                            style="border: 1px solid #ededed;">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                       
                        label="操作"
                        width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small" style="color: #F56C6C;">删除</el-button>
                          
                        </template>
                        </el-table-column>
                    </el-table>
                  </div>
                 </div>
                 <div class="xiangmu" style="margin-top:36px;background: none;">
                  <div class="zong">
                    <div class="shu"></div>
                    <span class="jib">优惠明细</span>
                  </div>
                  <div class="table-area">
                    <div style="margin-top: 2px;">
                      <div class="headerss">
                        <div class="jiben">基本信息</div>
                      </div>
                      <div class="form-table">
                        <div class="form-row">
                          <div class="form-label">本年可享受研发费用加计扣除项目数量</div>
                          <div class="form-value">
                            <el-input v-model="discountForm.projectCount" placeholder="请输入" size="small"></el-input>
                          </div>
                        </div>
                      </div>
                    </div>
                 
                  </div>
                  <div style="margin-top: 12px;background: white;padding-bottom: 20px;">
                      <div class="headerss">
                        <div class="jiben">研发活动费用明细</div>
                      </div>
                      <div class="form-table">
                        <div class="form-row">
                          <div class="form-label">研发支出费用统计</div>
                          <div class="form-value">
                            <div class="form-description">按《申请材料》里的费用类型统计，从研发项目财务决算获取。</div>
                          </div>
                        </div>
                      </div>
                    </div>
                 </div>
                 <div class="xiangmu" style="margin-top: 20px; background: none;">
                  <div class="zong">
                    <div class="shu"></div>
                    <span class="jib">项目资料 (包含立项阶段资料, 需求类文档, 设计类文档, 交付类文档等)</span>
                  </div>
                  <div class="table-area">
                    <div style="margin-top: 2px;">
                      <div class="headerss">
                        <div class="jiben">项目研发资料列表</div>
                        <div class="jiben">
                          <el-button type="primary" size="small" style="position: relative; right: 28px; margin-right: 8px;" @click="handleAddMaterial">添加</el-button>
                          <el-button type="danger" size="small" style="position: relative; right: 28px;" @click="handleDeleteMaterials">删除</el-button>
                        </div>
                      </div>
                      <div class="materials-table-wrapper">
                        <el-table
                          :data="projectMaterials"
                          border
                          :header-cell-style="{ background: '#EDEFFE', color: '#363636', textAlign: 'center' }"
                          :cell-style="materialsCellStyle"
                          style="width: 100%">
                          <el-table-column type="selection" width="55" align="center"></el-table-column>
                          <el-table-column prop="materialName" label="材料名称" min-width="300"></el-table-column>
                          <el-table-column prop="effectiveDate" label="生效 (发布) 日期" width="180" align="center"></el-table-column>
                          <el-table-column prop="issuingUnit" label="发布单位或部门" min-width="200"></el-table-column>
                        </el-table>
                      </div>
                    </div>
                  </div>
                 </div>
                 <div class="xiangmu" style="margin-top: 20px; background: none;">
                  <div class="zong">
                    <div class="shu"></div>
                    <span class="jib">项目合同</span>
                  </div>
                  <div class="table-area">
                    <div style="margin-top: 2px;">
                      <div class="headerss">
                        <div class="jiben">合同材料列表</div>
                        <div class="jiben">
                          <el-button type="primary" size="small" style="position: relative; right: 28px; margin-right: 8px;" @click="handleAddContract">添加</el-button>
                          <el-button type="danger" size="small" style="position: relative; right: 28px;" @click="handleDeleteContracts">删除</el-button>
                        </div>
                      </div>
                      <div class="contracts-table-wrapper">
                        <el-table
                          :data="projectContracts"
                          border
                          :header-cell-style="{ background: '#EDEFFE', color: '#363636', textAlign: 'center' }"
                          :cell-style="contractsCellStyle"
                          style="width: 100%">
                          <el-table-column type="selection" width="55" align="center"></el-table-column>
                          <el-table-column prop="contractName" label="合同名称" min-width="300"></el-table-column>
                          <el-table-column prop="signingDate" label="同签订日期" width="180" align="center"></el-table-column>
                          <el-table-column prop="contractType" label="合同类型" min-width="200"></el-table-column>
                        </el-table>
                      </div>
                    </div>
                  </div>
                 </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 添加立项材料对话框 -->
      <el-dialog
        :visible.sync="addMaterialDialogVisible"
        width="920px"
        class="add-material-dialog"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        @closed="resetMaterialDialog">
        <template #title>
          <div class="dialog-title-wrapper">
            <div class="dialog-title">添加立项材料 (多选)</div>
            <div class="dialog-subtitle">项目"立项情况""核心文档"和处获取</div>
          </div>
        </template>
        <div class="dialog-content">
          <el-table
            ref="materialSelectTable"
            :data="availableMaterials"
            border
            :header-cell-style="{ background: '#EDEFFE', color: '#363636', textAlign: 'center' }"
            :cell-style="materialSelectCellStyle"
            style="width: 100%"
            max-height="400">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="materialName" label="材料名称" min-width="300"></el-table-column>
            <el-table-column prop="effectiveDate" label="生效 (发布) 日期" width="180" align="center"></el-table-column>
            <el-table-column prop="issuingUnit" label="发布单位或部门" min-width="200"></el-table-column>
          </el-table>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="cancelAddMaterial">取消</el-button>
            <el-button type="primary" size="small" @click="confirmAddMaterial">添加</el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 添加项目合同对话框 -->
      <el-dialog
        :visible.sync="addContractDialogVisible"
        width="920px"
        class="add-contract-dialog"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        @closed="resetContractDialog">
        <template #title>
          <div class="dialog-title-wrapper">
            <div class="dialog-title">添加项目合同 (多选)</div>
            <div class="dialog-subtitle">项目"合同管理"处获取</div>
          </div>
        </template>
        <div class="dialog-content">
          <el-table
            ref="contractSelectTable"
            :data="availableContracts"
            border
            :header-cell-style="{ background: '#EDEFFE', color: '#363636', textAlign: 'center' }"
            :cell-style="contractSelectCellStyle"
            style="width: 100%"
            max-height="400">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="documentName" label="文档名称" min-width="300"></el-table-column>
            <el-table-column prop="effectiveDate" label="生效 (发布) 日期" width="180" align="center"></el-table-column>
            <el-table-column prop="contractType" label="合同类型" min-width="200"></el-table-column>
          </el-table>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="cancelAddContract">取消</el-button>
            <el-button type="primary" size="small" @click="confirmAddContract">添加</el-button>
          </div>
        </template>
      </el-dialog>
  
  
    </div>
  </template>
  <script>

  export default {
    data() {
      return {
        zhishichangquanShow:false,
        jiediantixinShow:false,
        jisulianyuShow:false,
        jiben:false,
        tixingshezhiShow:false,
        tupianAShow:false,
        form:{
          name:""
        },
        projectForm: {
          projectName: '高速公路物联网智能锁具系统研发项目',
          rdPeriod: '2022-9-10 - 未结束',
          taxDepartment: '',
          projectStage: ['成熟应用阶段'],
          rdForm: ['与国外合作']
        },
        investmentForm: {
          total: '521.10',
          national: '',
          localTotal: '',
          provincial: '',
          municipal: '',
          department: '',
          fund: '',
          ownCapital: '',
          bankLoan: '',
          foreignCapital: '',
          other: ''
        },
        outcomeForm: {
          applicationStatus: ['未应用']
        },
        discountForm: {
          projectCount: ''
        },
        addMaterialDialogVisible: false,
        addContractDialogVisible: false,
        availableMaterials: [
          {
            id: 1,
            materialName: '项目《立项通知》',
            effectiveDate: '2023-11-14',
            issuingUnit: '名称'
          },
          {
            id: 2,
            materialName: '项目《可行性研究报告》',
            effectiveDate: '2023-11-14',
            issuingUnit: '名称'
          },
          {
            id: 3,
            materialName: '项目《可行性研究报告》',
            effectiveDate: '2023-11-14',
            issuingUnit: '名称'
          },
          {
            id: 4,
            materialName: '项目《可行性研究报告》',
            effectiveDate: '2023-11-14',
            issuingUnit: '名称'
          },
          {
            id: 5,
            materialName: '项目《可行性研究报告》',
            effectiveDate: '2023-11-14',
            issuingUnit: '名称'
          },
          {
            id: 6,
            materialName: '项目《可行性研究报告》',
            effectiveDate: '2023-11-14',
            issuingUnit: '名称'
          },
          {
            id: 7,
            materialName: '项目《可行性研究报告》',
            effectiveDate: '2023-11-14',
            issuingUnit: '名称'
          },
          {
            id: 8,
            materialName: '项目《可行性研究报告》',
            effectiveDate: '2023-11-14',
            issuingUnit: '名称'
          }
        ],
        projectMaterials: [
          {
            id: 1,
            materialName: '项目《立项通知》',
            effectiveDate: '2022.2.24',
            issuingUnit: '名称'
          },
          {
            id: 2,
            materialName: '项目《可行性研究报告》',
            effectiveDate: '2022.2.24',
            issuingUnit: '名称'
          },
          {
            id: 3,
            materialName: '《产品设计方案》',
            effectiveDate: '2022.2.24',
            issuingUnit: '名称'
          },
          {
            id: 4,
            materialName: '《验收报告》',
            effectiveDate: '2022.2.24',
            issuingUnit: '名称'
          }
        ],
        projectContracts: [
          {
            id: 1,
            contractName: '高速公路管道与光缆研发合同',
            signingDate: '2022.2.24',
            contractType: '技术合同'
          }
        ],
        availableContracts: [
          {
            id: 1,
            documentName: '高速公路管道与光缆',
            effectiveDate: '2023-11-14',
            contractType: '技术合同'
          },
          {
            id: 2,
            documentName: '高速公路管道与光缆',
            effectiveDate: '2023-11-14',
            contractType: '其他'
          },
          {
            id: 3,
            documentName: '高速公路管道与光缆',
            effectiveDate: '2023-11-14',
            contractType: '其他'
          },
          {
            id: 4,
            documentName: '高速公路管道与光缆',
            effectiveDate: '2023-11-14',
            contractType: '其他'
          },
          {
            id: 5,
            documentName: '高速公路管道与光缆',
            effectiveDate: '2023-11-14',
            contractType: '其他'
          },
          {
            id: 6,
            documentName: '高速公路管道与光缆',
            effectiveDate: '2023-11-14',
            contractType: '其他'
          },
          {
            id: 7,
            documentName: '高速公路管道与光缆',
            effectiveDate: '2023-11-14',
            contractType: '其他'
          },
          {
            id: 8,
            documentName: '高速公路管道与光缆',
            effectiveDate: '2023-11-14',
            contractType: '其他'
          }
        ],
        collaborationUnits: [
          {
            unitName: '成果科技',
            address: '关于企业研究开发费',
            contact: '陈华',
            phone: '12398768776'
          },
          {
            unitName: '',
            address: '',
            contact: '',
            phone: ''
          }
        ],
        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' },
   
        ]
      }
    },
    components:{
     
    },
    created() {
  
    },
    mounted(){
      
    },
    methods: {
      //科技费用明细
  
      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(){
        this.$router.push('/jindubaogaoDetail')
      },
      //编辑进度报告
      btnjinduEdint(){
        this.$router.push('/jindubaogao')
      },
      //关闭提醒
      tixinClose(){
        this.tixingshezhiShow=false
      },
      //提醒设置
      btntixin(){
        this.tixingshezhiShow=true
      },
      //支出明细主页
      btnfeiyongzhu(){
        this.$router.push('/indexzhu')
      },
      //支出明细编辑
      btnzhichu(){
        this.$router.push('/feiyongmingxi')
      },
      //合同明细主页
      btnHetongmingxidetail(){
        this.$router.push('/hetongmingxinDetails')
      },
      //合同明细
      btnHetongmingxi(){
        this.$router.push('/hetongmingxin')
      },
      //成员明细
      btnCheng(){
        this.$router.push('/chengyuan')
      },
      //任务清单
      btnRen(){
        this.$router.push('/renwuqingdan')
      },
      //立即预算
      btnLiyusuan(){
        this.$router.push('/lixiangyusuan')
      },
      //立项资料
      btnLixiangziliao(){
        this.$router.push('/lixiangziliao')
      },
      //投资预算编辑
      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)
      },
      //编辑项目信息
      handleEditProjectInfo(){
        this.$message.info('编辑项目信息')
      },
      //编辑经费投入
      handleEditInvestment(){
        this.$message.info('编辑经费投入')
      },
      //协作单位表格单元格样式
      collaborationCellStyle({ column }) {
        return {
          textAlign: 'center',
          color: '#363636',
          padding: '8px'
        }
      },
      //删除协作单位
      handleClick(row) {
        const index = this.collaborationUnits.findIndex(item => item === row)
        if (index !== -1) {
          this.collaborationUnits.splice(index, 1)
          this.$message.success('删除成功')
        }
      },
      //项目资料表格单元格样式
      materialsCellStyle({ column }) {
        return {
          textAlign: column.property === 'materialName' ? 'left' : 'center',
          color: '#363636',
          padding: '8px'
        }
      },
      //项目合同表格单元格样式
      contractsCellStyle({ column }) {
        return {
          textAlign: column.property === 'contractName' ? 'left' : 'center',
          color: '#363636',
          padding: '8px'
        }
      },
      //添加项目资料
      handleAddMaterial() {
        this.addMaterialDialogVisible = true
        this.$nextTick(() => {
          if (this.$refs.materialSelectTable) {
            this.$refs.materialSelectTable.clearSelection()
          }
        })
      },
      //项目资料选择表格单元格样式
      materialSelectCellStyle({ column }) {
        return {
          textAlign: column.property === 'materialName' ? 'left' : 'center',
          color: '#363636',
          padding: '8px'
        }
      },
      //确认添加材料
      confirmAddMaterial() {
        const selectedRows = this.$refs.materialSelectTable ? this.$refs.materialSelectTable.getSelectionRows() : []
        if (selectedRows.length === 0) {
          this.$message.warning('请至少选择一条材料')
          return
        }
        // 过滤掉已存在的材料
        const newMaterials = selectedRows.filter(material => {
          return !this.projectMaterials.some(existing => existing.id === material.id)
        })
        // 添加到项目材料列表
        this.projectMaterials.push(...newMaterials)
        this.$message.success(`成功添加${newMaterials.length}条材料`)
        this.addMaterialDialogVisible = false
      },
      //取消添加材料
      cancelAddMaterial() {
        this.addMaterialDialogVisible = false
      },
      //重置材料对话框
      resetMaterialDialog() {
        if (this.$refs.materialSelectTable) {
          this.$refs.materialSelectTable.clearSelection()
        }
      },
      //删除项目资料
      handleDeleteMaterials() {
        this.$message.info('删除项目资料')
      },
      //添加项目合同
      handleAddContract() {
        this.addContractDialogVisible = true
        this.$nextTick(() => {
          if (this.$refs.contractSelectTable) {
            this.$refs.contractSelectTable.clearSelection()
          }
        })
      },
      //项目合同选择表格单元格样式
      contractSelectCellStyle({ column }) {
        return {
          textAlign: column.property === 'documentName' ? 'left' : 'center',
          color: '#363636',
          padding: '8px'
        }
      },
      //确认添加合同
      confirmAddContract() {
        const selectedRows = this.$refs.contractSelectTable ? this.$refs.contractSelectTable.getSelectionRows() : []
        if (selectedRows.length === 0) {
          this.$message.warning('请至少选择一条合同')
          return
        }
        // 过滤掉已存在的合同，并转换数据格式
        const newContracts = selectedRows
          .filter(contract => {
            return !this.projectContracts.some(existing => existing.id === contract.id)
          })
          .map(contract => ({
            id: contract.id,
            contractName: contract.documentName,
            signingDate: contract.effectiveDate,
            contractType: contract.contractType
          }))
        // 添加到项目合同列表
        this.projectContracts.push(...newContracts)
        this.$message.success(`成功添加${newContracts.length}条合同`)
        this.addContractDialogVisible = false
      },
      //取消添加合同
      cancelAddContract() {
        this.addContractDialogVisible = false
      },
      //重置合同对话框
      resetContractDialog() {
        if (this.$refs.contractSelectTable) {
          this.$refs.contractSelectTable.clearSelection()
        }
      },
      //删除项目合同
      handleDeleteContracts() {
        this.$message.info('删除项目合同')
      },
      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>
  .xiangmu{
    margin-top: 12px;
    background: white;
    padding-bottom: 18px;

  }
  ::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: 98%;
    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: 32px;
  }
  
  .fanhui {
    float: right;
    color: #5165f7;
    position: relative;
    top: -3px;
  }
  .zong{
    margin-left: 2px;
      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
  }
  
  .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
  }

  .form-table {
    width: 96%;
    margin: 0 auto;
    border: 1px solid #E0E3F5;
    border-radius: 8px;
    overflow: hidden;
  }

  .form-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    border-bottom: 1px solid #E0E3F5;
  }

  .form-row:last-child {
    border-bottom: none;
  }

  .form-label {
    background: #F5F6FE;
    padding: 16px;
    font-size: 14px;
    color: #363636;
    display: flex;
    align-items: center;
    border-right: 1px solid #E0E3F5;
  }

  .form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #E0E3F5;
  }

  .form-split-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    border-right: 1px solid #E0E3F5;
  }

  .form-split-item:last-child {
    border-right: none;
  }

  .form-row-group {
    display: grid;
    grid-template-columns: 200px 1fr;
    border-bottom: 1px solid #E0E3F5;
  }

  .form-label-group {
    grid-row: 1 / 4;
    display: flex;
    align-items: flex-start;
    padding-top: 16px;
    border-right: 1px solid #E0E3F5;
    background: #F5F6FE;
    padding: 16px;
    font-size: 14px;
    color: #363636;
  }

  .form-value {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    background: #fff;
  }

  .form-value-group {
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #fff;
  }

  .form-sub-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    border-bottom: 1px solid #E0E3F5;
    min-height: 48px;
    flex: 1;
  }

  .form-sub-row:last-child {
    border-bottom: none;
  }

  .form-sub-label {
    background: #fff;
    padding: 12px 16px;
    font-size: 14px;
    color: #363636;
    display: flex;
    align-items: center;
    border-right: 1px solid #E0E3F5;
  }

  .form-sub-value {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    background: #fff;
  }

  ::v-deep .el-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  ::v-deep .el-checkbox {
    margin-right: 0;
  }

  ::v-deep .el-input.is-disabled .el-input__inner {
    background-color: #F5F7FA;
    border-color: #E4E7ED;
    color: #606266;
    cursor: not-allowed;
  }

  .outcome-status-section {
    width: 96%;
    margin: 0 auto;
    padding: 16px;
    background: #fff;
    border: 1px solid #E0E3F5;
    border-radius: 8px;
  }

  .collaboration-table-wrapper {
    width: 96%;
    margin: 0 auto;
  }

  .collaboration-table-wrapper ::v-deep .el-table {
    border: 1px solid #E0E3F5;
    border-radius: 8px;
    overflow: hidden;
  }

  .collaboration-table-wrapper ::v-deep .el-table td {
    padding: 8px 0;
  }

  .collaboration-table-wrapper ::v-deep .el-input__inner {
    border: 1px solid #ededed;
  }

  .form-description {
    color: #363636;
    font-size: 14px;
    line-height: 1.5;
    padding: 0;
  }

  .materials-table-wrapper,
  .contracts-table-wrapper {
    width: 96%;
    margin: 0 auto;
  }

  .materials-table-wrapper ::v-deep .el-table,
  .contracts-table-wrapper ::v-deep .el-table {
    border: 1px solid #E0E3F5;
    border-radius: 8px;
    overflow: hidden;
  }

  .materials-table-wrapper ::v-deep .el-table td,
  .contracts-table-wrapper ::v-deep .el-table td {
    padding: 8px 0;
  }

  .add-material-dialog ::v-deep .el-dialog {
    border-radius: 12px;
  }

  .add-material-dialog ::v-deep .el-dialog__header {
    padding: 20px 28px 12px;
    border-bottom: none;
  }

  .dialog-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .dialog-title {
    font-size: 18px;
    font-weight: 600;
    color: #17192C;
  }

  .dialog-subtitle {
    font-size: 14px;
    color: #666;
    padding-left: 12px;
    border-left: 1px solid #E0E3F5;
  }

  .add-material-dialog .dialog-content {
    padding: 0 28px 20px;
  }

  .add-material-dialog .dialog-footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 20px 28px;
  }

  .add-contract-dialog ::v-deep .el-dialog {
    border-radius: 12px;
  }

  .add-contract-dialog ::v-deep .el-dialog__header {
    padding: 20px 28px 12px;
    border-bottom: none;
  }

  .add-contract-dialog .dialog-content {
    padding: 0 28px 20px;
  }

  .add-contract-dialog .dialog-footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 20px 28px;
  }
  </style>