<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;
    border-bottom: 1px solid #000000
  }

  .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
  }

  ._huik_info td {
    padding: 10px 0;
  }

  ._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
  }

  .rb_top_row span._r_name._no_border {
    border: none
  }

  ._font_size12 {
    font-size: 12px
  }

  ._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;
  }

  ._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;
  }

  .font_color_r {
    color: #c94052 !important;
  }

</style>
<template v-if="GetDetail.DetailList.length>0">
  <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'>

    <!-- <p style="font-size:48px;" @click="senCashierDetaildMsg">{{Num}}</p> //测试传值代码 -->
    <p class="rb_tit" style="font-size: 16px !important;">{{GetDetail.CompanyName}}（{{GetDetail.BranchName}}）</p>
    <p class="rb_stit" style="position:relative">
      <span :class="isPrintPage?'_rb_stit_print':''">{{GetDetail.FinanceName}}</span>
      <!-- <i v-if="name===1">（客户联）</i> -->
      <i v-if="name===1">{{$t('fnc.yewulian')}}</i>
      <i v-if="name===2">{{$t('fnc.kuaijilian')}}</i>
      <a class="_yewudanju" style="right:0;top:0">
        <span style="border:none;padding:0" v-if="GetDetail.OrderTradeWay==1">平台：</span>
        <span style="border:none;padding:0" v-if="GetDetail.OrderTradeWay==3">外交平台：</span>
        <span style="border:none;padding:0" class="_jump_page" @click="jumpPageNew">
          {{GetDetail.PlatFormName}}</span>
      </a>
    </p>
    <p class="_yewudanju" v-if="GetDetail.OrderSource==17&&!isPrintPage">{{$t('hotel.order_Number')}}：<span
        class="_jump_page"
        @click="GetDetail.OrderID>0?jumpPage('RegistrationList',GetDetail.TCID,1):''">{{GetDetail.OrderID?GetDetail.OrderID:'无'}}</span>
    </p>
    <!--            <p class="_yewudanju" v-if="GetDetail.OrderSource==8&&!isPrintPage">{{$t('hotel.order_Number')}}：<span class="_jump_page" @click="GetDetail.OrderID>0?jumpPage('RegistrationList',GetDetail.TCID,1):''">{{GetDetail.OrderID?GetDetail.OrderID:'无'}}</span></p>-->
    <!--            <p class="_yewudanju" v-if="GetDetail.OrderSource==15&&!isPrintPage">{{$t('hotel.order_Number')}}：<span class="_jump_page" @click="GetDetail.OrderID>0?jumpFreePage('freeTravelOrderStatiDetails',GetDetail.OrderID,1):''">{{GetDetail.OrderID?GetDetail.OrderID:'无'}}</span></p>-->
    <!--            <p class="_yewudanju" v-if="GetDetail.OrderSource==1&&!isPrintPage">{{$t('hotel.order_Number')}}：<span class="_jump_page" @click="GetDetail.OrderID>0?jumpFreePage('OpHotelOrderDetail',GetDetail.OrderID,1):''">{{GetDetail.OrderID?GetDetail.OrderID:'无'}}</span></p>-->
    <!--            <p class="_yewudanju" v-if="GetDetail.OrderSource==3&&!isPrintPage">{{$t('hotel.order_Number')}}：<span class="_jump_page" @click="GetDetail.OrderID>0?jumpFreePage('scenOrderDetails',GetDetail.OrderID,1):''">{{GetDetail.OrderID?GetDetail.OrderID:'无'}}</span></p>-->

    <p class="_yewudanju" v-if="isPrintPage">{{$t('fnc.dayinshijian')}}：<span>{{printTime}}</span></p>
    <div class="rb_top_row _r_mb5">
      <p v-if="GetDetail.CashierDetail&&GetDetail.CashierDetail[0]">{{$t('fnc.fkuanzhanghu')}}：<span
          class="_r_name _no_border">{{GetDetail.CashierDetail[0].Alias}}</span></p>
      <p style="font-weight: bold"><span class="">{{$t('hotel.hotel_SerialNumber')}}：</span>{{GetDetail.FrID}}</p>
    </div>
    <div class="rb_top_row _r_mb5">
      <p v-if="GetDetail.CashierDetail&&GetDetail.CashierDetail[0]">{{$t('fnc.skuanzhanghao')}}：<span
          class="_r_name _no_border">{{(GetDetail.CashierDetail[0].BankNo==''||GetDetail.CashierDetail[0].BankNo==null)?GetDetail.CashierDetail[0].Alias:GetDetail.CashierDetail[0].BankNo}}</span>
      </p>
      <p class="_r_time">{{GetDetail.CreateDate}}</p>
    </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>
      <span
        class="">{{$t('hotel.order_Number')}}：<span>{{GetDetail.OrderID?GetDetail.OrderID:$t('fnc.no')}}</span></span>
    </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('tips.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')}}</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!==0">
        <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 v-if="GetDetail.DetailList&&GetDetail.DetailList.length<2">
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
      </tr>
      <tr v-if="GetDetail.DetailList&&GetDetail.DetailList.length<3">
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
      </tr>
      <tr v-if="GetDetail.DetailList&&GetDetail.DetailList.length<4">
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
        <td height="26px"></td>
      </tr>
      <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>
        <td colspan="1">{{$t('fnc.shouxufei')}}<br /><span class="_font_size12">{{$t('fnc.khyuanbi')}}</span></td>
        <td colspan="3" class="_font_size12">{{GetDetail.OriginalFee}}</td>
        <td colspan="1">{{$t('fnc.shouxufei')}}<br /><span class="_font_size12">{{$t('fnc.khbweibi')}}</span></td>
        <td colspan="3" class="_font_size12">{{GetDetail.Fee}}</td>
      </tr>
      <tr>
        <td class="">{{GetDetail.Type==1|| GetDetail.Type==5?$t('fnc.skjine'):$t('fnc.fkjine')}}<br /><span
            class="_font_size12">{{$t('fnc.daxie')}}</span></td>
        <td colspan="3" class="_color_b">
          <span
            v-if="GetDetail.Is_Cashier===1">{{GetDetail.ChinesePayMoney==''?$t('fnc.ling'):GetDetail.ChinesePayMoney}}</span>
          <span v-else>{{GetDetail.ChineseMoney==''?$t('fnc.ling'):GetDetail.ChineseMoney}}</span>
        </td>
        <td class="">{{GetDetail.Type==1|| GetDetail.Type==5?$t('fnc.skjine'):$t('fnc.fkjine')}}<br /><span
            class="_font_size12">{{$t('fnc.xiaoxie')}}</span></td>
        <td colspan="3" class="_color_b">
          <span v-if="GetDetail.Is_Cashier===1">{{GetDetail.PayMoney}}</span>
          <span v-else>{{GetDetail.Money}}</span>
        </td>
      </tr>
      <tr class="_huik_info">
        <td class="">{{$t('fnc.huikuanren')}}</td>
        <td colspan="2">
          <span class="_color_b _font_size12">{{GetDetail.RemitterName}}</span>
        </td>
        <td class="">{{$t('fnc.jylshuihao')}}</td>
        <td colspan="2">
          <span class="_color_b _font_size12">{{GetDetail.AccountNumber}}</span>
        </td>
        <td class="">{{$t('fnc.hkshijian')}}</td>
        <td colspan="3">
          <span class="_color_b _font_size12">{{GetDetail.TradeDate}}</span>
        </td>
      </tr>
      <tr v-if="isPrintPage">
        <td height="26px">{{$t('hotel.hotel_remark')}}</td>
        <td height="26px" colspan="7">
          {{GetDetail.AuditSteps[GetDetail.AuditSteps.length-1].AuditRecordList[0].Remark ? GetDetail.AuditSteps[GetDetail.AuditSteps.length-1].AuditRecordList[0].Remark : '无'}}
        </td>
      </tr>
    </table>
    <div class="rb_top_row _r_mt10" v-if="GetDetail.AuditSteps&&GetDetail.AuditSteps.length">
      <template v-for="(item,index) in GetDetail.AuditSteps">
        <p>
          <span class="font_color_r">{{item.AuditDescription}}：</span>
          <template v-if="item.AuditRecordList&&item.AuditRecordList.length!=0">
            <span class="_r_name _no_border" v-for="(s,si) in item.AuditRecordList"
              v-if="((item.Sort==0) || (item.Sort!=0&&s.AuditStatus==2))&&item.AuditRecordList.length"
              :class="item.Sort==0&&!isPrintPage?'_jump_page':''"
              @click="item.Sort==0&&!isPrintPage?jumpPage('enrollTotal',GetDetail.TCID,2):''">{{s.AuditName}} </span>
          </template>
        </p>
      </template>
    </div>
    <!--<div class="_explain" v-if="isPrintPage">-->
    <!--<p>附加说明：</p>-->
    <!--<table border="1" bordercolor="#D2D2D2" style="border-collapse:collapse;margin:10px 0 10px 0;" width="100%" v-if="GetDetail.TCIDAndTCNUMList&&GetDetail.TCIDAndTCNUMList.length>0">-->
    <!--<tr v-for="(o,ox) in GetDetail.TCIDAndTCNUMList" class="_fujiashuoming_tr">-->
    <!--<td :colspan="4" v-if="GetDetail.Is_Merge===1">单据号：{{o.FinanceId}}</td>-->
    <!--<td :colspan="4">{{o.TCNUM}}（{{o.TCID}}）</td>-->
    <!--<td> <span class=" _font_bold">查看团队</span> </td>-->
    <!--<td> <span class=" _font_bold">查看报名</span> </td>-->
    <!--<td> <span class=" _font_bold">团队收支</span> </td>-->
    <!--<td v-if="OrderSource==9&&GetDetail.SourceID>0"> <span class=" _font_bold">国内票务</span> </td>-->
    <!--<td v-else-if="OrderSource==10&&GetDetail.SourceID>0"> <span class=" _font_bold">签证收支</span> </td>-->
    <!--<td v-else-if="OrderSource==4&&GetDetail.SourceID>0"> <span class=" _font_bold">机票收支</span> </td>-->
    <!--</tr>-->
    <!--</table>-->
    <!--<table border="1" bordercolor="#D2D2D2" style="border-collapse:collapse;margin:10px 0 10px 0;" width="100%" v-else-if="OrderSource==10">-->
    <!--<tr class="_fujiashuoming_tr">-->
    <!--<td>签证产品编号：<span class="_jump_page _font_bold">{{GetDetail.SourceID}}</span></td>-->
    <!--<td > <span class=" _font_bold">签证收支</span></td>-->
    <!--</tr>-->
    <!--</table>-->
    <!--<table border="1" bordercolor="#D2D2D2" style="border-collapse:collapse;margin:10px 0 10px 0;" width="100%" v-else-if="OrderSource==9">-->
    <!--<tr class="_fujiashuoming_tr">-->
    <!--<td>期数：{{GetDetail.Term}}</td>-->
    <!--<td > <span class=" _font_bold">国内票务</span></td>-->
    <!--</tr>-->
    <!--</table>-->
    <!--<table border="1" bordercolor="#D2D2D2" style="border-collapse:collapse;margin:10px 0 10px 0;" width="100%" v-else-if="OrderSource==4">-->
    <!--<tr class="_fujiashuoming_tr">-->
    <!--<td>机票编号：{{GetDetail.SourceID}}</td>-->
    <!--<td > <span class=" _font_bold">机票收支</span></td>-->
    <!--</tr>-->
    <!--</table>-->
    <!--<div style="margin-top: 5px">-->
    <!--<p>制单部门：<span class="_font_bold">{{GetDetail.DepartName}}</span></p>-->
    <!--</div>-->
    <!--</div>-->
  </div>
