<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">数智科创 · 通达未来 </div>
              </div>
          </div>
          <div class="headers-right">
              <div class="rights">
                  <div class="rights-names" @click="btnShang">

                      <span>上一级 < </span> <span style="color:#3333;">投资预算编辑</span>
                  </div>

              </div>
          </div>
      </div>
      <div class="contents">
          <div class="content-left">
              <div class="content-lefts">
                  <div class="leftss">
                      <div class="leftss-header">
                          <div>投资预算编辑</div>
                          <div @click="btnEdint"> <el-button 
                                  style="background-color: #5165f7;color:white;">保存</el-button>
                                  <el-button 
                                  >取消</el-button>
                          </div>
                          
                      </div>
                      <div class="table-area">
                        <div class="table-header">  
                          <el-table
                              :data="tableData2"
                              height="250"
                              border
                              style="width: 100%">
                              <el-table-column
                                prop="date"
                                label="计划投资总额（元）"
                                width="180">
                                <el-input v-model="input" disabled ></el-input>
                              </el-table-column>
                              <el-table-column
                                prop="name"
                                label="其中"
                                align="center"
                               >
                               <el-table-column
                                prop="name"
                                label="自筹经费"
                                 align="center"
                               >
                               
                              </el-table-column>
                              <el-table-column
                                prop="name"
                                label="科技经费"
                                 align="center"
                               >
                               
                              </el-table-column>
                              <el-table-column
                                prop="name"
                                label="其他拨款"
                                 align="center"
                               >
                               
                              </el-table-column>
                              <el-table-column
                                prop="name"
                                label="来源"
                                 align="center"
                               >
                               
                              </el-table-column>
                              </el-table-column>
                             
                            </el-table>
                        </div>
                    </div>
                      <div class="table-area" style="margin-top: ;">
                          <div class="table-header">
                              <div>
                                  <span class="times"> 预算科目明细</span>
                              </div>
                             
                          </div>
                      </div>
                  </div>
                  <div class="content-table">
                     
                      <div class="table-right">
                          <table class="financial-table">
                              <thead>
                                  <tr class="tou">
                                      <th colspan="2" class="ths" style="text-align: center;width: 70%;" >预算科目名称</th>
                                      <th class="ths" style="text-align: center;">总额（元）</th>
                                      <th class="ths" style="text-align: center;">其中：科技经费(元)</th>
                                  </tr>
                              </thead>
                              <tbody>
                                  <tr class="tou">
                                      <td colspan="2" style="text-align: center;">营业成本</td>
                                      <td>自动计算</td>
                                      <td>自动计算</td>
                                  </tr>
                                  <tr class="tou">
                                      <td rowspan="11" class="nested-label">一、直接费用</td>
                                      <td>1、购置设备费</td>
                                      <td>10,200.31</td>
                                      <td>10,200.31</td>
                                  </tr>
                                  <tr class="tou">
                                      <td>2、试制设备费</td>
                                      <td>10,200.31</td>
                                      <td>10,200.31</td>
                                  </tr>
                                  <tr class="tou">
                                      <td>3、设备改造与租赁费</td>
                                      <td>10,200.31</td>
                                      <td>10,200.31</td>
                                  </tr>
                                  <tr class="tou">
                                      <td>4、材料费</td>
                                      <td>10,200.31</td>
                                      <td>10,200.31</td>
                                  </tr>
                                  <tr class="tou">
                                      <td>5、测试化验加工费</td>
                                      <td>10,200.31</td>
                                      <td>10,200.31</td>
                                  </tr>
                                  <tr class="tou">
                                      <td>6、燃料动力费</td>
                                      <td>10,200.31</td>
                                      <td>10,200.31</td>
                                  </tr>
                                  <tr class="tou">
                                      <td>7、差旅费/会议费/国际合作与交流费</td>
                                      <td>10,200.31</td>
                                      <td>10,200.31</td>
                                  </tr>
                                  <tr class="tou">
                                      <td>8、出版/文献/信息传播/知识产权事务费</td>
                                      <td>10,200.31</td>
                                      <td>10,200.31</td>
                                  </tr>
                                  <tr class="tou">
                                      <td>9、劳务费</td>
                                      <td>10,200.31</td>
                                      <td>10,200.31</td>
                                  </tr>
                                  <tr class="tou">
                                      <td>10、专家咨询费</td>
                                      <td>10,200.31</td>
                                      <td>10,200.31</td>
                                  </tr>
                                  <tr class="tou">
                                      <td>11、其他（含培训费）</td>
                                      <td>10,200.31</td>
                                      <td>10,200.31</td>
                                  </tr>
                                  <tr class="tou">
                                      <td rowspan="11" class="nested-label">二、间接费用</td>
                                      <td>1、绩效支出</td>
                                      <td>10,200.31</td>
                                      <td>10,200.31</td>
                                  </tr>
                                  <tr class="tou">
                                      <td>2、其他间接费用</td>
                                      <td>10,200.31</td>
                                      <td>10,200.31</td>
                                  </tr>
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
          </div>
          
      </div>

  </div>
