<template>
  <div style="flex: 1;">
    <Container name="产线缺陷统计" size="small">
        <TimePrompt class="timeShow" :timestr="timestr" />
        <DropDownBtn class="timeToggle" :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
        <div class="chart" style="height: 238px; margin-top: 8px;">
          <DefectChart :chartTime='chartTime' @emitFun='dateUpdate'/>
        </div>
      </Container>
  </div>
</template>
<script>
import Container from '../components/Container';
import DropDownBtn from '../components/DropDownBtn';
import TimePrompt from '../components/TimePrompt';
import DefectChart from '../components/DefectChart';
import { switchShowTime } from '../utils'
export default {
  name: 'DefectStatistics',
  components: { Container, DropDownBtn, DefectChart, TimePrompt },
  data() {
    return {
      chartTime:'日',
      timestr: ''
    }
  },
  mounted() {
    this.timestr = switchShowTime(this.chartTime)
  },
  methods: {
    // 切换时间
		toggleDate(val) {
			this.chartTime = val
      this.timestr = switchShowTime(val)
		},
    // 数据更新
    dateUpdate() {
      this.timestr = switchShowTime(this.chartTime)
    }
  }
}
</script>
<style lang='scss' scoped>
.timeShow {
  position: absolute;
  top: 20px;
  left: 210px;
}
.timeToggle {
  position: absolute;
  right: 20px;
  top: 15px;
}
</style>