<template>
    <div id="fundDetail" v-loading="loading">
        <table border="1" cellspacing="0" class="table">
            <tr id="fund">
            <td rowspan="12" ref="fund" style="white-space: ;">实际使用经费</td><td>总经费</td><td colspan="5" v-text="total+' 元'"></td>
          </tr>
          <tr>
            <td>支出类别</td><td colspan="2">支出项目</td><td>金额（元）</td><td colspan="4">备 注</td>
          </tr>
          <tr>
            <td rowspan="5">直接费用</td>
          </tr>
          <tr>
            <td colspan="2">小型仪器设备费</td>
            <td v-text="data['device']">
            </td><td colspan="2">
              项目开展所需的小型专用仪器设备、工具、配件购置或租赁费用。
            </td>
          </tr>
          <tr>
            <td colspan="2">材料费</td><td v-text="data['Material']">
            </td><td colspan="2">
              项目开展需消耗的各种原材料、辅助材料等低值易耗品的采购费用。
            </td>
          </tr>
          <tr>
            <td colspan="2">测试化验加工费</td><td v-text="data['processing']">
            </td><td colspan="2">
              项目开展过程中支付给外单位的检验、测试、化验、计算、分析及加工费等费用。
            </td>
          </tr>
          <tr>
            <td colspan="2">项目协作费</td><td v-text="data['Collaboration']">
            </td><td colspan="2">
              按合同规定支付给协作单位的费用
            </td>
          </tr>
    
          <tr>
            <td rowspan="5">间接费用</td>
          </tr>
          <tr>
            <td colspan="2">项目成果鉴定费</td><td v-text="data['APPRAISAL']">
            </td><td colspan="2">
              学术会务费、评审费、鉴定费、成果集制作费等费用。
            </td>
          </tr>
          <tr>
            <td colspan="2">参展参赛费</td><td v-text="data['entery']">
            </td><td colspan="2">
              参加创客展会、竞赛等所需的报名费、展位费、布展费、宣传推广费及差旅费等费用。
            </td>
          </tr>
          <tr>
            <td colspan="2">创客交流活动费</td><td v-text="data['activities']">
            </td><td colspan="2">
              创客交流活动中支付给校外专家的指导费、咨询费、授课费等费用。
            </td>
          </tr>
          <tr>
            <td colspan="2">知识产权事务费</td><td v-text="data['Transaction']">
            </td><td colspan="2">
              论文版面费、专利及其他知识产权事务等费用。
            </td>
          </tr>
        </table>
    </div>
</template>

<script>
export default {
  data() {
    return {
        loading:false,
        data:{
          device:"",
          Material:"",
          processing:"",
          Collaboration:"",
          APPRAISAL:"",
          entery:"",
          activities:"",
          Transaction:"",
        }
    }
  },
  methods:{
    getData(){   //初始化完成获取基本数据进行填充
      this.loading = true;
      for(let i in this.data)this.data[i]=0;
      let param={
        uid:this.$store.state.userInfo.userid,
        pid:this.$route.query['pid']
      }
      this.ajax.get(this.$store.state.api+'/getProjectActivityFundIsUseDetail',param).then(res=>{
          let isUse = res['data'][0];
          isUse.forEach(item=>{
            let JP = JSON.parse(item['actualuse']);
            this.data['device']+=Number(JP['device']);
            this.data['Material']+=Number(JP['Material']);
            this.data['processing']+=Number(JP['processing']);
            this.data['Collaboration']+=Number(JP['Collaboration']);
            this.data['APPRAISAL']+=Number(JP['APPRAISAL']);
            this.data['entery']+=Number(JP['entery']);
            this.data['activities']+=Number(JP['activities']);
            this.data['Transaction']+=Number(JP['Transaction']);
          })
          this.loading = false;
        }).catch(err=>{
          console.log(err);
        })
      },
  },
  computed:{
    total(){
      let num = 0;
      for(let i in this.data)num+=Number(this.data[i]);
      return num;
    }
  },
  mounted(){
    this.getData()
  }
}
</script>

<style lang="less" scoped>
#fundDetail{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .table{
        width: 100%;
        border: none;
        border-top: solid 1px black;
        border-right:  solid 1px black;
        border-left:  solid 1px black;
        tr{
          position: relative;
          td{
            border: none;
            border-bottom: solid 1px black;
            border-right: solid 1px black;
            height: 65px;
            text-align: center;
            line-height: 30px;
            min-width: 80px;
            box-sizing: border-box;
            padding: 5px;
            }
        }      
    }
}
</style>