<template>
  <div class="app-container">
    <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="70px">
      <el-form-item label="学年" prop="classYear">
        <el-date-picker v-model="queryForm.classYear" type="year" @change="getList" format="yyyy" value-format="yyyy"
          placeholder="选择年度" :clearable="false"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="gradeName" label="年级" align="center" width="180">
      </el-table-column>
      <el-table-column prop="num13" label="13岁" align="center" width="180">
      </el-table-column>
      <el-table-column prop="num14" label="14岁" align="center" width="180">
      </el-table-column>
      <el-table-column prop="num15" align="center" label="15岁">
      </el-table-column>
      <el-table-column prop="num16" align="center" label="16岁">
      </el-table-column>
      <el-table-column prop="num17" align="center" label="17岁">
      </el-table-column>
      <el-table-column prop="num18" align="center" label="18岁">
      </el-table-column>
      <el-table-column prop="num19" align="center" label="19岁">
      </el-table-column>
      <el-table-column prop="num20" align="center" label="20岁">
      </el-table-column>
      <el-table-column prop="num21" align="center" label="21岁">
      </el-table-column>
      <el-table-column prop="num22" align="center" label="22岁">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { listGradeAge } from "@/api/smartSchool/teachAffairAdministration/ageStatistics";
import { getNewYear } from "@/api/smartSchool/teachAffairAdministration/affairClassView/index.js";

export default {
  name: "index",

  mounted() {
    //     console.log(echarts, 'create')
    // // 基于准备好的dom，初始化echarts实例
    //     let myChart = echarts.init(document.getElementById('gradeEcharts'));
    // // 绘制图表
    //     myChart.setOption(this.gradeData);
    //     window.addEventListener("resize", function () {
    //       myChart.resize()
    //     })
  },
  data() {
    return {
      queryForm: {
        gradeValue: '',
        gradeName: '',
        classNum: '',
        boyNum: '',
        girlNum: '',
        allNum: '',
        classYear: '',
      },
      tableData: [],
      gradeData: {
        title: {
          text: '年级年龄统计图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            // console.log(params, 67)
            return `<span>${params[0].seriesName}</span>：<span>${params[0].value}人</span><br/>
                    ${params[1].seriesName}：${params[1].value}人<br/>
                    ${params[2].seriesName}：${params[2].value}人<br/>
                    总计：${Number(params[0].value) + Number(params[1].value) + Number(params[2].value)}人
                    `
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        legend: {},
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          name: "年龄",
          // min: 13,
          // max: 22,
          // splitNumber: 9,
          axisLabel: {
            fontSize: 20,
            fontWeight: "bold"
          },
          nameTextStyle: {
            fontStyle: "italic",
            fontWeight: "bold"
          },
          data: ['13', '14', '15', '16', '17', '18', '19', '20', '21', '22']
        },
        yAxis: {
          name: "人数",
          type: 'value',
          nameTextStyle: {
            fontStyle: "italic",
            fontWeight: "bold"
          },
        },
        series: [
          {
            name: '高一',
            type: 'bar',
            barWidth: 25,
            data: ['9', '4', '5', '10', '7', '8', '1', '0', '0', '1'],
          },
          {
            name: '高二',
            type: 'bar',
            barWidth: 25,
            data: ['13', '14', '15', '16', '17', '18', '19', '30', '21', '22'],
          },
          {
            name: '高三',
            type: 'bar',
            barWidth: 25,
            data: ['3', '14', '15', '26', '17', '18', '29', '20', '21', '2'],
          }
        ]
      },
      // 遮罩层
      loading: false,

    }
  },
  created() {
    this.newYear();
  },
  methods: {
    //获得当前年份
    newYear() {
      getNewYear().then((res) => {
        //数值类型转换成字符串
        this.queryForm.classYear = res.schoolYear + '';
        console.log('this.queryForm.classYear', typeof this.queryForm.classYear);
        this.getList();
      });
    },

    getList() {
      this.loading = true;
      const classYear = this.queryForm.classYear;
      console.log('his.queryForm.classYear', this.queryForm.classYear);
      listGradeAge(classYear)
        .then(response => {
          this.loading = false;
          this.tableData = response.rows;
          this.total = response.total;
        })
        .catch(error => {

        });
    },

    // 重置按钮
    resetQuery() {
      this.getNowYear();
      this.getList();
    },
    /** 【导出】按钮 */
    handleExport() {
      this.throttle(() => {
        this.download('/statistics/exportAge', {}, `级部学生年龄${Date.now()}.xlsx`)
      })
    },
  }
}
</script>

<style scoped></style>
