<template>
  <div>
    <j-modal
      title="收据模板"
      width="70%"
      :visible="visible"
      switchFullscreen
      @ok="handleOk"
      :okButtonProps="{ class:{'jee-hidden': false} }"
      @cancel="handleCancel"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel">关闭</a-button>
      </template>
      <div>
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          class="j-table-force-nowrap"
        >
          <span slot="receiptStatus" slot-scope="text, record">
            <span :style="{'color': record.receiptStatus === '1' ? 'green' : 'red'}">{{record.receiptStatus === '1' ? '是' : '否'}}</span>
          </span>
          <span slot="action" slot-scope="text, record">
            <a @click="handlePreviewPdf(record)">预览</a>
            <a-divider type="vertical" />
            <a @click="handleSaveToPdf(record)">下载</a>
          </span>
        </a-table>
      </div>
    </j-modal>

    <vue-html2pdf
      :show-layout="false"
      :float-layout="true"
      :enable-download="true"
      :preview-modal="false"
      :html-to-pdf-options="pdfOptions"
      :paginate-elements-by-height="1400"
      filename="tempFileName"
      :pdf-quality="2"
      :manual-pagination="false"
      pdf-format="a4"
      pdf-orientation="landscape"
      pdf-content-width="98%"
      @progress="onProgress"
      ref="html2PdfDownLoad"
    >
      <section slot="pdf-content">
        <!-- PDF Content Here -->
        <span id="report" v-html="content"></span>
      </section>
    </vue-html2pdf>

    <vue-html2pdf
      :show-layout="false"
      :float-layout="true"
      :enable-download="false"
      :preview-modal="true"
      :html-to-pdf-options="pdfOptions"
      :paginate-elements-by-height="1400"
      filename="tempFileName"
      :pdf-quality="2"
      :manual-pagination="false"
      pdf-format="a4"
      pdf-orientation="landscape"
      pdf-content-width="98%"
      @progress="onProgress"
      ref="html2PdfPreview"
    >
      <section slot="pdf-content">
        <!-- PDF Content Here -->
        <span id="report" v-html="content"></span>
      </section>
    </vue-html2pdf>
  </div>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import VueHtml2pdf from "vue-html2pdf";
  // const content = '<h3 style="text-align: center;"><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="收据名称" data-info="%7B%22id%22%3A%22a%22%7D">@收据名称</span></h3><p style="text-align: center;">单号：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="单号" data-info="%7B%22id%22%3A%22b%22%7D">@单号</span></p><p style="text-align: left;">业主：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="业主名称" data-info="%7B%22id%22%3A%22c%22%7D">@业主名称</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;缴费时间：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="缴费时间" data-info="%7B%22id%22%3A%22d%22%7D">@缴费时间</span></p><hr/><p style="line-height: 2.5;">今收到 <u> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </u> 金额（大写）<u> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</u><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="大写金额" data-info="%7B%22id%22%3A%22e%22%7D">@大写金额</span><u> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</u></p><p style="line-height: 2.5;">收款单位（盖章） &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;¥：<u> &nbsp; &nbsp;</u><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="小写金额" data-info="%7B%22id%22%3A%22f%22%7D">@小写金额</span><u> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</u></p><hr/><p>开票人：<span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="审核人" data-info="%7B%22id%22%3A%22g%22%7D">@审核人</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 收款人：<span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="审核人" data-info="%7B%22id%22%3A%22g%22%7D">@审核人</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;客户：<span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="业主名称" data-info="%7B%22id%22%3A%22c%22%7D">@业主名称</span></p>'
  let receiptObj = {}

  const columns = [
    {
      title: '收据编号',
      dataIndex: 'templateCode',
      key: 'templateCode',
      align: 'center'
    },
    {
      title: '收据名称',
      dataIndex: 'templateName',
      key: 'templateName',
      align: 'center'
    },
    {
      title: '收据类型',
      dataIndex: 'typeName',
      key: 'typeName',
      align: 'center'
    },
    {
      title: '上传人',
      dataIndex: 'createBy',
      key: 'createBy',
      align: 'center'
    },
    {
      title: '上传时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'action',
      scopedSlots: { customRender: 'action' },
      align: 'center',
      width: 150,
      fixed: 'right'
    }
  ]

  export default {
    name: 'PropertySettledModal',
    mixins: [JeecgListMixin],
    components: {
      VueHtml2pdf
    },
    data () {
      return {
        columns: columns,
        url: {
          list: "/property-company/system/receiptTemplate/list"
        },
        visible: false,

        content: '',
        // previewModal: false,
        pdfOptions: {
          margin: [20, 10, 20, 10],
          filename: ''
        }
      }
    },
    methods: {
      onLoadTemplate(receipt) {
        receiptObj = {...receipt}
        this.visible=true
        this.loadData()
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.$refs.realForm.submitForm();
      },
      handleCancel () {
        this.close()
      },
      onProgress(e) {
        console.log(e)
      },
      dealBigMoney(number) {       
        if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(number)) return "数据非法";
        let unit = "仟佰拾亿仟佰拾万仟佰拾元角分", str = "";
        let n =  number + "00";
        let p = n.indexOf('.');
        if (p >= 0){
          n = n.substring(0, p) + n.substr(p+1, 2);
          unit = unit.substr(unit.length - n.length);
        }
        
        for (var i=0; i < n.length; i++) {
          str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);
        }
        return str.replace(/零(仟|佰|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整");
      },
      handleSaveToPdf(row) {
        this.pdfOptions.filename = '收费模板'
        let content = row.templateStyle
        let capitalizationAmont = this.dealBigMoney(receiptObj.totalAmount)
        content = content.replace(/@收据名称/g, row.templateName)
        content = content.replace(/@单号/g, receiptObj.paymentNum)
        content = content.replace(/@业主名称/g, receiptObj.residentName)
        content = content.replace(/@缴费时间/g, receiptObj.paymentTime)
        content = content.replace(/@大写金额/g, capitalizationAmont)
        content = content.replace(/@小写金额/g, receiptObj.totalAmount)
        content = content.replace(/@审核人/g, receiptObj.updateBy)
        this.$refs.html2PdfDownLoad.generatePdf();
      },
      handlePreviewPdf(row) {
        let content = row.templateStyle
        let capitalizationAmont = this.dealBigMoney(receiptObj.totalAmount)
        content = content.replace(/@收据名称/g, row.templateName)
        content = content.replace(/@单号/g, receiptObj.paymentNum)
        content = content.replace(/@业主名称/g, receiptObj.residentName)
        content = content.replace(/@缴费时间/g, receiptObj.paymentTime)
        content = content.replace(/@大写金额/g, capitalizationAmont)
        content = content.replace(/@小写金额/g, receiptObj.totalAmount)
        content = content.replace(/@审核人/g, receiptObj.updateBy)
        // content = content.replace(/<p style="line-height: 2.5;">/g, '<p style="line-height: 2.5;border-bottom:1px solid #333;">')
        this.content = content
        this.$refs.html2PdfPreview.generatePdf()
      }
    }
  }
</script>