<template>
    <Container name="本日生产良品率" size="large">
      <TimePrompt class="timeShow" :timestr="timestr" />
      <div style="padding: 5px 10px;">
        <dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/>
      </div>
      <KilnLine :horizontal="true" />
      <div class="" style="flex: 2; padding: 8px">
        <div
          class="header-line"
          style="margin: 8px 0 16px; display: flex; align-items: center">
          <h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 5px">
            生产良品率
          </h2>
          <Switcher :showTitle='["班次详情","班次详情"]' @emitFun='changeType'/>
          <div style="width: 169px;">
            <span class="lgd lgd-total">总量</span>
            <span class="lgd lgd-day" v-show='chartType'>白班</span>
            <span class="lgd lgd-night" v-show='chartType'>夜班</span>
          </div>
          <div>
            <SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
          </div>
        </div>
        <div class="chart" style="height: 230px;">
          <YieldRateChart :chartTime='chartTime' :chartType='chartType' @emitFun='dateUpdate'/>
        </div>
      </div>
    </Container>
</template>
<script>
import Container from '../components/Container'
import ScrollBoard from '../components/ScrollBoard'
import KilnLine from '../components/line'
import Switcher from '../components/Switcher'
import SelectorBtnGroup from '../components/SelectorBtnGroup';
import YieldRateChart from '../components/YieldRateChart';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils';
export default {
  name: 'YieldRate',
  components: { Container, ScrollBoard, KilnLine, Switcher, SelectorBtnGroup, YieldRateChart, TimePrompt },
  computed: {
    yieldRateTable() {
      return this.$store.state.websocket.yieldRateTable
    }
  },
  data() {
    return {
      config: {
        header: ['产线', '一等率', '二等率','成品率','废品率'],
        // headerHeight: '17',
        headerBGC: 'rgba(32, 55, 96, 0.8)',
        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
        columnWidth: [60],
        data: [],
        rowNum: 5
      },
      chartType:false,
      chartTime: "日",
      timestr: ""
    }
  },
  watch:{
    yieldRateTable: {
			handler(newVal, oldVal) {
        let outArr = this.yieldRateTable.map((item) => [
          item.lineName,
          item.first?(item.first*100).toFixed(2)+'%':'0.00%',
          item.second?(item.second*100).toFixed(2)+'%':'0.00%',
          item.product?(item.product*100).toFixed(2)+'%':'0.00%',
          item.waste?(item.waste*100).toFixed(2)+'%':'0.00%'
      ]);
        this.config.data = outArr
        this.$refs['yieldRateScrollBoard'].updateRows(outArr)
			}
		}
  },
  mounted() {
    this.timestr = switchShowTime(this.chartTime)
  },
  methods: {
    changeType(val) {
      this.chartType = val
    },
    // 切换时间
		toggleDate(val) {
			this.chartTime = val
      this.timestr = switchShowTime(this.chartTime)
		},
    // 数据更新
    dateUpdate() {
      this.timestr = switchShowTime(this.chartTime)
    }
  }
}
</script>
<style lang='scss' scoped>
.timeShow {
  position: absolute;
  top: 20px;
  left: 235px;
}
.lgd {
	color: #fff;

	&:not(:last-child) {
		margin-right: 12px;
	}
}

.lgd::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 4px;
	border-radius: 2px;
}

.lgd.lgd-total::before {
	background-color: #ff9e00;
}

.lgd.lgd-day::before {
	background-color: #08d8cd;
}

.lgd.lgd-night::before {
	background-color: #0b58ff;
}
</style>