<template>
  <el-card v-if="searchForm.schoolId" class="box-card" :search-form="searchForm">
    <div slot="header" class="clearfix">
      <el-row><span style="float: left">学校各 行政班/兴趣班 报名情况</span></el-row>
    </div>

    <el-row>
      <el-col :span="12"><div :id="mark" style="width: 100%;height:400px;" /></el-col>
      <el-col :span="12"><div :id="mark + mark" style="width: 100%;height:400px;" /></el-col>
    </el-row>
  </el-card>
</template>

<script>
import reportApi from '@/api/reportApi'

export default {
  name: 'Echarts',
  props: {
    searchForm: {
      type: Object,
      default: () => {}
    },
    mark: {
      type: String,
      default: ''
    },
    schoolName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      reportCLassList: [],
      reportHobbyList: [],
      semester: ''
    }
  },
  computed: {
  },
  watch: {
    searchForm: {
      handler(newValue, oldValue) {
        this.list()
      },
      deep: true
    }
  },
  mounted() {
    this.list()
  },
  methods: {
    list() {
      if (this.searchForm.semester === '1') {
        this.semester = '第一学期'
      }
      if (this.searchForm.semester === '2') {
        this.semester = '第二学期'
      }

      if (this.searchForm.schoolId !== '') {
        reportApi.findReportByHobby(this.searchForm).then(data => {
          this.reportHobbyList = data
        })
        reportApi.findReportByClass(this.searchForm).then(data => {
          this.reportCLassList = data
          this.drawChart()
        })
      }
    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      const myChartClass = this.$echarts.init(document.getElementById(this.mark))
      const myChartHobby = this.$echarts.init(document.getElementById(this.mark + this.mark))

      myChartClass.clear()
      myChartHobby.clear()

      // 指定图表的配置项和数据
      const optionClass = {
        title: {
          text: this.searchForm.schoolYear + ' ' + this.semester + ' ' + this.schoolName,
          x: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        toolbox: {
          y: '17px',
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: this.reportCLassList.classList,
          y: '25px'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.reportCLassList.gradeList,
          axisLabel: { 'interval': 0, rotate: 40 }
        },
        yAxis: {
          type: 'value',
          name: '兴趣班报名总人次',
          min: 0,
          max: this.reportCLassList.timesMax,
          interval: this.reportCLassList.timesInterval,
          axisLabel: {
            formatter: '{value} 人'
          }
        },
        series: this.reportCLassList.reportSeriesDtos
      }

      const optionHobby = {
        title: {
          text: this.searchForm.schoolYear + ' ' + this.semester + ' ' + this.schoolName,
          x: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          y: '17px',
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['兴趣班报名总人次'],
          y: '25px'
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: { 'interval': 0, rotate: 40 },
            data: this.reportHobbyList.nameList,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [{
          type: 'value',
          name: '兴趣班报名总人次',
          min: 0,
          max: this.reportHobbyList.timesMax,
          interval: this.reportHobbyList.timesInterval,
          axisLabel: {
            formatter: '{value} 人'
          }
        }],
        series: [{
          name: '兴趣班报名总人次',
          type: this.reportHobbyList.type,
          data: this.reportHobbyList.data,
          label: {
            show: true,
            position: 'top'
          }
        }]
      }

      myChartHobby.setOption(optionHobby)
      myChartClass.setOption(optionClass)
    }
  }
}
</script>

<style scoped>

</style>
