<template>
  <div class="production-report-box">
    <search-bar
      :formConfigs="formConfig"
      ref="searchBarForm"
      @headBtnClick="buttonClick"
    />
    <base-table
      :page="listQuery.current"
      :limit="listQuery.size"
      :table-props="tableProp"
      :table-data="tableData"
      :span-method="spanMethod"
      :max-height="tableH"
    />
  </div>
</template>
<script>
import { tableHeight } from '@/utils/index'
import TableTags from './components/TableTags.vue'
const tableProp = [
  {
    prop: 'process',
    label: '区域',
    fixed: true
  },
  {
    prop: 'equipmentName',
    label: '项目指标',
    minWidth: 150,
    fixed: true
  },
  {
    label: '白班(8:00-20:00)',
    align: 'center',
    children: [
      { prop: 'b1', label: '7-8', width: 60 },
      { prop: 'b2', label: '8-9', width: 60 },
      { prop: 'b3', label: '9-10', width: 60 },
      { prop: 'b4', label: '10-11', width: 60 },
      { prop: 'b5', label: '11-12', width: 60 },
      { prop: 'b6', label: '12-13', width: 60 },
      { prop: 'b7', label: '13-14', width: 60 },
      { prop: 'b8', label: '14-15', width: 60 },
      { prop: 'b9', label: '15-16', width: 60 },
      { prop: 'b10', label: '16-17', width: 60 },
      { prop: 'b11', label: '17-18', width: 60 },
      { prop: 'b12', label: '18-19', width: 60 },
      { prop: 'ct1', label: '合计', subcomponent: TableTags }
    ]
  },
  {
    label: '夜班(20:00-8:00)',
    align: 'center',
    children: [
      { prop: 'y1', label: '19-20', width: 60 },
      { prop: 'y2', label: '20-21', width: 60 },
      { prop: 'y3', label: '21-22', width: 60 },
      { prop: 'y4', label: '22-23', width: 60 },
      { prop: 'y5', label: '23-24', width: 60 },
      { prop: 'y6', label: '0-1', width: 60 },
      { prop: 'y7', label: '1-2', width: 60 },
      { prop: 'y8', label: '2-3', width: 60 },
      { prop: 'y9', label: '3-4', width: 60 },
      { prop: 'y10', label: '4-5', width: 60 },
      { prop: 'y11', label: '5-6', width: 60 },
      { prop: 'y12', label: '6-7', width: 60 },
      { prop: 'ct2', label: '合计', subcomponent: TableTags }
    ]
  }
]
export default {
  name: 'productionReport',
  data() {
    return {
      formConfig: [
        {
          type: 'select',
          label: '产线',
          selectOptions: JSON.parse(localStorage.getItem('publicList'))
            .proLineVoList,
          param: 'proLineId',
          defaultSelect: '',
          width: 120
        },
        {
          type: 'datePicker',
          label: '日期选择',
          dateType: 'date',
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
          param: 'timeVal',
          width: 200
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: 'button',
          btnName: '导出',
          name: 'export',
          color: 'primary',
          plain: true
        }
      ],
      listQuery: {
        current: 1,
        size: 20
      },
      tableH: tableHeight(300),
      tableProp,
      tableData: [],
      span: []
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(300)
    })
    this.getData()
  },
  methods: {
    buttonClick(val) {
      console.log(val)
    },
    getData() {
      ;(this.tableData = [
        {
          b1: 1,
          b2: 2,
          b3: 3,
          b4: 4,
          b5: 5,
          b6: 6,
          b7: 7,
          b8: 8,
          b9: 9,
          b10: 10,
          b11: 11,
          b12: 12,
          ct1: 108,
          y1: 1,
          y2: 2,
          y3: 3,
          y4: 4,
          y5: 5,
          y6: 6,
          y7: 7,
          y8: 8,
          y9: 9,
          y10: 10,
          y11: 11,
          y12: 12,
          ct2: 103,
          equipmentName: '上片投入数',
          process: '综合'
        },
        {
          b1: 1,
          b2: 2,
          b3: 3,
          b4: 4,
          b5: 5,
          b6: 6,
          b7: 7,
          b8: 8,
          b9: 9,
          b10: 10,
          b11: 11,
          b12: 12,
          ct1: 102,
          y1: 1,
          y2: 2,
          y3: 3,
          y4: 4,
          y5: 5,
          y6: 6,
          y7: 7,
          y8: 8,
          y9: 9,
          y10: 10,
          y11: 11,
          y12: 12,
          ct2: 99,
          equipmentName: '机器人投入数',
          process: '综合'
        },
        {
          b1: 1,
          b2: 2,
          b3: 3,
          b4: 4,
          b5: 5,
          b6: 6,
          b7: 7,
          b8: 8,
          b9: 9,
          b10: 10,
          b11: 11,
          b12: 12,
          ct1: 100,
          y1: 1,
          y2: 2,
          y3: 3,
          y4: 4,
          y5: 5,
          y6: 6,
          y7: 7,
          y8: 8,
          y9: 9,
          y10: 10,
          y11: 11,
          y12: 12,
          ct2: 100,
          equipmentName: '良品总投入数',
          process: '综合'
        },
        {
          b1: 1,
          b2: 2,
          b3: 3,
          b4: 4,
          b5: 5,
          b6: 6,
          b7: 7,
          b8: 8,
          b9: 9,
          b10: 10,
          b11: 11,
          b12: 12,
          ct1: 100,
          y1: 1,
          y2: 2,
          y3: 3,
          y4: 4,
          y5: 5,
          y6: 6,
          y7: 7,
          y8: 8,
          y9: 9,
          y10: 10,
          y11: 11,
          y12: 12,
          ct2: 100,
          equipmentName: '工序损耗',
          process: '综合'
        },
        {
          b1: 1,
          b2: 2,
          b3: 3,
          b4: 4,
          b5: 5,
          b6: 6,
          b7: 7,
          b8: 8,
          b9: 9,
          b10: 10,
          b11: 11,
          b12: 12,
          ct1: 100,
          y1: 1,
          y2: 2,
          y3: 3,
          y4: 4,
          y5: 5,
          y6: 6,
          y7: 7,
          y8: 8,
          y9: 9,
          y10: 10,
          y11: 11,
          y12: 12,
          ct2: 100,
          equipmentName: '后清洗输出',
          process: '综合'
        },
        {
          b1: 1,
          b2: 2,
          b3: 3,
          b4: 4,
          b5: 5,
          b6: 6,
          b7: 7,
          b8: 8,
          b9: 9,
          b10: 10,
          b11: 11,
          b12: 12,
          ct1: 100,
          y1: 1,
          y2: 2,
          y3: 3,
          y4: 4,
          y5: 5,
          y6: 6,
          y7: 7,
          y8: 8,
          y9: 9,
          y10: 10,
          y11: 11,
          y12: 12,
          ct2: 100,
          equipmentName: '上片损失',
          process: '上片'
        },
        {
          b1: 1,
          b2: 2,
          b3: 3,
          b4: 4,
          b5: 5,
          b6: 6,
          b7: 7,
          b8: 8,
          b9: 9,
          b10: 10,
          b11: 11,
          b12: 12,
          ct1: 100,
          y1: 1,
          y2: 2,
          y3: 3,
          y4: 4,
          y5: 5,
          y6: 6,
          y7: 7,
          y8: 8,
          y9: 9,
          y10: 10,
          y11: 11,
          y12: 12,
          ct2: 100,
          equipmentName: '精切损失',
          process: '精切'
        },
        {
          b1: 1,
          b2: 2,
          b3: 3,
          b4: 4,
          b5: 5,
          b6: 6,
          b7: 7,
          b8: 8,
          b9: 9,
          b10: 10,
          b11: 11,
          b12: 12,
          ct1: 100,
          y1: 1,
          y2: 2,
          y3: 3,
          y4: 4,
          y5: 5,
          y6: 6,
          y7: 7,
          y8: 8,
          y9: 9,
          y10: 10,
          y11: 11,
          y12: 12,
          ct2: 100,
          equipmentName: '精切抽检',
          process: '精切'
        },
        {
          b1: 1,
          b2: 2,
          b3: 3,
          b4: 4,
          b5: 5,
          b6: 6,
          b7: 7,
          b8: 8,
          b9: 9,
          b10: 10,
          b11: 11,
          b12: 12,
          ct1: 100,
          y1: 1,
          y2: 2,
          y3: 3,
          y4: 4,
          y5: 5,
          y6: 6,
          y7: 7,
          y8: 8,
          y9: 9,
          y10: 10,
          y11: 11,
          y12: 12,
          ct2: 100,
          equipmentName: '磨边损失',
          process: '磨边'
        },
        {
          b1: 1,
          b2: 2,
          b3: 3,
          b4: 4,
          b5: 5,
          b6: 6,
          b7: 7,
          b8: 8,
          b9: 9,
          b10: 10,
          b11: 11,
          b12: 12,
          ct1: 100,
          y1: 1,
          y2: 2,
          y3: 3,
          y4: 4,
          y5: 5,
          y6: 6,
          y7: 7,
          y8: 8,
          y9: 9,
          y10: 10,
          y11: 11,
          y12: 12,
          ct2: 100,
          equipmentName: '磨边抽检',
          process: '磨边'
        },
        {
          b1: 1,
          b2: 2,
          b3: 3,
          b4: 4,
          b5: 5,
          b6: 6,
          b7: 7,
          b8: 8,
          b9: 9,
          b10: 10,
          b11: 11,
          b12: 12,
          ct1: 100,
          y1: 1,
          y2: 2,
          y3: 3,
          y4: 4,
          y5: 5,
          y6: 6,
          y7: 7,
          y8: 8,
          y9: 9,
          y10: 10,
          y11: 11,
          y12: 12,
          ct2: 100,
          equipmentName: '前清洗损失',
          process: '前清洗'
        },
        {
          b1: 1,
          b2: 2,
          b3: 3,
          b4: 4,
          b5: 5,
          b6: 6,
          b7: 7,
          b8: 8,
          b9: 9,
          b10: 10,
          b11: 11,
          b12: 12,
          ct1: 100,
          y1: 1,
          y2: 2,
          y3: 3,
          y4: 4,
          y5: 5,
          y6: 6,
          y7: 7,
          y8: 8,
          y9: 9,
          y10: 10,
          y11: 11,
          y12: 12,
          ct2: 100,
          equipmentName: '边检损失',
          process: '边检'
        },
        {
          b1: 1,
          b2: 2,
          b3: 3,
          b4: 4,
          b5: 5,
          b6: 6,
          b7: 7,
          b8: 8,
          b9: 9,
          b10: 10,
          b11: 11,
          b12: 12,
          ct1: 100,
          y1: 1,
          y2: 2,
          y3: 3,
          y4: 4,
          y5: 5,
          y6: 6,
          y7: 7,
          y8: 8,
          y9: 9,
          y10: 10,
          y11: 11,
          y12: 12,
          ct2: 100,
          equipmentName: '复投损失',
          process: '复投'
        }
      ]),
        this.getSpanArr(this.tableData)
    },
    getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.span.push(1)
          this.index = 0
        } else {
          if (data[i].process === data[i - 1].process) {
            this.span[this.index] += 1
            this.span.push(0)
          } else {
            this.span.push(1)
            this.index = i
          }
        }
      }
    },
    spanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        const _row = this.span[rowIndex]
        return {
          rowspan: _row,
          colspan: 1
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.production-report-box {
  height: calc(100vh - 203px);
  padding: 12px 16px;
  margin: 0px 16px;
  border-radius: 8px;
  background-color: #fff;
}
</style>
