<template>
  <div :style="{ height: '350px', width: '100%' }"/>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { ExamTypeweek, nameType } from '@/api/system/PaneIGroup'

export default {
  data() {
    return {
      chart: null,
      //不同检查类型的名称
      nameList: [],
      //后端返回的不同检查类型数据
      typeData: [],
      //页面不同检查类型的数据
      valuesData2: []
    }
  },
  watch: {},
  mounted() {
    this.selectExamTypeView()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    selectExamTypeView() {
      //检查类型
      nameType().then((res) => {
        res.data.forEach(item => {
          let nameList = []
          this.nameList.push(item.name)
        })
        this.load()
      })
      //一周检查类型的数据
      ExamTypeweek().then((response) => {
        // console.log("不同检查类型一周的数据");
        this.typeData = response.data
        for (var i = 0; i < this.nameList.length; i++) {
          let arr = []
          let got = []
          for (var j = 0; j < this.typeData.length; j++) {
            if (this.nameList[i] === this.typeData[j].name) {
              got.push(this.typeData[j].value)
            }
          }
          this.valuesData2.push(got)
        }
        this.load()
      })

    },
    load() {
      //页面初始化
      this.$nextTick(() => {
        this.initChart()
      })
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          data: this.nameList
        },
        series: [
          {
            name: this.nameList[0],
            itemStyle: {
              normal: {
                color: '#FF005A',
                lineStyle: {
                  color: '#FF005A',
                  width: 2
                }
              }
            },
            smooth: true,
            type: 'line',
            data: this.valuesData2[0],
            animationDuration: 280,
            animationEasing: 'cubicInOut'
          },
          {
            name: this.nameList[1],
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            smooth: true,
            type: 'line',
            data: this.valuesData2[1],
            animationDuration: 280,
            animationEasing: 'cubicInOut'
          },
          {
            name: this.nameList[2],
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#248067',
                lineStyle: {
                  color: '#248067',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            smooth: true,
            type: 'line',
            data: this.valuesData2[2],
            animationDuration: 280,
            animationEasing: 'cubicInOut'
          },
          {
            name: this.nameList[3],
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#74759b',
                lineStyle: {
                  color: '#74759b',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            smooth: true,
            type: 'line',
            data: this.valuesData2[3],
            animationDuration: 280,
            animationEasing: 'cubicInOut'
          },
          {
            name: this.nameList[4],
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#5d3f51',
                lineStyle: {
                  color: '#5d3f51',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            smooth: true,
            type: 'line',
            data: this.valuesData2[4],
            animationDuration: 280,
            animationEasing: 'cubicInOut'
          }
        ]
      })
    }
  }
}
</script>
