<template>
  <!-- 项目管理 项目资金使用情况 -->
  <div class="ProjectManagementFund1">
        <div class="vfpHeader">
            <div class="titleOne">预算经费</div>
            <el-button type="primary" @click="back">返回</el-button>
        </div>
          <hr>


          <!-- 跳转导航开始 -->
          <div class="AppBar">
              <div @click="content" class="AppBarActive">项目资金使用详情</div>
              <div @click="remark">资金申报明细</div>
          </div>

          <!-- 三个输入框开始 -->
          <div class="totalFund">
            <div class="totalFund1">
                <div class="totalFundLabel">预算总经费</div>
                <el-input v-model="input" placeholder="请输入内容"></el-input><span>(万)</span>
            </div>
            <div class="totalFund1">
                <div class="totalFundLabel">已经支出</div>
                <el-input v-model="input" placeholder="请输入内容"></el-input><span>(万)</span>
            </div>
            <div class="totalFund1">
                <div class="totalFundLabel">剩余</div>
                <el-input v-model="input" placeholder="请输入内容"></el-input><span>(万)</span>
            </div>
          </div>
          <!-- 三个输入框结束 -->

          <!-- 经费月支出计划开始 -->
            <div class="tabTit">
              <div><p>经费月支出计划(元)</p></div>
            </div>
            <el-table
              :data="tableData"
              tooltip-effect="dark"
              stripe
              class="fontSize"
              :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
              >
              <el-table-column
                prop="projectName"
                label="1月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="projectName"
                label="2月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="projectName"
                label="3月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="projectName"
                label="4月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="projectName"
                label="5月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="projectName"
                label="6月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="projectName"
                label="7月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="projectName"
                label="8月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="projectName"
                label="9月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="projectName"
                label="10月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="projectName"
                label="11月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="projectName"
                label="12月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="remark"
                label="备注"
                align="center"
                width="100">
              </el-table-column>
            </el-table>
          <!-- 经费月支出计划结束-->

          <!-- 经费明细开始 -->
            <div class="tabTit">
              <div><p>经费月支出计划(元)</p></div>
              <el-button type="primary" @click="addBtn" >设置</el-button>
            </div>

            <el-table
              :data="tableData2"
              tooltip-effect="dark"
              stripe
              class="fontSize"
              style="height: 320px;"
              :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
              >
              <el-table-column
                prop="sort"
                label="支出类别"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="projectName"
                label="支出项目"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="Fund"
                label="金额(元)"
                align="center"
                >
              </el-table-column>
              
              <el-table-column
                prop="state"
                label="状态"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="remark"
                label="备注"
                align="center"
               >
              </el-table-column>
              <el-table-column
                prop="operation"
                align="center"
                label="操作"
                >
                <template #default="scope">
                    <div class="operations">
                            <el-button type="primary" @click="lookDetail(scope)" size="mini">明细查看</el-button>
                    </div>
                </template>
                </el-table-column>
            </el-table>
          <!-- 经费明细结束 -->
            
          <div class="pmFund1Footer">
            <el-pagination
            background
            layout="prev, pager, next"
            :total="1">
            </el-pagination>
          </div>
</div>
</template>

<script>
    export default {
      data() {
        return {
          dialogVisible1:false,
          fundDetail:false,
    

          tableData:[{
            projectName:'-',
            date:'2022年11月12日',
            size:'50k'
            },
          ],
          tableData2:[{
            sort:'人工智能设备购买',
            Fund:'20000.00',
            projectName:'项目协作费用',
            remark:'',
            state:'已使用'
            },
          ],
          textarea:'',
          input:'',
          value: '',

        }
      },
      methods:{

        lookDetail(){

        },
        content(){
          this.$router.push('/ProjectManagementFund1')
        },
        remark(){
          this.$router.push('/ProjectManagementFund2')
        },
        addBtn(){
          // this.fundDetail=true;
        },
        back(){
          this.$router.push('/ProjectManagement')
        }
      }
    }
</script>

<style lang="less">
.ProjectManagementFund1{



  .pmFund1Footer{
      float: right;
      margin-top: 30px;
  }

  .totalFund{  //输入框样式  
    width: 85%;
    display: flex;
    justify-content: space-between;
    line-height: 25px;
    margin: 20px 0 30px;
    .totalFundLabel{
      min-width: 80px;
      display: inline-block;
      text-align: justify;
      text-justify:distribute-all-lines;
      text-align-last: justify;
      padding-right: 10px;
      font-size: 16px;
    }
    .totalFund1{
      width:320px;
      display: flex;
      align-items: center;
      position: relative;
      margin-right: 40px;
      span{
        position: absolute;
        top: 8px;
        right: -30px;
      }
    }
  
  }


  .newWidth{
    width: 150px;
  }

}
</style>