</template>
<script>
export default {
  data() {
      return {
          yuanright: 0,
          tables: [
              {
                  name: '有效'
              },
              {
                  name: '无效'
              },
          ],
          shu: 0,
          active: 0,
          lastActiveKey: 'headerActiveIndex',
          tableData: [
              {
                  date: "其中",
                  name: "",
                  address: "",
                
              },
              { date: "其他项目", name: "5000", address: "4000" },
          ],

          tableData2: [{
              date: '营业收入',
              name: '10200.31',
              address: '10200'
          }, {
              date: '营业利润',
              name: '10200.31',
              address: '10200'
          }, {
              date: '利润总额',
              name: '10200.31',
              address: '10200'
          }, {
              date: '净利润',
              name: '10200.31',
              address: '10200'
          },
          {
              date: '综合收益总额',
              name: '10200.31',
              address: '10200'
          }]
      }
  },

  created() {

  },

  watch: {

  },

  methods: {
      //切换时效性
      btnYuan(e) {
          this.yuanright = e
      },
      //编辑跳转
      btnEdint() {
          this.$router.push('/qiyeEdit')
      },
      btnShang() {
          this.$router.go('-1')
      }

  }
}
</script>
<style>
.el-tooltip__popper.is-dark {
  color: #F04B4B !important;
  background: #FCF1EB !important;
}

.el-tooltip__popper .popper__arrow {
  border-top-color: #FCF1EB !important;
  /* 上方箭头 */
}

.el-tooltip__popper .popper__arrow::after {
  border-top-color: #FCF1EB !important;
}

/* 其他方向的箭头（按需添加） */
.el-tooltip__popper[x-placement^='bottom'] .popper__arrow {
  border-bottom-color: #FCF1EB !important;
}

.el-tooltip__popper[x-placement^='left'] .popper__arrow {
  border-left-color: #FCF1EB !important;
}

.el-tooltip__popper[x-placement^='right'] .popper__arrow {
  border-right-color: #FCF1EB !important;
}
</style>
<style scoped>
:deep .el-tooltip__popper.is-dark {
  color: #F04B4B !important;
}

.right-area {
  width: 90%;
  margin: 0 auto;
  height: 80vh;
  background: #f8f8f8;
}

.right-header {
  width: 90%;
  margin: 0 auto;
}

.ths {
  text-align: center;
  background: #DCE0FD !important;
  color: #363636;
}

.tou {
  height: 30px;
  line-height: 30px;
  color: #606266;
  text-align: center;
}

.financial-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.financial-table th,
.financial-table td {
  border: 1px solid #ddd;
  padding: 8px 7px;
  text-align: center;
}

.financial-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.financial-table .nested-label {
 
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}

.table-right {
  flex: 1;
}

.table-left {
  flex: 1;
}

.content-table {
  display: flex;
  width: 90%;
  margin: 0 auto;
  margin-top: 14px;
}

/* 默认情况（有效）左边圆角 */
.left-radius {
  border-bottom-left-radius: 16px !important;
  border-top-left-radius: 16px !important;
}

/* 无效情况右边圆角 */
.right-radius {
  border-bottom-right-radius: 16px !important;
  border-top-right-radius: 16px !important;
}

.yuan-left {
  flex: 1;
  text-align: center;
  line-height: 30px;
  background: #f8f8f8;
  /* border-bottom-left-radius: 16px;
  border-top-left-radius: 16px; */
  cursor: pointer;
}

.yuanright {
  flex: 1;
  background: #5165f7;
  color: white;

  /* border-bottom-right-radius: 16px;
  border-top-right-radius: 16px;  */
  text-align: center;
  line-height: 30px;
  cursor: pointer;

}

.youxiaos {
  position: relative;
  top: 6px;
  left: -12px;
  cursor: pointer;
}

/* 修改.yuan的样式，移除外层圆角 */
.yuan {
  width: 100px;
  height: 30px;
  background: white;
  display: flex;
  font-size: 14px;
  overflow: hidden;
  /* 关键：确保内部div的圆角效果不被截断 */
}

/* 默认状态下两个按钮的外侧圆角 */
.yuan-left:first-child {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.yuan-left:last-child {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* 选中状态样式 */
.yuanright {
  background: #5165f7;
  color: white;
}

/* 选中"有效"时的样式 */
.yuan-left.left-radius {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* 选中"无效"时的样式 */
.yuan-left.right-radius {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}


.times {
  position: relative;
  top: 3px;
}

.youxiao {
  color: #5B5D76;
  font-size: 13px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}

.table-area {
  margin-top: 12px;
  font-size: 15px;
}

.leftss-header {
  display: flex;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #3333;
  font-weight: bold;
  justify-content: space-between;
}

.leftss {
  width: 90%;
  margin: 0 auto;
}

.content-lefts {
  background: white;
  height: 100%;
  width: 100%;
}

.content-left {
  flex: 1;
  padding-right: 12px;
  height: 100%;
}

.content-right {
  width: 600px;
  height: 100%;
  background: white;
}

.contents {
  width: 100%;
    /* height: 92vh; */
    background: white;
    display: flex
;
    margin-top: 6px;
    /* flex-wrap: wrap; */
    padding-bottom: 25px;
}


.shu {
  width: 3px;
  height: 18px;
  background: #5165f7;
  position: relative;
  display: inline-block;
  top: 7px;
}

::v-deep .el-table thead {
  background-color: #DCE0FD !important;
  color: #363636 !important;
  font-weight: bold;
}

::v-deep .el-table__header th {
  background-color: #DCE0FD !important;
  color: #363636 !important;
  font-weight: bold;
}


.active{
  color: #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;
}
.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;
}
</style>