<template>
  <button class="button_export button_spacing" @click="stamp()">打印</button>
</template>

<script>
  import getLodop from '../../../../../plugins/LodopFuncs'
  import {PagedList} from "vue-client";

  export default {
    name: "DayReportListPrint",
    title: '日报表打印',
    props: {
      countmodel:{
        type:Object,
        default:{}
      }
    },
    data() {
      return {
        modelval: [],
        fields: {},
        thead: '',
        tfoot: '',
        model:{},
        sumsmodel:{},
        orgname: '',
        depname: '0'
      }
    },
    methods: {
      stamp() {
         this.model = this.countmodel.model,
          this.sumsmodel = this.countmodel.sumsmodel,
          this.orgname = this.countmodel.orgname,
          this.depname = this.countmodel.depname
        // 验证，必须选择用气性质
        if (this.model.model.f_gasproperties.length == 0) {
          this.$showAlert('请选择用气性质条件，点击查询之后再进行打印！！', 'warning', 3000)
          return
        };

        //默认选择要打印的列
        this.modelval = [
          "f_userinfo_code",
          "f_user_name",
          "f_stair1amount",
          "f_stair1price",
          "f_stair2amount",
          "f_stair2price",
          "f_stair3amount",
          "f_stair3price",
          "f_collection",
          "f_operator",
          "f_type",
          "f_comments",
          "f_operate_date"
        ];
        this.fields = {
          "f_userinfo_code": "客户编号",
          "f_user_name": "客户姓名",
          "f_operate_date": "充值时间",
          "f_stair1amount": "1气量",
          "f_stair1price": "1单价",
          "f_stair2amount": "2气量",
          "f_stair2price": "2单价",
          "f_stair3amount": "3气量",
          "f_stair3price": "3单价",
          "f_pregas": "气量",
          "f_preamount": "应收金额",
          "f_collection": "实收金额",
          "f_balance": "上期结余",
          "f_curbalance": "本期结余",
          "f_payment": "付款方式",
          "f_type": "收费类型",
          "f_operator": "操作员",
          "f_user_type": "用户类型",
          "f_comments": "备注"
        };
        this.put();
        this.print();
      },
      put() {
        this.thead = `
        <tr>
          <th class="biaoti" colspan=${this.modelval.length} style="font-size: 6mm">
              ${this.orgname}${this.depname ? this.depname : ''}统计报表   ${this.model.model.f_gasproperties ? this.model.model.f_gasproperties : ''}
              ${this.model.model.f_type ? this.model.model.f_type : ''}
          </th>
        </tr>
        <tr>
          <th class="biaoti" colspan=${this.modelval.length}>统计日期：${this.model.model.f_startDate} 00:00:00 ~ ${this.model.model.f_endDate} 23:59:59</th></tr>
        <tr>
        <tr>
          <th class="biaoti" colspan=${this.modelval.length}>制单人：${this.$login.f.name} 打印时间: ${this.$login.toStandardTimeString()}</th></tr>
        <tr style="text-align: left;font-family: 微软雅黑">
          <th colspan=${this.modelval.length}>
            <span>发卡人次: ${this.sumsmodel.f_count_open}</span>
            <span>再购人次: ${this.sumsmodel.f_count_zg}</span>
            <span>补气人次: ${this.sumsmodel.f_count_bq}</span>
            <span>补卡人次: ${this.sumsmodel.f_count_bk}</span>
            <span>换表人次: ${this.sumsmodel.f_count_hb}</span>
            <span>冲正人次: ${this.sumsmodel.f_count_cz}</span>
            <span>业务人次: ${this.sumsmodel.f_sum_count}</span>
          </th>
        </tr>
        <tr style="text-align: left;font-family: 微软雅黑">
          <th colspan=${this.modelval.length}>
            <span>发卡气量: ${this.sumsmodel.f_pregas_open}</span>
            <span>再购气量: ${this.sumsmodel.f_pregas_zg}</span>
            <span>补气气量: ${this.sumsmodel.f_pregas_bq}</span>
            <span>补卡气量: ${this.sumsmodel.f_pregas_bk}</span>
            <span>换表气量: ${this.sumsmodel.f_pregas_hb}</span>
            <span>冲正气量: ${this.sumsmodel.f_pregas_cz}</span>
            <span>业务气量: ${this.sumsmodel.f_shouru_gas}</span>
          </th>
        </tr>
        <tr style="text-align: left;font-family: 微软雅黑">
          <th colspan=${this.modelval.length}>
            <span>发卡金额: ${this.sumsmodel.f_collection_open}</span>
            <span>再购金额: ${this.sumsmodel.f_collection_zg}</span>
            <span>补气金额: ${this.sumsmodel.f_collection_bq}</span>
            <span>补卡金额: ${this.sumsmodel.f_collection_bk}</span>
            <span>换表金额: ${this.sumsmodel.f_collection_hb}</span>
            <span>冲正金额: ${this.sumsmodel.f_collection_cz}</span>
            <span>业务金额: ${this.sumsmodel.f_shouru_fee}</span>
          </th>
        </tr>`

        this.thead += '<tr>';
        for (let key of this.modelval) {
          if (this.fields[key] == '客户姓名') {
            this.thead += '<th class="khxm">' + this.fields[key] + '</th>'
          } else if (this.fields[key] == '备注') {
            this.thead += '<th class="bz">' + this.fields[key] + '</th>'
          } else {
            this.thead += '<th class="other">' + this.fields[key] + '</th>'
          }
        }
        this.thead += '</tr>'
      },
      async print() {
        // 开始打印
        let lodop = getLodop()
        lodop.PRINT_INIT('打印')

        // 是否横向打印
        console.log('是否横向打印？？', this.model.model.f_gasproperties[0])
        let isHeng = this.model.model.f_gasproperties[0] === '居民用气' ? 1 : 2
        lodop.SET_PRINT_PAGESIZE(isHeng, 0, 0, "A4");

        // 定义样式
        let style;
        if (isHeng == 2) {//横向打印
          style = '' +
            '<style>table {border-collapse: collapse;font-size:2.8mm} ' +
            'table th {border-collapse: collapse;width: 264mm;border: 0.2mm solid black} ' +
            'table td {border-collapse: collapse;text-align: center;border: 0.2mm solid black} ' +
            '.biaoti {border-color: transparent} ' +
            'table span {width: 36mm;text-align: left;display:inline-block}' +
            '.comments {text-overflow: ellipsis;overflow: hidden} ' +
            '.khxm {border-top: 0;width: 44.88mm} ' +
            '.bz {border-top: 0;width: 34.32mm} ' +
            '.other {border-top: 0;width: 18.48mm}</style>'
        } else {
          // 定义样式
          style = '<style>table {border-collapse: collapse;font-size:2.8mm}' +
            'table th {border-collapse: collapse;width: 180mm;border: 0.2mm solid black;}' +
            'table td {border-collapse: collapse;text-align: center;border: 0.2mm solid black} ' +
            '.biaoti {border-color: transparent} ' +
            'table span {width: 25mm;text-align:left;display:inline-block;}' +
            '.comments {text-overflow: ellipsis;overflow: hidden} ' +
            '.khxm {border-top: 0;width: 14.4mm} ' +
            '.bz {border-top: 0;width: 21.6mm} ' +
            '.other {border-top: 0;width: 14.4mm}</style>'
        }


        let tHtml = style + '<table><thead>' + this.thead + '</thead><tbody>'
        for (var i = 1; i <= this.model.totalPage; i++) {
          await this.model.loadPage(i)
          for (let j = 0; j < this.model.rows.length; j++) {
            tHtml += '<tr>'
            for (let field of this.modelval) {
              if (field && this.model.rows[j]) {
                if (field === 'f_comments' && this.model.rows[j][field]) {
                  tHtml += '<td class="comments">' +
                    this.model.rows[j][field].substring(0, 10)
                    + '</td>'
                } else {
                  tHtml += '<td>' + this.model.rows[j][field] + '</td>'
                }
              }
            }
            tHtml += '</tr>'
          }
        }
        this.tfoot = `
         <tr>
          <td class="defaulttd" colspan='2' >
            合计
          </td>
          <td class="defaulttd" colspan='2'  tdata="allSum" format="#,##0.00" align="right">
            <font color="#0000FF" tindex="3">###方</font>
          </td>
          <td class="defaulttd" colspan='2'  tdata="allSum" format="#,##0.00" align="left">
            <font color="#0000FF" tindex="5">###方</font>
          </td>
          <td class="defaulttd" colspan='2'  tdata="allSum" format="#,##0.00" align="right">
            <font color="#0000FF" tindex="7">###方</font>
          </td>
          <td class="defaulttd" colspan='4'  tdata="allSum" format="#,##0.00" align="left">
            <font color="#0000FF"  tindex="9">###元</font>
          </td>
        </tr>`

        // 如果有表尾，则添加表尾，如果内容翻页的话，表尾每一页都要打印
        tHtml += `</tbody><tfoot>${this.tfoot}</tfoot></table>`
        console.log('打印的html', tHtml)
        //ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项
        if (isHeng == 2) {//横向打印
          lodop.ADD_PRINT_TABLE(0, 0, "264mm", 'BottomMargin:' + 30, tHtml);//增加表格项
        } else {
          lodop.ADD_PRINT_TABLE(0, 0, "200mm", 'BottomMargin:' + 30, tHtml);//增加表格项
        }
        lodop.SET_PRINT_STYLEA(0, "Horient", 2);//打印项在纸张中水平居中
        // lodop.SET_PRINT_STYLEA(0,"Vorient",2);//打印项在纸张中垂直居中
        // lodop.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Full-width')

        // 设置页脚
        lodop.ADD_PRINT_HTM("96%", "45%", 100, 50, `<font color='#0000ff' format='##'><span tdata='pageNO'>第##页</span>/<span tdata='pageCount'>共##页</span></font>`);//增加超文本项
        lodop.SET_PRINT_STYLEA(0, "ItemType", 1);
        lodop.SET_PRINT_STYLEA(0, "Horient", 2);

        // lodop.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Full-width')
        // 设置打印方式 （横向|纵向）
        lodop.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", 1);
        // 打印维护
        // lodop.PRINT_SETUP()
        // 使用打印预览是为了方便调整打印格式。例如：横向打印
        lodop.PREVIEW()
      },
    }


  }
</script>

<style scoped>

</style>
