<template>
  <div class="finalDataTable">
    <base-table :table-props="tablePropsT" :table-data="tableDataT" />
    <base-table :table-props="tablePropsB" :table-data="tableDataB" />
  </div>
</template>
<script>
const tablePropsT = [
  {
    label: '尺寸',
    children: [
      {
        prop: 'name1',
        label: '面检缺陷',
        width: 110
      }
    ]
  },
  {
    label: 'class1',
    children: [
      {
        prop: 'class1',
        label: '<10*25',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class2',
    children: [
      {
        prop: 'class2',
        label: '<10*25',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class3',
    children: [
      {
        prop: 'class3',
        label: '<10*25',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class4',
    children: [
      {
        prop: 'class4',
        label: '<10*25',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class5',
    children: [
      {
        prop: 'class5',
        label: '<10*25',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class6',
    children: [
      {
        prop: 'class6',
        label: '<10*25',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class7',
    children: [
      {
        prop: 'class7',
        label: '<10*25',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class8',
    children: [
      {
        prop: 'class8',
        label: '<10*25',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class9',
    children: [
      {
        prop: 'class9',
        label: '<10*25',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class10',
    children: [
      {
        prop: 'class10',
        label: '<10*25',
        minWidth: 70
      }
    ]
  },
  {
    prop: 'total',
    label: '总数',
    minWidth: 70
  }
]
const tablePropsB = [
  {
    label: '尺寸',
    children: [
      {
        prop: 'name1',
        label: '面检缺陷',
        width: 110
      }
    ]
  },
  {
    label: 'class1',
    children: [
      {
        prop: 'class1',
        label: '100-200',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class2',
    children: [
      {
        prop: 'class2',
        label: '200-500',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class3',
    children: [
      {
        prop: 'class3',
        label: '300-800',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class4',
    children: [
      {
        prop: 'class4',
        label: '500-1000',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class5',
    children: [
      {
        prop: 'class5',
        label: '1000-2000',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class6',
    children: [
      {
        prop: 'class6',
        label: '<1000-30000',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class7',
    children: [
      {
        prop: 'class7',
        label: '1000-5000',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class8',
    children: [
      {
        prop: 'class8',
        label: '1000-8000',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class9',
    children: [
      {
        prop: 'class9',
        label: '1000-10000',
        minWidth: 70
      }
    ]
  },
  {
    label: 'class10',
    children: [
      {
        prop: 'class10',
        label: '1000-10000',
        minWidth: 70
      }
    ]
  },
  {
    prop: 'total',
    label: '总数',
    minWidth: 70
  }
]
export default {
  name: 'FinalDataTable',
  data() {
    return {
      tablePropsT,
      tableDataT: [],
      tablePropsB,
      tableDataB: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      ;(this.tableDataT = [
        {
          name1: 'BL',
          class1: 0,
          class2: 2,
          class3: 54,
          class4: 0,
          class5: 0,
          class6: 0,
          class7: 7,
          class8: 0,
          class9: 0,
          class10: 0,
          total: 20
        },
        {
          name1: 'Distortion',
          class1: 0,
          class2: 2,
          class3: 54,
          class4: 0,
          class5: 0,
          class6: 0,
          class7: 7,
          class8: 0,
          class9: 0,
          class10: 0,
          total: 20
        },
        {
          name1: 'Fiber',
          class1: 0,
          class2: 2,
          class3: 54,
          class4: 0,
          class5: 0,
          class6: 0,
          class7: 7,
          class8: 0,
          class9: 0,
          class10: 0,
          total: 20
        },
        {
          name1: 'IIS rest',
          class1: 0,
          class2: 2,
          class3: 54,
          class4: 0,
          class5: 0,
          class6: 0,
          class7: 7,
          class8: 0,
          class9: 0,
          class10: 0,
          total: 20
        },
        {
          name1: 'Knot',
          class1: 0,
          class2: 2,
          class3: 54,
          class4: 0,
          class5: 0,
          class6: 0,
          class7: 7,
          class8: 0,
          class9: 0,
          class10: 0,
          total: 20
        },
        {
          name1: 'PT',
          class1: 0,
          class2: 2,
          class3: 54,
          class4: 0,
          class5: 0,
          class6: 0,
          class7: 7,
          class8: 0,
          class9: 0,
          class10: 0,
          total: 20
        },
        {
          name1: 'Scratch',
          class1: 0,
          class2: 2,
          class3: 54,
          class4: 0,
          class5: 0,
          class6: 0,
          class7: 7,
          class8: 0,
          class9: 0,
          class10: 0,
          total: 20
        },
        {
          name1: 'Stone',
          class1: 0,
          class2: 2,
          class3: 54,
          class4: 0,
          class5: 0,
          class6: 0,
          class7: 7,
          class8: 0,
          class9: 0,
          class10: 0,
          total: 20
        },
        {
          name1: 'Tail',
          class1: 0,
          class2: 2,
          class3: 54,
          class4: 0,
          class5: 0,
          class6: 0,
          class7: 7,
          class8: 0,
          class9: 0,
          class10: 0,
          total: 20
        },
        {
          name1: 'Tin',
          class1: 0,
          class2: 2,
          class3: 54,
          class4: 0,
          class5: 0,
          class6: 0,
          class7: 7,
          class8: 0,
          class9: 0,
          class10: 0,
          total: 20
        },
        {
          name1: 'Tin(Bottom)',
          class1: 0,
          class2: 2,
          class3: 54,
          class4: 0,
          class5: 0,
          class6: 0,
          class7: 7,
          class8: 0,
          class9: 0,
          class10: 0,
          total: 20
        },
        {
          name1: 'Tin(Top)',
          class1: 0,
          class2: 2,
          class3: 54,
          class4: 0,
          class5: 0,
          class6: 0,
          class7: 7,
          class8: 0,
          class9: 0,
          class10: 0,
          total: 20
        },
        {
          name1: '面检sum',
          class1: 0,
          class2: 2,
          class3: 54,
          class4: 0,
          class5: 0,
          class6: 0,
          class7: 7,
          class8: 0,
          class9: 0,
          class10: 0,
          total: 20
        }
      ]),
        (this.tableDataB = [
          {
            name1: 'BL',
            class1: 0,
            class2: 2,
            class3: 54,
            class4: 0,
            class5: 0,
            class6: 0,
            class7: 7,
            class8: 0,
            class9: 0,
            class10: 0,
            total: 20
          },
          {
            name1: 'Distortion',
            class1: 0,
            class2: 2,
            class3: 54,
            class4: 0,
            class5: 0,
            class6: 0,
            class7: 7,
            class8: 0,
            class9: 0,
            class10: 0,
            total: 20
          },
          {
            name1: 'Fiber',
            class1: 0,
            class2: 2,
            class3: 54,
            class4: 0,
            class5: 0,
            class6: 0,
            class7: 7,
            class8: 0,
            class9: 0,
            class10: 0,
            total: 20
          },
          {
            name1: 'IIS rest',
            class1: 0,
            class2: 2,
            class3: 54,
            class4: 0,
            class5: 0,
            class6: 0,
            class7: 7,
            class8: 0,
            class9: 0,
            class10: 0,
            total: 20
          },
          {
            name1: 'Knot',
            class1: 0,
            class2: 2,
            class3: 54,
            class4: 0,
            class5: 0,
            class6: 0,
            class7: 7,
            class8: 0,
            class9: 0,
            class10: 0,
            total: 20
          },
          {
            name1: 'PT',
            class1: 0,
            class2: 2,
            class3: 54,
            class4: 0,
            class5: 0,
            class6: 0,
            class7: 7,
            class8: 0,
            class9: 0,
            class10: 0,
            total: 20
          },
          {
            name1: 'Scratch',
            class1: 0,
            class2: 2,
            class3: 54,
            class4: 0,
            class5: 0,
            class6: 0,
            class7: 7,
            class8: 0,
            class9: 0,
            class10: 0,
            total: 20
          },
          {
            name1: 'Stone',
            class1: 0,
            class2: 2,
            class3: 54,
            class4: 0,
            class5: 0,
            class6: 0,
            class7: 7,
            class8: 0,
            class9: 0,
            class10: 0,
            total: 20
          },
          {
            name1: 'Tail',
            class1: 0,
            class2: 2,
            class3: 54,
            class4: 0,
            class5: 0,
            class6: 0,
            class7: 7,
            class8: 0,
            class9: 0,
            class10: 0,
            total: 20
          },
          {
            name1: 'Tin',
            class1: 0,
            class2: 2,
            class3: 54,
            class4: 0,
            class5: 0,
            class6: 0,
            class7: 7,
            class8: 0,
            class9: 0,
            class10: 0,
            total: 20
          },
          {
            name1: 'Tin(Bottom)',
            class1: 0,
            class2: 2,
            class3: 54,
            class4: 0,
            class5: 0,
            class6: 0,
            class7: 7,
            class8: 0,
            class9: 0,
            class10: 0,
            total: 20
          },
          {
            name1: 'Tin(Top)',
            class1: 0,
            class2: 2,
            class3: 54,
            class4: 0,
            class5: 0,
            class6: 0,
            class7: 7,
            class8: 0,
            class9: 0,
            class10: 0,
            total: 20
          },
          {
            name1: '面检sum',
            class1: 0,
            class2: 2,
            class3: 54,
            class4: 0,
            class5: 0,
            class6: 0,
            class7: 7,
            class8: 0,
            class9: 0,
            class10: 0,
            total: 20
          }
        ])
    }
  }
}
</script>
<style lang="scss">
.finalDataTable {
  .el-table thead.is-group tr:first-of-type th:first-of-type {
    border-bottom: none;
  }
  .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
    text-align: right;
  }
  .el-table th.el-table__cell {
    height: 28px;
  }
  .el-table thead.is-group tr:first-of-type th:first-of-type:before {
    content: '';
    position: absolute;
    height: 35px;
    top: 0;
    left: 48px;
    background-color: #ebeef5;
    transform: rotate(-35deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    width: 1px;
  }
  .el-table thead.is-group tr:last-of-type th:first-of-type:before {
    content: '';
    position: absolute;
    height: 35px;
    top: 0;
    left: 68px;
    background-color: #ebeef5;
    transform: rotate(-35deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    width: 1px;
  }
}
</style>
