<template>
  <div>
    <a-modal
      v-model="showModal"
      title="收费发票"
      width="60vw"
      @ok="printGen"
      @cancel="cancel"
      style="min-width: 800px"
      :z-index=1009
    >
      <a-skeleton v-if="!loaded" active/>
      <div
        class="normal-bill"
        style="display: flex;justify-content: center;"
        id="normal-bill"
        v-else
        v-html="bill.data">
      </div>
    </a-modal>
    <div
      class="normal-bill"
      style="justify-content: center;"
      id="normal-bill-hide"
      v-show="false"
      v-html="bill.data">
    </div>
  </div>
</template>
<script>
import { hiprint } from '@afwenming123/vue-plugin-hiprint'
import DataModel from '@vue2-client/services/DataModel'
import { mapState } from 'vuex'
import { getConfigByNameAsync } from '@vue2-client/services/api/common'
import { printHtml } from '@vue2-client/base-client/components/common/XPrint/PrintHtml'
import hiPrintCss from './css/hiPrintCss'

export default {
  title: '收费发票',
  data () {
    return {
      model: {},
      bill: {},
      hiprintTemplate: undefined,
      showModal: false,
      loaded: false,
      id: 'normal-bill'
    }
  },
  props: {
    serviceName: {
      type: String,
      default: process.env.VUE_APP_SYSTEM_NAME
    },
    autoPrint: {
      type: Boolean,
      default: false
    },
    top: {
      type: String,
      default: '5mm'
    },
    left: {
      type: String,
      default: '5mm'
    },
    width: {
      type: String,
      default: '90%'
    },
    height: {
      type: String,
      default: '80%'
    },
    extra: {
      type: Object,
      default: function () {
        return {
          count: 0,
          tops: []
        }
      }
    }
  },
  ready () {
  },
  computed: {
    ...mapState('account', { currUser: 'user' }),
  },
  methods: {
    cancel () {
      this.showModal = false
      this.$emit('ok')
    },
    async getBillData (data) {
      // 模板打印
      if (data.template) {
        this.id = 'preview_content_design'
        getConfigByNameAsync(data.template, this.serviceName).then(async res => {
          // 根据模板名称获取内容
          this.hiprintTemplate = new hiprint.PrintTemplate({
            template: res
          })
          // 不需要提供预览效果 直接使用浏览器的预览
          // this.loaded = true
          // this.$nextTick(async () => {
          //   // 提供预览效果
          //   const html = this.hiprintTemplate.getHtml({ table: Array.from({ length: 100 }, () => ({})) })
          //   this.bill = { data: html[0].outerHTML }
          // })
        })
      } else if (data.billUrl) {
        //  v3 hbm.xml 打印
        this.bill = new DataModel({ serviceName: this.serviceName, ...data, })
        await this.bill.search()
        this.loaded = true
      }
    },
    async print (data) {
      if (!this.autoPrint) {
        this.showModal = true
        this.id = 'normal-bill'
      } else {
        this.id = 'normal-bill-hide'
      }
      await this.getBillData(data).catch(
        _err => {
          this.showModal = false
          this.$message.error('获取发票信息失败')
        }
      )
      if (this.autoPrint) {
        this.printGen()
      }
    },
    printGen () {
      this.refreshData()
      // hiprint 直接打印 需要对应客户端 / 暂时只使用 浏览器 pdf 打印
      // https://gitee.com/ccsimple/vue-plugin-hiprint
      // this.hiprintTemplate.print2({}, {}, {
      //   styleHandler: () => {
      //     const css = '<style>.hiprint-printElement-text{color:red !important;}</style>'
      //     return css
      //   }
      // })
      const that = this
      if (this.hiprintTemplate) {
        // 如果使用 hiprint 模板 使用浏览器预览打印
        // 因为 旧版ie 不支持得样式 lodop 也不支持
        this.hiprintTemplate.print({ table: Array.from({ length: 100 }, () => ({})) }, {}, {
          callback: () => {
            that.$emit('ok')
          },
          styleHandler: () => {
            return hiPrintCss()
          }
        })
      } else {
        this.$nextTick(() => {
            printHtml('lodop', {
              id: this.id,
              top: this.top,
              left: this.left,
              width: this.width,
              height: this.height,
              extra: this.extra,
              preview: false,
              html: document.getElementById(this.id).innerHTML
            }).then(() => {
              this.$emit('ok')
              this.init()
            }).catch(() => {
              this.$emit('print-error')
            })
          }
        )
      }
    },
    refreshData () { // 让innerHTML获取的内容包含input和select(option)的最新值
      const obj = document.getElementById(this.id)
      let allInputObject = null
      if (obj) {
        allInputObject = obj.getElementsByTagName('input')
      }
      for (let i = 0; i < allInputObject.length; i++) {
        if (allInputObject[i].type === 'checkbox') {
          if (allInputObject[i].checked) {
            allInputObject[i].setAttribute('checked', 'checked')
          } else {
            allInputObject[i].removeAttribute('checked')
          }
        } else if (allInputObject[i].type === 'radio') {
          if (allInputObject[i].checked) {
            allInputObject[i].setAttribute('checked', 'checked')
          } else {
            allInputObject[i].removeAttribute('checked')
          }
        } else {
          allInputObject[i].setAttribute('value', allInputObject[i].value)
        }
      }
      for (let i = 0; i < document.getElementsByTagName('select').length; i++) {
        const sl = document.getElementsByTagName('select')[i]
        for (let j = 0; j < sl.options.length; j++) {
          if (sl.options[j].selected) {
            sl.options[j].setAttribute('selected', 'selected')
          } else {
            sl.options[j] = new Option(sl.options[j].text, sl.options[j].value)
          }
        }
      }
    },
    init () {
      this.showModal = false
      this.loaded = false
      this.id = 'normal-bill'
      this.bill = {}
      this.model = {}
    }
  },
  watch: {}
}
</script>
<style scoped>

.normal-bill >>> td {
  padding: 0.5px;
  border: 2px solid #000000;
}

.normal-bill >>> table {
  border-collapse: collapse;
  border: solid;
}

.normal-bill >>> .noborder {
  border: 1px dashed #ccc;
}

.normal-bill >>> .tdleft {
  text-align: left;
}

.normal-bill >>> .tdright {
  text-align: right;
}

.normal-bill >>> .tdcenter {
  text-align: center;
}

.normal-bill >>> .fs10 {
  font-size: 0.4em;
}

.normal-bill >>> .fs11 {
  font-size: 0.5em;
}

.normal-bill >>> .fs12 {
  font-size: 0.6em;
}

.normal-bill >>> .fs13 {
  font-size: 0.7em;
}

.normal-bill >>> .fs15 {
  font-size: 0.9em;
}

.normal-bill >>> .fs17 {
  font-size: 1.1em;
}

.normal-bill >>> .fs19 {
  font-size: 1.2em;
}

.normal-bill >>> .fs24 {
  font-size: 1.5em;
}

.normal-bill >>> .fs26 {
  font-size: 1.6em;
}

.normal-bill >>> .b {
  font-weight: bold;
}

.normal-bill >>> .td-border-right {
  border-right: #000000 1px solid;
}

.normal-bill >>> .td-border-top {
  border-top: #000000 1px solid;
}

.normal-bill >>> .td-border-left {
  border-left: #000000 1px solid;
}

.normal-bill >>> .td-border-bottom {
  border-bottom: #000000 1px solid;
}

.normal-bill .report-primary { color: #000809; background-color: #dfedfb;}
.normal-bill .report-title{color: #000809; background-color: #80add9ff; border-color: #6d6c6c;}

</style>
