<template>
  <div class="canvas-table-wrap">
    <table id="canvas-table">
      <thead class="thead">
        <tr>
          <td> <p>&nbsp;</p></td>
          <td v-for="title in TitleList" :key="title"><p>{{title}}</p></td>  
        </tr>
      </thead>
      <tr v-for="label in LabelList" :key="label.SaLabelId">
        <td>{{label.LabelName}}</td>
        <td v-for="doc in label.DocList" :key="doc.SaDocId">
          <p v-for="section in doc.SectionList" :key="section.SaDocSectionId">
            {{section.innerText}}
          </p>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import {defaultLabel} from '../utils/config';
import {formatFileContent,getDefaultLabelList} from '../utils/index';
import html2canvas from 'html2canvas';
export default {
  props:{
    tableImgData:{ //格式见untils/config/tableImgData
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  watch:{
    tableImgData(){
      this.initTable()
    }
  },
  data() {
    return {
      TitleList:[],
      ThemeList:[],
      LabelList:[]
    };
  },
  methods: {
    //将数据转换成table的格式
    initTable(){
      const {TitleList,ThemeList,LabelList} = this.tableImgData
      this.ThemeList = ThemeList||['暂无主题']
      this.TitleList = TitleList||['暂无标题']
      this.LabelList = LabelList?LabelList.map(label=>{
        if(label.DocList.length){
          label.DocList.map(doc=>{
            if(doc.SectionList.length){
              doc.SectionList.map(section=>{
                section.innerText = formatFileContent(section)
                return section
              })
            }
            return doc
          })
        }
        return label
      }):[defaultLabel]
      //一个标签都没打的情况
      if(!this.LabelList.length){
        this.LabelList = getDefaultLabelList(this.ThemeList.length)
      }
    },
    //将dom转为canvas 
    async tableToCanvas(){
      const canvasWrap = document.querySelector('.canvas-table-wrap')
      canvasWrap.scrollTop = 0
      canvasWrap.scrollLeft=0
      const width = $('#canvas-table').width()
      const height = $('#canvas-table').height()
      let canvas = await html2canvas(
          $('#canvas-table')[0],
          {
            useCORS: true,
            allowTaint:true,
            backgroundColor: `rgb(255,255,255)`,
            scale: 2,
            imageTimeout: 0,
            width:width,
            height:height
          }
        )
      const url = canvas.toDataURL("image/png")
      //this.checkImg(url)
      return url
    },
    //测试用
    checkImg(dataURL,fileType='png'){
      let link = document.createElement('a')
      link.href = dataURL
      link.download = `test.${fileType}`
      link.click()
    },
  },
  mounted(){
    this.initTable()
  }
};
</script>

<style scoped lang="scss">
.canvas-table-wrap{
  width: 100%;
  height: 450px;
  overflow: scroll;
  table{
    width:100%;
    height: 100%;
    border-collapse: collapse;
    /* position: relative; */
    .thead{
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: white; 
        td{
            padding:0;
            height:55px;
        }
        p{
            width: 100%;
            height: 100%; 
            border-top:1px solid black;
            border-bottom: 1px solid black;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            padding:5px;
            box-sizing: border-box;
        }
        tr{
            &:last-child{
                td{
                    border-top:none;
                    border-bottom: none;
                } 
            }
        }
    }
    tr{
      &:nth-child(2){
          td{
                border-top:none;
            }
      }
      td{
        &:last-child{
          border-right: 1px solid black;
        }
      }
      &:last-child{
        td{
          border-bottom: 1px solid black;
        }
      }
    }
    td{
      min-width: 200px;
      min-height: 45px;
      border: 1px solid black;
      padding:5px;
      text-align: center;
      border-bottom: none;
      border-right: none;
      box-sizing: border-box;
      p{
        font-size: 16px;
      }
    }
  }

}
</style>
