<template>
  <div style="flex: 1;">
    <Container name="各工序缺陷汇总" size="middle" style="">
      <TimePrompt class="timeShow" :timestr="timestr" />
      <div style="padding: 5px 10px;">
        <dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/>
      </div>
    </Container>
  </div>
</template>
<script>
import Container from '../components/Container.vue';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils'
export default {
  name: 'DefectSum',
  components: { Container, TimePrompt },
  computed: {
    defectSum() {
      return this.$store.state.websocket.defectSum
    }
  },
  data() {
    return {
      timestr: '',
      config: {
        header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
        headerBGC: 'rgba(32, 55, 96, 0.8)',
        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
        columnWidth: [60],
        align: ['center'],
        data: [],
        // data: [[1, 'Y61', '破损','10','气泡']],
        rowNum: 10
      }
    }
  },
  mounted() {
    this.timestr = switchShowTime('日')
  },
  watch:{
    defectSum: {
			handler(newVal, oldVal) {
        let outArr = this.defectSum.map((item, index) => [
          index+1,
          item.productionLineName,
          item.sectionName,
          item.count,
          item.inspectionTypeName
      ]);
        this.config.data = outArr
        this.$refs['defectScrollBoard'].updateRows(outArr)
        this.timestr = switchShowTime('日')
			}
		}
  }
}
</script>
<style lang='scss' scoped>
.timeShow {
  position: absolute;
  top: 20px;
  left: 240px;
}
</style>