<script>

  export default {
    name: 'PrintTable',
    props: ['data'],
    components: {},
    data() {
      return {}
    },
    created() {
    },
    mounted() {
    },
    render() {
      return <div id="table-content">
        {
          this.printData.map((d, index) => {
            let horizontalHeaders = [];
            for (let l = 1; l <= d['headerLevels']; l++) {
              horizontalHeaders.push([])
            }
            return <div style="page-break-after:always;" class="table-item" key={index}>
              <div class="head">
                <table border="0" cellSpacing="0" cellPadding="0" width="100%">
                  <tr>
                    <td colspan="999" class="head-td"><h3 class="title">{d['title']}</h3></td>
                  </tr>
                  {
                    d['subTitle'] ? (
                        <tr>
                          <td colSpan="999" class="head-td"><h4 class="sub-title">{d['subTitle']}</h4></td>
                        </tr>
                    ) : null
                  }
                  <tr>
                    <td colspan="999" class="head-td">
                      <div style="display: flex;">
                        {
                          (d['headnotes'] || []).map((headnote, index) =>
                              <span key={index}
                                    style="flex-grow: 1; padding: 0 5px;font-size: 13px;">{headnote}</span>)
                        }
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="999" class="head-td">
                      <div style="display: flex;">
                        {
                          (d['headnotes2'] || []).map((headnote, index) =>
                              <span key={index}
                                    style="flex-grow: 1; padding: 0 5px;font-size: 13px;">{headnote}</span>)
                        }
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
              <div class="body">
                <table class="data" border="1" cellSpacing="0" cellPadding="0" width="100%">
                  {
                    this.getHeaders(d['headers'], horizontalHeaders, 0, d['headerLevels'])
                  }
                  {
                    horizontalHeaders.map(th => {
                      return this.generateHeaders(d['partNum'], th);
                    })
                  }
                  {
                    d['datas'].map((item, index) => {
                      return <tr key={index} class="table-data">
                        {
                          d['partNum'] === 1 ? (
                              d['dataKeys'].map(header => {
                                return this.rowspan(header, item) && this.colspan(header, item) ? (
                                    <td class={this.colspan(header, item) > 1 ? "merged-data" : "data"}
                                        rowSpan={this.rowspan(header, item)}
                                        colSpan={this.colspan(header, item)}>
                                      {this.content(header, item, d['headers'])}
                                    </td>
                                ) : null
                              })
                          ) : (
                              this.getPartNums(d['partNum']).map(p => {
                                return d['dataKeys'].map(header => {
                                  return this.rowspan(header + '__' + (p - 1), item) && this.colspan(header + '__' + (p - 1), item) ? (
                                      <td class={this.colspan(header, item) > 1 ? "merged-data" : "data"}
                                          rowSpan={this.rowspan(header + '__' + (p - 1), item)}
                                          colSpan={this.colspan(header + '__' + (p - 1), item)}>
                                        {this.content(header + '__' + (p - 1), item, d['headers'])}
                                      </td>
                                  ) : <td/>
                                })
                              })
                          )
                        }
                      </tr>
                    })
                  }
                </table>
              </div>
              <div class="foot">
                <div style="display: flex;padding: 5px 0;">
                  {
                    d['footnotes'] && d['footnotes'].map((footnote, index) =>
                        <span key={index} style="flex-grow: 1; padding: 0 5px; font-size: 13px;">{footnote}</span>)
                  }
                </div>
              </div>
              <div class="extra">
                <div class="extra-contents">
                  {
                    (d['extraContents'] || []).map(content => {
                      if (content.contentType === 'chart') {
                        return <zy-chart style="margin-top: 20px;" option={content.content}></zy-chart>;
                      } else if (content.contentType === 'html') {
                        return <div style="margin-top: 20px;" domPropsInnerHTML={content.content}/>
                      } else if (content.contentType === 'image_base64') {
                        return <img style="margin-top: 20px;" src={"data:image/jpeg;base64, " + content.content}/>
                      }
                    })
                  }
                </div>
              </div>
              <div class="custom">
                {
                  this.$scopedSlots['customFootnote'] instanceof Function && this.$scopedSlots['customFootnote']({data: d})
                }
              </div>
              <div class="subscripts">
                {
                  d['subscripts'] ? (
                      d['subscripts'].map((s, index) => <p style="color: red;" key={index}>* {s}</p>)
                  ) : null
                }
              </div>
            </div>
          })
        }
      </div>
    },
    watch: {},
    computed: {
      printData: {
        get() {
          if (!(this.data instanceof Array)) {
            return [this.data];
          } else {
            return this.data;
          }
        },
        set(value) {
        }
      }
    },
    methods: {
      generateHeaders(num, headers) {
        return <tr class="table-header">
          {
            this.getPartNums(num).map(p => {
              return headers.map(function (header) {
                return <td key={header['dataKey'] + '_' + p} rowspan={header['rowspan']} colspan={header['colspan']}
                           width={header['width']} style="font-weight: bold; text-align: center;">
                  {header['name']}
                </td>
              })
            })
          }
        </tr>
      },
      getHeaders(headers, horizontalHeaders, level, maxLevels) {
        headers.forEach(h => {
          if (h.children instanceof Array && h.level < maxLevels) {
            this.getHeaders(h.children, horizontalHeaders, h.level, maxLevels)
          }
          horizontalHeaders[level].push(h)
        })
      },
      getPartNums(num) {
        let hs = [];
        for (let i = 1; i <= num; i++) {
          hs.push(i)
        }
        return hs;
      },
      rowspan(key, data) {
        if (!Object.prototype.hasOwnProperty.call(data, key)) {
          return 0;
        }
        return data[key] instanceof Object ? data[key]['rowspan'] : 1;
      },
      colspan(key, data) {
        if (!Object.prototype.hasOwnProperty.call(data, key)) {
          return 0;
        }
        return data[key] instanceof Object ? data[key]['colspan'] : 1;
      },
      content(key, data, headers) {
        if (!Object.prototype.hasOwnProperty.call(data, key)) {
          return '';
        }
        let content = '';
        if (data[key] instanceof Object) {
          content = data[key]['content'];
        } else {
          content = data[key];
          let header = _.find(headers, e => e.dataKey === key);
          if (header) {
            let script = header['formatter'];
            if (script) {
              let _formatter = new Function('d', 'v', script);
              content = _formatter(data, content);
            }
          }
        }
        return content;
      },
    },
  }
</script>
<style scoped lang="scss">
  td {
    padding: 5px 5px;
  }

  td.data {
    text-align: right;
  }

  td.merged-data {
    text-align: center;
  }

  h3, h4 {
    width: 100%;
    text-align: center;
  }

  .headnotes, .headnotes2 {
    text-align: left;
  }
</style>
