<template>
  <div class="thicknessReport">
    <ul class="baseMsg">
      <li><span>厚度检查机报表(此表接口还未调试)</span></li>
      <li :title="glassId"><span>玻璃ID:</span>{{ glassId }}</li>
      <li><span>检测时间:</span>2022.12.24 14:45:34</li>
      <li><span>研磨类型:</span>4ABC</li>
    </ul>
    <base-table
      :table-props="tableProps"
      :table-data="tableDD"
      :max-height="tableH"
      :show-header="false"
    />
    <button @click="exportData">导出,（开发自测用，后续会删除）</button>
  </div>
</template>
<script>
import { tableHeight } from '@/utils'
import * as XLSX from 'xlsx/xlsx.mjs'
import FileSaver from 'file-saver'
let tableProps = []
for (let j = 0; j < 21; j++) {
  let obj = {}
  obj.prop = 'a' + (j + 1)
  obj.label = 'a' + (j + 1)
  obj.minWidth = 75
  tableProps.push(obj)
}
export default {
  name: 'thickReport',
  data() {
    return {
      tableProps,
      tableH: tableHeight(292),
      exportDD: [],
      tableDD: [],
      glassId: ''
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(292)
    })
    this.getList()
  },
  props: {
    tableData: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    }
  },
  methods: {
    getList() {
      let exportD = Array(7)
        .fill()
        .map(() => Array(21))
      let tableD = []
      for (let j = 0; j < 7; j++) {
        let obj = {
          a1: '',
          a2: '',
          a3: '',
          a4: '',
          a5: '',
          a6: '',
          a7: '',
          a8: '',
          a9: '',
          a10: '',
          a11: '',
          a12: '',
          a13: '',
          a14: '',
          a15: '',
          a16: '',
          a17: '',
          a18: '',
          a19: '',
          a20: '',
          a21: ''
        }
        tableD.push(obj)
      }
      let mockData = [
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        },
        {
          glassId: '1212121212',
          testTime: '2022-06-24T16:59:55',
          grindType: '2AB',
          thickOne: '502.457',
          thickTwo: '503.226',
          thickThree: '503.203',
          thickFour: '502.220',
          thickFive: '503.411',
          thickSix: '500.904',
          thickSeven: '499.810'
        }
      ]
      this.glassId = mockData[0].glassId
      exportD.unshift(Array.from({ length: 21 }, () => null))
      exportD[0][0] = '厚度检查机报表'
      exportD[0][6] = '玻璃ID:'
      exportD[0][8] = mockData[0].glassId
      exportD[0][11] = '检测时间:'
      exportD[0][13] = mockData[0].testTime
      exportD[0][16] = '研磨类型:'
      exportD[0][18] = mockData[0].grindType
      for (let i = 0; i < mockData.length; i++) {
        exportD[1][i] = mockData[i].thickOne
        exportD[2][i] = mockData[i].thickTwo
        exportD[3][i] = mockData[i].thickThree
        exportD[4][i] = mockData[i].thickFour
        exportD[5][i] = mockData[i].thickFive
        exportD[6][i] = mockData[i].thickSix
        exportD[7][i] = mockData[i].thickSeven
        tableD[0]['a' + (i + 1)] = mockData[i].thickOne
        tableD[1]['a' + (i + 1)] = mockData[i].thickTwo
        tableD[2]['a' + (i + 1)] = mockData[i].thickThree
        tableD[3]['a' + (i + 1)] = mockData[i].thickFour
        tableD[4]['a' + (i + 1)] = mockData[i].thickFive
        tableD[5]['a' + (i + 1)] = mockData[i].thickSix
        tableD[6]['a' + (i + 1)] = mockData[i].thickSeven
      }
      console.log(exportD)
      console.log(tableD)
      this.exportDD = exportD
      this.tableDD = tableD
    },
    exportData() {
      const filename = '厚度表.xlsx'
      const ws_name = 'Sheet1'
      const wb = XLSX.utils.book_new()
      const ws = XLSX.utils.aoa_to_sheet(this.exportDD)
      XLSX.utils.book_append_sheet(wb, ws, ws_name)
      ws['!merges'] = [
        { s: { r: 0, c: 0 }, e: { r: 0, c: 5 } },
        { s: { r: 0, c: 6 }, e: { r: 0, c: 7 } },
        { s: { r: 0, c: 8 }, e: { r: 0, c: 10 } },
        { s: { r: 0, c: 11 }, e: { r: 0, c: 12 } },
        { s: { r: 0, c: 13 }, e: { r: 0, c: 15 } },
        { s: { r: 0, c: 16 }, e: { r: 0, c: 17 } },
        { s: { r: 0, c: 18 }, e: { r: 0, c: 20 } }
      ]
      let wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: false,
        type: 'array'
      })
      FileSaver.saveAs(
        new Blob([wbout], {
          type: 'application/octet-stream'
        }),
        filename
      )
    }
  }
}
</script>
<style lang="scss">
.thicknessReport {
  .baseMsg {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    display: flex;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    margin-bottom: 20px;
    li {
      width: 25%;
      text-align: center;
      padding: 0 10px;
      border-right: 1px solid #e8e8e8;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      span {
        font-weight: 600;
      }
    }
  }
}
</style>
