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

  .font_color_r {
    color: #c94052 !important;
  }

  .sjbox {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }

  .sjbox .sjbox_l {
    border: 1px solid #111;
    flex: 1;
    padding: 30px;
  }

  .sjbox .sjbox_l .sjbox_l_t {
    font-size: 16px;
    display: flex;
    align-items: center;
  }

  .sjbox .sjbox_l_t_x {
    border-bottom: 1px solid #111;
    flex: 1;
    margin-left: 10px;
  }

  .sjbianhao {
    font-size: 20px !important;
    color: red;
  }

  .Receipt_box.background_red {
    background: #ecdaea;
  }

  .color_bt {
    color: #323278;
  }
</style>
<template v-if="GetDetail.DetailList.length>0">
  <div class="Receipt_box" :class="[name==1?'':'background_red']" :style="{width:width,}" @click.stop
    v-loading='loading'>


    <div style="text-align:center;margin: 10px 0;font-weight: bold;">
      <span
        style="border-bottom:3px double black;cursor:pointer;letter-spacing:10px;font-size: 30px !important">收款收据</span>
    </div>
    <div style="display: flex;align-items: center; justify-content: space-between;margin-right: 22px;">
      <div>开票日期：<span :class="[name==1?'':'color_bt']">{{GetDetail.CreateTime}}</span> </div>
      <div>编号： <span class="sjbianhao" :class="[name==1?'':'color_bt']">{{GetDetail.ReceiptNo}}</span> </div>

    </div>

    <!-- <p class="_yewudanju" v-if="isPrintPage">打印时间：<span >{{printTime}}</span></p> -->


    <div class="sjbox">
      <div class="sjbox_l">
        <div class="sjbox_l_t">
          <span>交款人</span>
          <span class="sjbox_l_t_x" :class="[name==1?'':'color_bt']">{{GetDetail.Remitter}}</span>
        </div>
        <div class="sjbox_l_t" style="margin-top: 30px;">
          <div style="display: flex;align-items: center;flex:1">
            <span>人民币(大写)</span>
            <span class="sjbox_l_t_x" :class="[name==1?'':'color_bt']">{{GetDetail.ChinesePayMoney}}</span>
          </div>
          <div style="display: flex;align-items: center;margin-left: 10px;">
            <span>￥：</span>
            <span class="sjbox_l_t_x" style="width: 200px" :class="[name==1?'':'color_bt']">{{GetDetail.Money}}</span>
          </div>
        </div>
        <div class="sjbox_l_t" style="margin-top: 30px;">
          <span>收款事由</span>
          <span class="sjbox_l_t_x" :class="[name==1?'':'color_bt']">{{GetDetail.Remark}}</span>

        </div>
      </div>
      <div style="display: flex;flex-direction: column;align-items: center;width: 20px;line-height: 17px;"
        v-if="name==1">
        <div>第</div>
        <div>一</div>
        <div>联</div>
        <div>︵</div>
        <div>白</div>
        <div>︶</div>
        <div>存</div>
        <div>根</div>
        <div>联</div>
      </div>
      <div style="display: flex;flex-direction: column;align-items: center;width: 20px;line-height: 17px;"
        v-if="name==2">
        <div>第</div>
        <div>二</div>
        <div>联</div>
        <div>︵</div>
        <div>红</div>
        <div>︶</div>
        <div>客</div>
        <div>户</div>
        <div>联</div>
      </div>
    </div>

    <div class="rb_top_row _r_mt10" v-if="AuditSteps&&AuditSteps.length" style="margin-right: 22px;">
      <template v-for="(item,index) in AuditSteps">
        <p>
          <span class="_border_color_p">{{item.Name}}：</span>
          <template v-if="item.Id==4">
            <span class="_r_name _no_border" :style="{color:name==1?'':'#323278'}"
              :class="[item.Sort==0&&!isPrintPage?'_jump_page':'']">{{GetDetail.CreateByName}} </span>
          </template>
          <template v-if="item.Id==1">
            <div style="position: relative;">
              <el-image style="width: 100px; height: 100px;position: absolute;bottom: -5px;left: 75px;"
                :src="GetDetail.SealImages"></el-image>
            </div>

          </template>
        </p>
      </template>

    </div>
  </div>
</template>
<script>
  import {
    getReceiptInfoForFinanceId,

  } from '../../../api/finance/index'
  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: {},
        AuditSteps: [{
          Id: 1,
          Name: '单位盖章'
        }, {
          Id: 2,
          Name: '出纳'
        }, {
          Id: 3,
          Name: '交款方式'
        }, {
          Id: 4,
          Name: '开票人'
        }, ],
      }
    },
    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: '平台订单查询'
          }
        })
      },
      Financial_post_GetDetail(id) { //获取单据详情
        if (!id) return;
        this.loading = true;
        getReceiptInfoForFinanceId({
          FinanceId: id
        }).then(res => {
          if (res.Code == 1) {
            this.loading = false;
            let data = res.Data;
            data.ChinesePayMoney = this.$commonUtils.changeMoneyToChinese(data.Money)
            data.Money = this.$commonUtils.addCommas(Math.round(data.Money * 100) / 100)
            this.GetDetail = data;
            this.$set(this.$data, "GetDetail", data);
          }
        })

      },
    },
    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: { // 监听参数变化

      ID: {
        handler: function (val, oldVal) {
          this.ID = val
          this.Financial_post_GetDetail(this.ID)
        },
        deep: true
      },

    }
  }
</script>