<style scoped>
    p{margin: 0 !important;}
    .Receipt_box{padding: 15px;color: #c94052;width: 100%;background-color: rgba(245, 245, 245, 1);position: relative;}
    .Receipt_box tr th{color: #c94052}
    .Receipt_box.color_blur tr th{color: #106BAF}
    .Receipt_box.color_blur{color: #106BAF;}
    .Receipt_box.color_blur .rb_stit span{display: inline-block;border-bottom: 2px solid #106BAF;padding: 0 20px}
    .rb_tit{font-size: 16px;text-align: center}
    .rb_stit{font-size: 14px;text-align: center}
    .rb_stit span{display: inline-block;border-bottom: 2px solid #C94052;padding: 0 20px}
    .rb_top_row{display: flex;justify-content: space-between;font-size: 12px;}
    .rb_top_row span._r_name{color: #333333}
    .rb_top_row span._r_bold{font-weight: bold}
    .rb_top_row ._r_time span{color: #333333}
    ._r_mb5{margin-bottom: 5px;}
    .Receipt_table{width: 100%;font-size: 14px;text-align: center}
    .Receipt_table th{font-weight: 200 !important}
    .Receipt_table tr th,.Receipt_table tr td{background-color: white}
    ._r_mt10{margin-top: 10px;}
    .Receipt_box.color_blur{color: #106BAF;}
    .Receipt_box.color_blur .rb_stit span{display: inline-block;border-bottom: 2px solid #106BAF;padding: 0 20px}
    ._color_b{color: #333333 !important;font-size: 12px}
    ._font_size12{font-size: 12px !important}
    ._r_IsPublic{
        padding-left: 15px;
    }
    ._guanlian{
        font-size: 12px;
        color: gray;
    }
    ._guanlian span{
        font-size: 14px;
        color: #333333;
    }
    ._yewudanju{
        position: absolute;
        text-align: right;
        font-size: 12px;
        right: 15px;
        top: 15px;
    }
    ._jump_page{
        cursor: pointer;
        text-decoration: underline;
    }
    i{
        font-style: initial;
    }
    .Receipt_box tr th,.Receipt_box *{color: #333333;font-size: 14px !important;}
    .Receipt_box._PrintPageStyle{color: #333333;}
    .Receipt_box._PrintPageStyle .rb_stit span{border-bottom: 2px solid #333333;}
    .Receipt_box._PrintPageStyle td{height: 40px}
    ._border_color_r{
        border-color: #c94052;
    }
    .font_color_b{
      color: #106BAF !important;
    }
    ._border_color_b{
        border-color: #106BAF;
    }
    ._border_color_p{
        border-color: #333333;
    }
    .Receipt_box .rb_stit span._rb_stit_print{
        padding: 0;
        padding-top: 10px;
        border: none;
    }
    ._explain{
      margin-top: 10px;
      padding: 15px 0px;
      border-top: 1px dashed #BFBFBF;
      border-bottom: 1px dashed #BFBFBF;
      background-color: white;
      font-size: 12px;
    }
  ._p_time{
    top: 40px;
  }
  .zhuiClass{
        width: 20px;
        height: 20px;
        display: inline-block;
        border-radius: 50%;
        text-align: center;
        line-height:  20px;
        color: #E95252;
        border: 1px solid #E95252;
        font-size: 12px;
    }
  .zhuiClass.zhuiClassdetails{
    position: absolute;
  }
</style>
<template>
    <div class="Receipt_box" :class="[GetDetail.Type==1 || GetDetail.Type==5?'':'color_blur',isPrintPage?'_PrintPageStyle':'']" :style="{width:width,backgroundColor:color}" @click.stop v-loading='loading'>
      <div style="display: flex;justify-content: space-between; padding: 0 0 5px 0;">
        <div class="rb_top_row _r_mb5" style="display: flex;flex-direction: column;">
          <p v-if="GetDetail.Type==1 || GetDetail.Type==5">{{$t('fnc.hnrdanwei')}}：<span class="_r_name">{{GetDetail.RemitterName}}</span></p>
          <p v-if="GetDetail.Type==2 || GetDetail.Type==6">{{$t('fnc.fkduixiang')}}：
            <span class="_r_name" style="margin-right:8px">{{GetDetail.ClientTypeName}}</span>
            <span class="_r_name">{{GetDetail.AccountHolder}}</span>
            <span class="_r_name _r_IsPublic" v-if="GetDetail.IsPublic==0">{{$t('fnc.sizhang')}}</span>
            <span class="_r_name _r_IsPublic" v-if="GetDetail.IsPublic==1">{{$t('fnc.gongzhang')}}</span>
            <span class="_r_name _r_IsPublic" v-if="GetDetail.IsPublic==2">{{$t('fnc.rmbxianjin')}}</span>
            <span class="_r_name _r_IsPublic" v-if="GetDetail.IsPublic==3">{{$t('fnc.wbxianjin')}}</span>
            <span class="_r_name _r_IsPublic" v-if="GetDetail.IsPublic==4">{{$t('fnc.zjinchi')}}</span>
            <span class="_r_name _r_IsPublic" v-if="GetDetail.IsPublic==5">{{$t('fnc.ptxnzhanghu')}}</span>
            <span class="_r_name _r_IsPublic" v-if="GetDetail.IsPublic==6">{{$t('fnc.djxnzhanghu')}}</span>
            <span class="_r_name _r_IsPublic" v-if="GetDetail.IsPublic==7">收支相抵</span>
            <span class="_r_name _r_IsPublic" v-if="GetDetail.IsPublic==10">虚拟结算</span>
            <span class="_r_name _r_IsPublic" v-if="GetDetail.IsPublic==11">电商结算</span>
          </p>
          <p v-if="(GetDetail.Type==1 || GetDetail.Type==5) &&GetDetail.IsPublic!=4">
            <span>{{$t('fnc.fkzhlshuihao')}}：</span>
            <span class="_r_name" v-if="GetDetail.TradeDate!=''">{{GetDetail.AccountNumber}} （{{GetDetail.TradeDate}}）</span>
            <span class="_r_name" v-else>{{GetDetail.AccountNumber}}</span>
        </p>
        <p v-if="(GetDetail.Type==2 || GetDetail.Type==6) &&GetDetail.IsPublic!=4" style="max-width: 500px">
            <span>{{$t('fnc.fkzhanghu')}}：</span>
            <span class="_r_name" v-if="GetDetail.TradeDate!=''">{{GetDetail.AccountNumber}}（{{GetDetail.TradeDate}}）</span>
            <span class="_r_name" v-else>{{GetDetail.AccountNumber?GetDetail.AccountNumber:$t('fnc.no')}}</span>
        </p>
          
      </div>
      <div class="rb_top_row _r_mb5" style="display: flex; flex-direction: column;padding: 0 0 0 20px;">
        <p style="font-weight: bold;cursor: pointer;" @click="jumpPage('FinancialDocumentsDetail')"><span class="">{{GetDetail.FinanceName}}：</span>{{GetDetail.FrID}}</p>
          <p v-if="GetDetail.IsPublic==4" style="max-width: 500px">
            <span class="_r_name" style="color: #fff;">,</span>
          </p>
          <p class="_r_time" style="text-align: right;">{{GetDetail.CreateDate}}</p>

      </div>
      </div>      
      
            
            <div class="rb_top_row _r_mb5" v-if="isPrintPage">
                <p>
                    <span class="">{{$t('visa.v_tuanhao')}}：
                      <template v-if="GetDetail.TCIDAndTCNUMList&&GetDetail.TCIDAndTCNUMList.length>0">
                         <span v-for="(o,ox) in GetDetail.TCIDAndTCNUMList" >{{o.TCNUM}}（{{o.TCID}}）</span>
                      </template>
                      <span v-else>{{$t('fnc.no')}}</span>
                    </span>
                </p>
                <div>
                  <span v-if="GetDetail.OtherType!=55">{{$t('hotel.order_Number')}}：<span>{{GetDetail.OrderID?GetDetail.OrderID:$t('fnc.no')}}</span></span>
                  <span v-if="GetDetail.OtherType==55"> 机票单号：<span>{{GetDetail.ReFinanceId?GetDetail.ReFinanceId:$t('fnc.no')}}</span></span>
                </div>                
            </div>
            <div class="rb_top_row _r_mb5" v-if="isPrintPage&&OrderSource==4">
              <p>
                  <span class="">{{$t('fnc.jpbianhao')}}：
                      <span>{{GetDetail.SourceID}}</span>
                  </span>
              </p>
              <p v-if="(GetDetail.TCIDAndTCNUMList && GetDetail.TCIDAndTCNUMList.length===0) || !GetDetail.TCIDAndTCNUMList">
                    <span class="">{{$t('advmanager.v_line')}}：
                        <span>{{GetDetail.LineName?GetDetail.LineName:$t('fnc.jpswxzxianlu')}}</span>
                    </span>
              </p>
            </div>
            <div class="rb_top_row _r_mb5" v-if="isPrintPage&&OrderSource==10">
              <p>
                <span class="">{{$t('fnc.qzcpbianhao')}}：
                    <span>{{GetDetail.SourceID}}</span>
                </span>
              </p>
            </div>
            <div class="rb_top_row _r_mb5" v-if="isPrintPage&&OrderSource==9">
              <p>
                <span class="">{{$t('fnc.qishu')}}：
                    <span>{{GetDetail.Term}}</span>
                </span>
              </p>
            </div>
            <table class="Receipt_table" border="1" :class="[GetDetail.Type==1 || GetDetail.Type==5?'_border_color_r':'_border_color_b',isPrintPage?'_border_color_p':'']" :bordercolor="GetDetail.Type==1|| GetDetail.Type==5?'#c94052':'#106BAF'" style="border-collapse:collapse;">
                <tr>
                    <th rowspan="2" width="150">{{$t('fnc.fyshuoming')}}</th>
                    <th rowspan="2">{{$t('restaurant.res_Number')}}</th>
                    <th rowspan="2">{{$t('fnc.danjia')}}</th>
                    <th rowspan="2" width="100">{{$t('hotel.hotel_Currency')}}</th>
                    <th colspan="3">{{$t('fnc.jine')}}
                      <template v-if="GetDetail.StandardCurrencyId>0">({{GetDetail.StandardCurrencyName}})</template>
                    </th>
                    <th rowspan="2">{{$t('hotel.hotel_remark')}}</th>
                </tr>
                <tr>
                    <th width="88">{{$t('fnc.yuanbi')}}</th>
                    <th width="50">{{$t('hotel.hotel_CurrentRate')}}</th>
                    <th width="88">{{$t('fnc.bweibi')}}</th>
                </tr>
                <template v-if="GetDetail.DetailList&&GetDetail.DetailList.length">
                  <tr v-for="(item,index) in GetDetail.DetailList" class="_color_b">
                    <td height="26px">{{item.CostTypeName}}</td>
                    <td height="26px">{{item.Number}}</td>
                    <td height="26px">{{item.UnitPrice}}</td>
                    <td height="26px">{{item.CurrencyName}}</td>
                    <td height="26px">{{item.OriginalMoney}}</td>
                    <td height="26px">{{item.Rate}}</td>
                    <td height="26px">{{item.Money}}</td>
                    <td height="26px" style="max-width: 120px;">{{item.Remark}}</td>
                  </tr>
                </template>
                <tr>
                   <td height="26px"></td>
                    <td height="26px"></td>
                    <td height="26px"></td>
                    <td height="26px"></td>
                    <td height="26px">{{currentMoney}}</td>
                    <td height="26px"></td>
                    <td height="26px">{{benMoney}}</td>
                    <td height="26px"></td>
                </tr>
                <tr v-if="GetDetail.CashierDetail&&GetDetail.CashierDetail.length&&(GetDetail.Type!=1|| GetDetail.Type!=5)">
                  <td height="34px" class="">{{$t('tips.jiaoyifangshi')}}</td>
                  <td height="34px" colspan="7" class="_color_b">
                    <template v-for="(item,index) in GetDetail.CashierDetail">
                      <p  class=" clearfix"><span class="_bold">{{item.Alias}}-</span><span class="">{{item.TypeName}}-</span><span >{{item.AccountType==""?$t('fnc.no'):item.AccountType}}</span> {{item.BankNo?'-':''}} <span>{{item.BankNo}}</span>（{{item.Money}}）</p>
                    </template>
                  </td>
                </tr>
            </table>
        </div>
</template>
<script>
export default {
    props:["ID","width","color","isPrintPage","name","OrderSource","titleName"],  //接收参数 ID width color
    data(){
        return{
            loading:false,
            EmployeeId:'',
            EndDate:'',
            StartDate:'',
            printTime:'',
            currentMoney:0,
            benMoney:0,
            GetDetail:{}
        }
    },created(){
      let date = new Date(),
      y = date.getFullYear(),
      m = date.getMonth() < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1,
      d = date.getDate()  < 10 ? "0" + date.getDate() : date.getDate(),
      h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
      min = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
      s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      this.printTime = y + '' + m + '' + d + ' ' + h + ':' + min + ':' + s;
  },methods:{
        jumpPage(path){
          this.$router.push({
            name: path,
            query: { id: this.GetDetail.FrID,blank:'y'}
          })
        },
        Financial_post_GetDetail(id){  //获取单据详情
            if(!id) return
            this.loading = true;
            this.apipost('Financial_post_GetDetail',{ID:id}, res => {
                if(res.data.resultCode == 1) {
                    let data= res.data.data;
                    data.DetailList.forEach(x=>{
                        x.UnitPrice = this.$commonUtils.addCommas(Math.round(x.UnitPrice * 100) / 100)
                        x.Money = Math.round(x.Money * 100) / 100
                        x.OriginalMoney = Math.round(x.OriginalMoney * 100) / 100
                        this.currentMoney += parseFloat(x.OriginalMoney);
                        this.benMoney += parseFloat(x.Money);
                    })
                    this.currentMoney = Math.round(this.currentMoney * 100) / 100;
                    this.benMoney = Math.round(this.benMoney * 100) / 100;
                    this.$emit('headCallBack', this.currentMoney);
                    data.ChineseMoney = this.$commonUtils.changeMoneyToChinese(data.Money)
                    data.ChinesePayMoney = this.$commonUtils.changeMoneyToChinese(data.PayMoney)
                    data.PayMoney = this.$commonUtils.addCommas(Math.round(data.PayMoney * 100) / 100)
                    data.Money = this.$commonUtils.addCommas(Math.round(data.Money * 100) / 100)
                    data.AuditSteps.reverse()
                    this.GetDetail = data;
                    this.loading=false
                    this.$set(this.$data,"GetDetail",data);
                    let status=false;
                    if(this.GetDetail.DetailList && this.GetDetail.DetailList.length>0 && this.GetDetail.TCIDList.length>0){
                       this.GetDetail.DetailList.forEach(item=>{
                           if(item.CostTypeName=="地接费（领取）"){
                             status=true;
                           }
                       }) 
                      if(status){

                      }
                    }
                }
            }, err => {})
        },        
    },mounted(){
        const myDate = new Date();
        let yaer = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        let month = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        let dateS = myDate.getDate(); //获取当前日(1-31)
        this.StartDate = yaer + '-' + month + '-' + '01';
        this.EndDate = yaer + '-' + month + '-' + dateS;
        let userInfo = this.getLocalStorage();   
        this.EmployeeId = userInfo.EmployeeId;
        this.Financial_post_GetDetail(this.ID);
    },watch: {  // 监听参数变化
        GetDetail: {
            handler: function(val, oldVal) {
            },
            deep: true
        },
        ID:{
            handler: function(val, oldVal) {
                this.ID = val
                this.Financial_post_GetDetail(this.ID)
            },
            deep: true
        },
        titleName: {
          handler: function(val, oldVal) {
                this.titleName = val
            },
            deep: true
        }
    }
}
</script>
