<style>
 @import url('../../../assets/css/domestic/TicketingModule.css');
 .sanjiao-box{
    position: relative;
 }
   ._sanjiao_{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    border-top: 20px solid #e73828;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #e73828;
    border-right: 20px solid transparent;
  }
  .sanjiao-box ._sanjiao_:after{
    content: '关';
    position: absolute;
    top: -15px;
    left: -14px;
    white-space: nowrap;
    color: #FFFFFF;
    font-size: 12px;
  }
  .sanjiao-box .Receipt_table td{
    padding: 0 10px;
  }
  .hover_text span{
    cursor: pointer;
    text-decoration: underline;
  }
</style>
<template> 
   <div class="m_TicketingModule"  >
            <div class="_tit">
                <span class="_text">{{tit}}</span>
                <div>
                    <span class="_btn" v-if="tableShow" @click="tableShow=false">收起 <i class="iconfont icon-gengduo _rotate"></i> </span>
                    <span class="_btn" v-else @click="tableShow=true">展开 <i class="iconfont icon-gengduo"></i> </span>
                </div>
            </div>
            <div v-show="tableShow" class="sanjiao-box _padding_20_15">
              <div class="_sanjiao_"></div>
                <table border="1" class="_border_color_b Receipt_table" bordercolor="#c94052" style="border-collapse:collapse;width: 100%;" v-loading='loading'>
      <tr>
        <th rowspan="2" width="100">{{$t('system.query_company')}}</th> 
        <th rowspan="2" width="70">{{$t('fnc.danhao')}}</th>
        <th rowspan="2" width="120">{{$t('fnc.fyshuoming')}}</th>
        <th rowspan="2">{{$t('hotel.hotel_Currency')}}</th>
        <th colspan="3">{{$t('fnc.jine')}}</th>
        <th rowspan="2">{{$t('hotel.hotel_remark')}}</th>
        <th rowspan="2" width="70">{{$t('fnc.zhidanren')}}</th>
      </tr>
      <tr>
        <th width="88">{{$t('fnc.yuanbi')}}</th>
        <th width="90">{{$t('hotel.hotel_CurrentRate')}}</th>
        <th width="75">{{$t('fnc.bweibi')}}</th>
      </tr>
      <template v-if="details&&details.length">
        <tr v-for="(item) in details" class="_color_b">
          <td height="34px">{{item.BName}}</td> 
          <td height="34px" @click="goDetail(item.FinanceId)" class="hover_text"><span>{{item.FinanceId}}</span></td>
          <td height="34px">{{item.CostTypeName}}</td>
          <td height="34px">{{item.CurrencyName}}</td>
          <td height="34px">{{item.OriginalMoney}}</td>
          <td height="34px">{{item.Rate}}</td>
          <td height="34px">{{item.Money}}</td>
          <td height="34px" style="max-width: 120px;">{{item.Remark}}</td>
          <td height="34px">{{item.EmName}}</td>
        </tr>
      </template>
      <tr v-if="details&&details.length<2">
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
      </tr>
      <tr v-if="details&&details.length<3">
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
      </tr>
      <tr v-if="details&&details.length<4">
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
        <td height="34px"></td>
      </tr>
    </table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:["FrID", "TemplateId"],
    data(){
        return{
          tableShow: true,
          tit: '',
          details: [],
          loading: true,
        }
    },watch:{
        
    },created(){
      if (this.TemplateId == 59 || this.TemplateId == 63) {
        this.tit = '相关地接报账单据'
      }
      if (this.TemplateId == 43 || this.TemplateId == 48 || this.TemplateId == 53 || this.TemplateId == 56) {
        this.tit = '相关领队用款单据'
      }
      this.getDetails()
    },mounted(){
      
    },methods:{
      goDetail(id){
        this.$router.push({ name: 'FinancialDocumentsDetail',query:{"id":id,blank:'y',tab:'单据详情'} })
      },
      getDetails(){
        this.loading = true
        this.apipost('Financial_post_GetLeaderFinaceRelevance', {FrId: this.FrID}, res=>{ 
          if(res.data.resultCode == 1) {
            this.loading = false
            let data= res.data.data; 
            this.details = data;
          }
        }, null)
      }
    }
}
</script>