<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="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%"
  class="no-child-header">  <!-- 添加 class -->
  
  <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">
    <!-- 子列1 -->
    <el-table-column prop="address" align="center">
    </el-table-column>
    
    <!-- 子列2 -->
    <el-table-column prop="address" align="center">
    </el-table-column>
    
    <!-- 子列3 -->
    <el-table-column prop="address" align="center">
    </el-table-column>
  </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="[...tableData, ...investmentBudgetData]" :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="类别" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="address" label="登记号/公告号/编号" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="address" label="获得方式" align="center">
                    </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(scope.row)" type="text" size="small" style="color: #5165f7;">详情</el-button>
                      </template>
                    </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>
                <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="说明情况" width="200" align="center">
                    </el-table-column>
                    <el-table-column label="操作" width="180" align="center">
                      <template slot-scope="scope">
                     
                        <el-button  @click="btnTouziyusuanDetail(scope.row)" type="text" size="small" style="color: #5165f7;">查看编辑</el-button>
                      </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">合同明细｜ <span>合计销售金额：12344.00元</span>
                  
                  
                  </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="请选择">
                          <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>
                  
                  </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="合同签订日期" width="200" align="center">
                    </el-table-column>
                    <el-table-column prop="address" label="销售（收款）金额（元）" width="200" align="center">
                    </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>
      </div>
  
      <el-dialog
        title="高新技术产品（服务）关键技术和技术指标具体说明"
        :visible.sync="techDialogVisible"
        width="800px"
        class="tech-dialog"
        :close-on-click-modal="false">
        <el-form :model="techDialogForm" label-position="top">
          <el-form-item label="关键技术及主要技术指标（限400字）">
            <el-input
              type="textarea"
              v-model="techDialogForm.coreTechnology"
              :rows="6"
              maxlength="400"
              show-word-limit
              placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="与同类产品（服务）的竞争优势（限400字）">
            <el-input
              type="textarea"
              v-model="techDialogForm.competitiveAdvantage"
              :rows="6"
              maxlength="400"
              show-word-limit
              placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="知识产权获得情况及其产品（服务）在技术上支撑的支持作用（限400字）">
            <el-input
              type="textarea"
              v-model="techDialogForm.ipSupport"
              :rows="6"
              maxlength="400"
              show-word-limit
              placeholder="请输入内容" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleTechDialogCancel">取消</el-button>
          <el-button type="primary" @click="handleTechDialogSave">保存</el-button>
        </span>
      </el-dialog>
       
    </div>
  </template>
  <script>

  export default {
    data() {
      return {
        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'
        }],
        techDialogVisible: false,
        techDialogForm: {
          coreTechnology: '',
          competitiveAdvantage: '',
          ipSupport: ''
        },
        currentTechRow: null,
        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('/xiaoshouqingkuan')
      },
      //合同明细
      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(row){
        this.currentTechRow = row || null
        this.techDialogVisible = true
      },
      //情况概述
      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);
        }
      },
      handleTechDialogCancel() {
        this.techDialogVisible = false
      },
      handleTechDialogSave() {
        this.$message.success('保存成功')
        this.techDialogVisible = false
      }
  
    }
  
  
  
  
  }
  </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 .no-child-header thead tr:last-child {
    display: none !important;
  }
  ::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 ::v-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: 32px;
  }
  
  .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
  }
  
  .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
  }

.tech-dialog ::v-deep .el-dialog__header {
  padding: 18px 24px 12px;
  border-bottom: 1px solid #EBEEF5;
}

.tech-dialog ::v-deep .el-dialog__title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.tech-dialog ::v-deep .el-dialog__body {
  padding: 24px;
  background: #f9faff;
}

.tech-dialog ::v-deep .el-form-item__label {
  font-size: 14px;
  color: #606266;
}

.tech-dialog ::v-deep .el-textarea__inner {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #dce0fd;
  font-size: 14px;
  color: #303133;
}

.tech-dialog ::v-deep .el-input__count {
  background: transparent;
  color: #909399;
}

.tech-dialog .dialog-footer {
  text-align: right;
  padding: 10px 24px 20px;
}
  </style>