<style>
  @import url('../css/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">{{$t('system.query_company')}}</th>
          <th rowspan="2">{{$t('fnc.danhao')}}</th>
          <th rowspan="2">{{$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">{{$t('fnc.zhidanren')}}</th>
        </tr>
        <tr>
          <th width="88">{{$t('fnc.yuanbi')}}</th>
          <th width="50">{{$t('hotel.hotel_CurrentRate')}}</th>
          <th width="68">{{$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-else-if="details&&details.length<1">
          <td colspan="9" height="34px" style="text-align: center">暂无数据</td>
        </tr>
        <template v-else>
          <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>
        </template>
      </table>
    </div>
  </div>
  </div>
</template>

<script>
  export default {
    props:["FrID", "TemplateId"],
    data(){
      return{
        tableShow: true,
        tit: '',
        details: [],
        loading: true,
      }
    },watch:{

    },created(){
      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_GetTicketFinanceRelevance', {FrId: this.FrID}, res=>{
          if(res.data.resultCode == 1) {
            let data= res.data.data;
            this.details = data;
          }
          this.loading = false
        }, null)
      }
    }
  }
</script>