</template>
<script>
  export default {
    props: ["ID", "width", "color", "isPrintPage", "name", "Num", "OrderSource"], //接收参数 ID width color isPrintPage
    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: {
      sendMsg() {
        this.$emit('helloPP', '1')
      },
      jumpPageNew() {
        this.$router.push({
          name: 'platOrderquery',
          query: {
            platName: this.GetDetail.PlatFormName,
            TradeWay: this.GetDetail.OrderTradeWay,
            PlatformAccount: this.GetDetail.PlatformAccountId,
            blank: 'y',
            tab: '平台订单查询'
          }
        })
      },
      jumpFreePage(path, id) {
        this.$router.push({
          name: path,
          query: {
            ID: id,
            blank: 'y',
            tab: '订单详情'
          }
        })
      },
      jumpPage(path, id, type) {
        if (type == 1) {
          // let routeData = this.$router.resolve({
          //     name: path,
          //     query: { id:id,orderID:this.GetDetail.OrderID,isShow:false}
          // });
          // window.open(routeData.href, "_blank");
          // let idStr = '';
          // if(this.GetDetail.TCIDList.length>0){
          //   idStr = this.GetDetail.TCIDList[0];
          // }
          //   this.$router.push({
          //       name: path,
          //       query: { id:idStr,orderID:this.GetDetail.OrderID,isShow:false,blank:'y',tab:'报名清单'}
          //   })
          this.OpenNewUrl('/sale/orderStatistics', {
            OrderId: this.GetDetail.OrderID
          })
        } else if (type == 2) {
          // let routeData = this.$router.resolve({
          //     name: path,
          //     query: { starTime:this.StartDate,endTime:this.EndDate,EmployeeId:this.EmployeeId}
          // });
          // window.open(routeData.href, "_blank");
          this.$router.push({
            name: path,
            query: {
              starTime: this.StartDate,
              endTime: this.EndDate,
              EmployeeId: this.EmployeeId,
              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;
            let numberC = 0;
            let price = 0;
            let rate = 0;
            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;
            let m = data.PayMoney ? data.PayMoney : data.Money;
            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);
          }
        }, 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
      },
      num: {
        handler: function (val, oldVal) {},
        deep: true
      },
    }
  }

</script>
