<script>
  import PrintTable from "./table";

  export default {
    name: 'ZyPrint',
    components: {PrintTable},
    props: [],
    data() {
      return {
        maxHeight: (window.document.body.clientHeight - 300) + 'px',
        show: false,
        title: '',
        type: '',
        loading: false,
        data: [],
        customFootnote: '',
        loader: () => {
        },
      }
    },
    render() {
      return <el-dialog visible={this.show} title={this.title} append-to-body={true} width="80%" top="80px"
                        close-on-click-modal={false} close-on-press-escape={false} on-close={this.close}>
        <div style="height: 28px;">
          <el-button type="primary" style="float: right" on-click={this.printData}>打印</el-button>
        </div>
        <div id="print-table-preview" v-loading={this.loading} style={'max-height: ' + this.maxHeight}>
          {this.getPrintContent()}
        </div>
      </el-dialog>
    },
    created() {
    },
    mounted() {
      this.type = this.type || 'table';
      if (this.loader instanceof Function) {
        this.loading = true;
        this.loader(res => {
          this.data = res.data;
          this.loading = false;
        })
      }
    },
    watch: {},
    computed: {},
    methods: {
      close() {
        this.show = false;
      },
      getPrintContent() {
        if (this.type === 'table') {
          return <print-table data={this.data} {...{
            scopedSlots: {
              customFootnote: scope => this.generateCustomFootnote(scope.data)
            }
          }}></print-table>
        } else if (this.type === 'html') {
          return <div domPropsInnerHTML={this.data}></div>
        }
      },
      generateCustomFootnote(data) {
        return this.customFootnote instanceof Function ? this.customFootnote(data) : null
      },
      printData: function () {
        if (this.type === 'html') {
          return this.doPrint();
        }
        document.getElementById('print').innerHTML = document.getElementById('table-content').innerHTML;
        const content = document.getElementById('print');
        let tableItems = content.querySelectorAll('div[class=table-item]');
        let div = document.createElement('div');
        tableItems.forEach(tableItem => {
          let tableDiv = document.createElement('div');
          tableDiv.setAttribute('class', 'web-table');
          let table = document.createElement('table');
          table.setAttribute('border', 0);
          table.setAttribute('cellSpacing', 0);
          table.setAttribute('cellPadding', 0);
          table.setAttribute('width', '100%');
          table.setAttribute('class', 'data');
          let thead = document.createElement('thead');
          let heads = tableItem.querySelector('div[class=head]').querySelectorAll('tr');
          heads.forEach(head => thead.appendChild(head));
          tableItem.querySelectorAll('tr[class=table-header]').forEach(th => thead.appendChild(th));
          let tbody = document.createElement('tbody');
          const trs = tableItem.querySelector('table[class=data]').querySelectorAll('tr[class=table-data]');
          trs.forEach(tr => tbody.appendChild(tr));
          table.appendChild(thead);
          table.appendChild(tbody);
          tableDiv.appendChild(table);
          tableDiv.appendChild(tableItem.querySelector('div[class=foot]'));
          tableDiv.appendChild(tableItem.querySelector('div[class=extra-contents]'));
          tableDiv.appendChild(tableItem.querySelector('div[class=subscripts]'));
          div.appendChild(tableDiv);
        });
        document.getElementById('print').innerHTML = div.innerHTML;
        window.print()
      },
      doPrint() {
        document.getElementById('print').innerHTML = document.getElementById('print-table-preview').innerHTML;
        this.$nextTick(() => {
          document.getElementById('print').removeChild($('#print>.el-loading-mask')[0]);
          window.print();
        })
      },
    },
  }
</script>
<style lang="scss">
  #print-table-preview {
    height: calc(100% - 35px);
    padding: 5px;
    margin-top: 5px;
    overflow: scroll;
    min-height: 200px;
  }

  #print > .web-table {
    page-break-after: always;
    table.data td:not(.head-td) {
      border: 1px solid #000000;
    }
    tfoot td {
      border: none !important;
      border-top: 1px solid #000000;
    }
  }
</style>
