<template>
  <style id="printChargeStyle">
    td {
      height: 30px;
      text-align: center;
    }

    table {
      margin: auto;
      width: 100%;
      border-collapse: collapse;
      border: 1px solid black;
    }

    h1, h2, h3, h4, h5, h6 {
      text-align: center;
    }

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

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

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

    .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="printCharge">
        <h4>
        {{ orgs }}工料费解款单
        </h4>
        <table border="1" width="100%">
          <tr>
            <td style="width: 17%">工程编号：</td>
            <td colspan="2" style="border: none">
              {{ selectdata.f_apply_num }}
            </td>
            <td style="width: 17%">开单日期：</td>
            <td colspan="2" style="border: none">
              {{ new Date().Format('yyyy年MM月dd日') }}
            </td>
          </tr>
          <tr>
            <td style="width: 17%">用户姓名：</td>
            <td colspan="2" style="width: 33%">{{ selectdata.f_user_name }}</td>
            <td style="width: 17%">联系人：</td>
            <td colspan="2" style="width: 33%">{{ selectdata.f_contact }}</td>
          </tr>
          <tr>
            <td>用户地址：</td>
            <td colspan="5">{{ selectdata.f_address }}</td>
          </tr>
          <tr>
            <td>报装类型：</td>
            <td colspan="5">{{selectdata.f_apply_type}}</td>
          </tr>
          <tr>
            <td>金额：</td>
            <td colspan="2">{{ selectdata.f_due_money }}元</td>
            <td>金额大写：</td>
            <td colspan="2">{{ selectdata.f_amount_words }}</td>
          </tr>
          <tr>
            <td>收款单位：</td>
            <td colspan="2">榆林榆川天然气有限责任公司</td>
            <td>项目来源：</td>
            <td colspan="2">天然气工程材料费</td>
          </tr>
          <tr>
            <td>收款账号：</td>
            <td colspan="2">1033 0780 0589</td>
            <td>解款部门：</td>
            <td colspan="2">中国银行 榆林西沙支行</td>
          </tr>
          <tr>
            <td>改线原因：</td>
            <td colspan="5">{{ selectdata.f_cause}}</td>
          </tr>
          <tr>
            <td>注：</td>
            <td colspan="5" style="color: red">转账用户需榆林大道火车站对面恒丰新世纪一楼取确认收款单后来公司换取发票。</td>
          </tr>
        </table>
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-primary" @click="print()">打印</button>
    </footer>
  </modal>

  <print-element v-show="false" v-ref:print id='printCharge' styleid='printChargeStyle'
                 top='20' left='30' width='100%' height='100%'>
  </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
    }
  },
  ready () {
    this.getDevice(this.selectdata.f_process_id)
  },
  methods: {
    openModal () {
      if (this.selectdata.f_due_money >= 0 ) {
        this.smalltoBIG(this.selectdata.f_due_money)
      }
      this.showModal = true
    },
    colseModal () {
      this.showModal = false
    },
    print () {
      this.showInput = false
      setTimeout(() => {
        this.$refs.print.PrintTable()
      }, 10)
    },
    // 金额转大写
    smalltoBIG (n) {
      let fraction = ['角', '分']
      let digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
      let unit = [['元', '万', '亿'], ['', '拾', '佰', '仟']]
      let head = n < 0 ? '欠' : ''
      n = Math.abs(n)

      let s = ''

      for (var i = 0; i < fraction.length; i++) {
        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '')
      }
      s = s || '整'
      n = Math.floor(n)

      for (var i = 0; i < unit[0].length && n > 0; i++) {
        let p = ''
        for (var j = 0; j < unit[1].length && n > 0; j++) {
          p = digit[n % 10] + unit[1][j] + p
          n = Math.floor(n / 10)
        }
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
      }
      let result = head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整')
      console.log('当前大写', result)
      this.selectdata.f_amount_words = result
    },
    async getDevice (f_process_id) {
      let data = {
        f_process_id: f_process_id
      }
      let http = new HttpResetClass()
      let res = await http.load(
        'POST',
        `rs/sql/getUserDevices`,
        {data: data},
        {resolveMsg: null, rejectMsg: null}
      )
      let device = ''
      for (let i = 0; i < res.data.length - 1 ; i++){
        if (res.data[i].f_devices_type === null){
          res.data[i].f_devices_type = '设备'
        }
        console.log("设备信77息",res.data[i].f_devices_type)
        device = device + res.data[i].f_devices_count + '个' + res.data[i].f_devices_type + ','
      }
      if (res.data.length > 0){
        device = device + res.data[res.data.length - 1].f_devices_count + '个' + res.data[res.data.length - 1].f_devices_type
      }
      if (device === ''){
        device = '无设备'
      }
      console.log("设备信息",device)
      this.device = device
      return device
    }
  },
  computed: {
    orgs () {
      return this.$login.f.f_fengongsi
    },
    src () {
      // return require(`./img/${this.$login.f.number}.png`)
    }
  }
}
</script>

<style scoped>

</style>
