<template>
  <el-row>
    <el-row>
      <el-form ref="searchForm" :model="searchForm" label-width="80px">
        <search-white-board :show-more="true" @search="initData">
          <div slot="base">
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="2"><label class="search-label">学年</label></el-col>
              <el-col :span="5">
                <select-school-year v-model="searchForm.schoolYear" clearable filterable @change="initData" />
              </el-col>
              <el-col :span="2" :offset="1"><label class="search-label">学期</label></el-col>
              <el-col :span="5">
                <select-semester v-model="searchForm.semester" clearable filterable @change="initData" />
              </el-col>
              <el-col :span="2" :offset="1"><label class="search-label">学校名称</label></el-col>
              <el-col :span="5">
                <select-school v-model="searchForm.schoolId" select-grade @change="changeSchoolList" />
              </el-col>
            </el-row>
          </div>
        </search-white-board>
      </el-form>
    </el-row>

    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-row><span style="float: left">总览</span></el-row>
        </div>
        <div id="main" style="width: 100%;height:400px;" />
      </el-card>
    </el-row>

    <el-row style="padding: 10px 0px;">
      <class-report :search-form="searchForm" :school-name="schoolName" mark="sm" />
    </el-row>
  </el-row>
</template>

<script>
import { SelectSchoolYear, SelectSemester } from '@/components/school-year-semester'
import { SelectSchool } from '@/components/school'
import ClassReport from '@/views/chart/class-report'
import reportApi from '@/api/reportApi'
import StrKit from '@/utils/str-kit'

export default {
  name: 'DataMarketIndex',
  components: {
    'class-report': ClassReport,
    'select-school-year': SelectSchoolYear,
    'select-semester': SelectSemester,
    'select-school': SelectSchool
  },
  data() {
    return {
      semester: '',
      schoolName: '',
      searchForm: {
        schoolId: '',
        schoolYear: '',
        semester: ''
      },
      reportData: []
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      if (this.searchForm.semester === '1') {
        this.semester = '第一学期'
      }
      if (this.searchForm.semester === '2') {
        this.semester = '第二学期'
      }
      reportApi.reportAll(this.searchForm).then(data => {
        this.reportData = data
        this.drawChart()
      })
    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('main'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: this.searchForm.schoolYear + ' ' + this.semester + ' ' + this.schoolName,
          x: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          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',
          data: this.reportData.schoolList,
          axisLabel: { 'interval': 0, rotate: 40 },
          axisPointer: {
            type: 'shadow'
          }
        }],
        yAxis: [{
          type: 'value',
          name: '兴趣班报名总人次',
          min: 0,
          max: this.reportData.timesMax,
          interval: this.reportData.timesInterval,
          axisLabel: {
            formatter: '{value} 次'
          }
        }, {
          type: 'value',
          name: '兴趣班报名总收入',
          min: 0,
          max: this.reportData.moneyMax,
          interval: this.reportData.moneyInterval,
          axisLabel: {
            formatter: '{value} 元'
          }
        }],
        series: [{
          name: '兴趣班报名总人次',
          type: 'bar',
          data: this.reportData.num,
          label: {
            show: true,
            position: 'top',
            formatter: function(param) {
              return '人次：' + StrKit.numberFormat(param.value)
            }
          }
        }, {
          name: '行政班总人数',
          type: 'bar',
          data: this.reportData.peopleNum,
          label: {
            show: true,
            position: 'top',
            formatter: function(param) {
              return '人数：' + StrKit.numberFormat(param.value)
            }
          }
        }, {
          name: '兴趣班报名总收入',
          type: 'line',
          yAxisIndex: 1,
          data: this.reportData.money,
          label: {
            show: true,
            position: 'top',
            formatter: function(param) {
              return StrKit.moneyFormat(param.value)
            }
          }
        }]
      }
      myChart.setOption(option)
    },
    changeSchoolList(school) {
      this.schoolName = school.name
      this.gradeList = []
      const arr = school.gradeYear.split(',')
      arr.map(item => {
        this.gradeList = this.gradeList.concat(this.constants.GRADE_NAME_LIST2[item - 1])
      })
      this.initData()
    }
  }
}
</script>

<style scoped>
</style>
