<template>
  <style id="printPaymentApprovalStyle">
   #printPaymentApproval td {
      height: 60px;
      text-align: center;
    }

   #printPaymentApproval table {
      margin: auto;
      width: 100%;
      border-collapse: collapse;
      border: 1px solid black;
    }
   #printPaymentApproval h1,
   #printPaymentApproval h2,
   #printPaymentApproval h3,
   #printPaymentApproval h4,
   #printPaymentApproval h5,
   #printPaymentApproval h6 {
      text-align: center;
    }

   #printPaymentApproval .orgs {
      border-bottom: 2px solid;
      padding: 5px;
    }

   #printPaymentApproval .date {
      float: left;
      padding-left: 10px;
    }

   #printPaymentApproval .status {
      float: right;
      padding-right: 10px;
    }

   #printPaymentApproval .seal {
      position: absolute;
      right: 100px;
      top: 120px;
      width: 150px;
      height: 150px;
      /*opacity: 0.5;*/
      z-index: -1;
    }
  </style>
  <div style="margin-bottom: 20px" class="form-group select-overspread">
    <label class="control-label-justify control-label col-sm-10">打印付款事由</label>
    <div class="col-sm-2">
      <button class="button_search button_spacing" type="button" style="width: max-content;position: absolute"
              @click="openModal()">打印预览
      </button>
    </div>
  </div>
  <modal v-if="showModal" :show.sync="showModal" title="打印预览" v-ref:modal large backdrop="false">
    <header slot="modal-header" class="modal-header">
      <button type="button" class="close" @click="colseModal()"><span>&times;</span></button>
      <h4 class="modal-title">打印预览</h4>
    </header>
    <article slot="modal-body" class="modal-body">
      <div id="printPaymentApproval">
        <h4>
          榆 林 榆 川 天 然 气 有 限 责 任 公 司
        </h4>
        <h2>
        付 款 事 由 明 细
        </h2>
        <table border="1" width="100%">
          <tr style="text-align: center;">
            <td>用户编号</td>
            <td>用户姓名</td>
            <td>用户电话</td>
            <td>用户地址</td>
            <td>最后购气时间</td>
            <td>累购气量</td>
            <td>累购金额</td>
            <td>系统显示底数</td>
          </tr>
          <tr style="text-align: center;" v-for="i in chaiChuInfo.length">
            <td>{{chaiChuInfo[i].f_userinfo_id}}</td>
            <td>{{chaiChuInfo[i].f_user_name}}</td>
            <td>{{chaiChuInfo[i].f_user_phone}}</td>
            <td>{{chaiChuInfo[i].f_address}}</td>
            <td>{{chaiChuInfo[i].f_delivery_date}}</td>
            <td>{{chaiChuInfo[i].f_gas_total}}</td>
            <td>{{chaiChuInfo[i].f_money_total}}</td>
            <td>{{chaiChuInfo[i].f_meter_base}}</td>
          </tr>
        </table>
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-primary" @click="print()">打印</button>
    </footer>
  </modal>

  <apply-print-element v-show="false" v-ref:print id='printPaymentApproval' styleid='printPaymentApprovalStyle'
                 top='20' left='30' width='100%' height='100%'>
  </apply-print-element>
</template>

<script>
import {isEmpty} from '../../../../Util'
import {HttpResetClass} from "vue-client";

Date.prototype.Format = function (fmt) {
  var o = {
    'M+': this.getMonth() + 1, // 月份
    'd+': this.getDate(), // 日
    'H+': this.getHours(), // 小时
    'm+': this.getMinutes(), // 分
    's+': this.getSeconds(), // 秒
    'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
    'S': this.getMilliseconds() // 毫秒
  }
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
  for (var k in o)
    if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
  return fmt
}
export default {
  title: '打印付款事由',
  props: ['selectdata'],
  data () {
    return {
      showModal: false,
      device: null,
      chaiChuInfo: {}
    }
  },
  ready () {
  },
  methods: {
    openModal () {
      this.getChaiChuInfo()
      this.showModal = true
    },
    async getChaiChuInfo () {
      let data = {
        tablename: 't_apply_chai',
        condition: `f_process_id = '${this.selectdata.f_process_id}'`
      }
      let http = new HttpResetClass()
      let res = await http.load(
        'POST',
        `rs/sql/applySingleTable`,
        {data: data},
        {resolveMsg: null, rejectMsg: '销户信息查询失败！！！'}
      )
      this.chaiChuInfo = res.data
    },
    colseModal () {
      this.showModal = false
    },
    print () {
      this.showInput = false
      setTimeout(() => {
        this.$refs.print.PrintTable()
      }, 10)
    },
  },
  computed: {
    orgs () {
      return this.$login.f.f_fengongsi
    },
    src () {
    }
  }
}
</script>

<style scoped>

</style>
