<template>
  <div style="background: #ececec; padding: 15px">
    <a-card title="按单批次对比分析" :loading="loading" :bordered="false">
      <template #extra>
        <a-select v-model:value="collegeMajor" style="width: 300px" :options="collegeMajorOptions" />
        <a-select v-model:value="batch" :options="batchOptions" change-on-select style="margin-left: 10px; width: 120px" />
        <a-button style="margin-left: 10px" type="primary" @click="query">查询</a-button>
      </template>

      <a-row :grutter="24">
        <a-col :xl="16" :style="{ marginBottom: '24px' }">
          <!-- 根据需求 删除 或 更改-->
          <a-card style="margin-bottom: 10px" class="tip">
            <div style="display: flex">
              <div v-if="topCollege != null">
                <span style="color: red; font-size: 18px; padding-left: 100px"> {{ topCollege }}</span>
                <span style="font-size: 15px"> 在 </span>
                <span style="color: red; font-size: 18px"> {{ topBath }} </span>
                <span style="font-size: 15px"> 批次的四级通过率为：</span>
                <span style="color: red; font-size: 18px"> {{ sumRate }}%</span>
              </div>
            </div>
          </a-card>

          <a-card>
            <div>
              <div id="map1" style="width: 100%; height: 400px"></div>
            </div>
          </a-card>
        </a-col>

        <a-col :xl="8" style="padding-left: 10px">
          <a-card :loading="participate_Piechartloading" style="margin-bottom: 10px">
            <div style="width: 100%; height: 210px; padding: 10px" class="participate_Piechart" id="participate_Piechart"></div>
          </a-card>

          <a-card :loading="tableloading" style="height: 268px">
            <div>
              <a-table
                :dataSource="dataSourceCet4"
                :columns="columns"
                :pagination="false"
                bordered
                class="custom-table"
                :style="{ fontSize: '12px', color: '#333', marginTop: '-11px' }"
              />
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
  //import { pagination } from 'mock/_util';
  import { defHttp } from '/@/utils/http/axios';
  import * as echarts from 'echarts';

  export default {
    data() {
      return {
        dataSourceCet4: [],
        columns: [
          {
            title: '年级',
            dataIndex: 'grade',
            key: 'grade',
            align: 'center',
          },
          {
            title: '参加人数',
            dataIndex: 'attendNumber',
            key: 'attendNumber',
            align: 'center',
          },
          {
            title: '通过人数',
            dataIndex: 'passNumber',
            key: 'passNumber',
            align: 'center',
          },
          {
            title: '通过率',
            dataIndex: 'passrate',
            key: 'passrate',
            align: 'center',
          },
        ],
        Url: {
          getBatch: '/cet/getBatch',
          getCollege: '/cet/getCollege',
          getRate: '/cet/getRateByBatch',
          getCollegeMajor: '/cet/getCollegeMajor',
        },
        loading: false,
        participate_Piechartloading: false,
        tableloading: false,
        collegeOptions: [],
        collegeMajorOptions: [],
        batchOptions: [],
        levelOptions: [
          { value: 'cet4', label: '英语四级' },
          { value: 'cet6', label: '英语六级' },
        ],
        level: null,
        college: null,
        batch: null,
        collegeMajor: null,
        sumRate: null, //总通过率
        topCollege: null, //顶部选择器选择的学院
        topBath: null, //顶部选择器选择的批次
      };
    },
    mounted() {
      this.getCollegeMajorData();
      this.getBatch();
      this.query();
    },
    methods: {
      dataChart(data) {
        let xData = [];
        let yData = [];
        for (let key in data) {
          xData.push(key);
          // 将数据转换为百分比（加上%）
          yData.push(data[key].toFixed(1));
        }
        xData = xData.map((label) => label.split('').join('\n')); //将x轴竖着展示
        let myChart = echarts.init(document.getElementById('map1'));
        // 指定图表的配置项和数据
        let option = {
          title: {
            // text: "学院 / 专业通过率变化",
          },
          xAxis: {
            type: 'category',
            data: xData,
            axisLabel: {
              interval: 0, //代表显示所有x轴标签显示
              rotate: 0, //代表倾斜30度显示
            },
          },
          //提示框
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            formatter: function (params) {
              return (
                params[0].name +
                '<br/>' +
                '<table>' +
                '<tr><td>' +
                params[0].marker +
                '</td><td style="font-weight: bold;">' +
                '&nbsp;&nbsp;&nbsp;&nbsp;' +
                params[0].value +
                '%' +
                '</td></tr>' +
                '<tr>' +
                '</table>'
              );
            },
          },
          toolbox: {
            // show: true,
            // feature: {
            //   magicType: { show: true, type: ['line', 'bar'] },
            //   restore: { show: true },
            //   saveAsImage: { show: true },
            // },
          },
          //网格
          grid: {
            left: '3%',
            right: '4%',
            bottom: '1%', //网格距离容器底部的距离是容器高度的3%
            containLabel: true,
          },
          yAxis: {
            type: 'value',
            name: '通过率',
            axisLabel: {
              formatter: '{value} %',
            },
          },
          series: [
            {
              barMaxWidth: 50, // 设置柱子的最大宽度
              data: yData,
              type: 'bar',
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                    textStyle: {
                      //数值样式
                      color: 'black',
                      fontSize: 12,
                    },
                    formatter: '{c}%',
                  },
                },
              },
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      // 获取批次数据
      async getBatch() {
        const getBatch = await defHttp.get({ url: this.Url.getBatch });
        console.log('1111', getBatch);
        this.batchOptions = getBatch.batches.map((item) => {
          return {
            value: item.value,
            label: item.label,
          };
        });
        console.log('2222', this.batchOptions);
        this.batchOptions.forEach((item) => {
          const year = item.label.substring(0, 4);
          if (item.label.includes('12-01')) {
            item.label = `${year}冬季`;
          } else if (item.label.includes('06-01')) {
            item.label = `${year}夏季`;
          } else if (item.label.includes('09-01')) {
            item.label = `${year}夏季`;
          } else if (item.label.includes('03-01')) {
            item.label = `${year}春季`;
          }
        });
        // const getCollege = await defHttp.get({ url: this.Url.getCollege });

        // this.collegeOptions = getCollege.colleges;
        // this.college = this.collegeOptions[0].value;

        this.level = this.levelOptions[0].value;

        // this.query();
      },
      //获取学院专业级联数据
      async getCollegeMajorData() {
        const res = await defHttp.get({ url: this.Url.getCollegeMajor });

        //通过map方法将数据转换为级联选择器需要的数据格式
        this.collegeMajorOptions = res.collegeMajor.map((item) => {
          return {
            value: item.college,
            label: item.college,
            children: item.major.map((major) => {
              return {
                value: major,
                label: major,
              };
            }),
          };
        });
        this.collegeMajorOptions.unshift({ value: '全校', label: '全校' });
        this.collegeMajor = this.collegeMajorOptions[0].value;
        console.log(this.collegeMajor);
        console.log(this.collegeMajorOptions);
      },
      // 查询数据
      async query() {
        this.getBatch();
        let resultData = null;
        try {
          //如果this.batch为null则先赋个值
          if (!this.batch) {
            this.batch = '2017-12-01';
          }
          if (!this.collegeMajor) {
            this.collegeMajor = '全校';
          }
          //如果this.batch[1]不存在则设为null
          this.topCollege = this.collegeMajor;
          this.topBath = this.batch;
          this.loading = true;
          let params = {
            batch: this.batch,
            college: this.collegeMajor,
            level: 'cet4',
          };
          resultData = await defHttp.get({ url: this.Url.getRate, params });
          this.sumRate = resultData.sumRate;

          console.log('result', resultData);
          //表格数据
          let tableData = [];
          for (let grade in resultData.gradeData) {
            tableData.push({
              grade: grade + '级',
              attendNumber: resultData.gradeData[grade].allStudent,
              passNumber: resultData.gradeData[grade].passed,
              passrate: resultData.gradeData[grade].passRate,
            });
          }
          this.dataSourceCet4 = tableData; //表格数据
          console.log(this.dataSourceCet4, 'dataSourceCet4');
        } finally {
          this.loading = false;
          this.$nextTick(() => {
            this.dataChart(resultData.data);

            this.draPieChart_Participate();
          });
        }
      },

      //绘画饼图--该批次每一年级的通过率饼图
      async draPieChart_Participate() {
        //console.log(this.passRatePie);
        //console.log('piedata', piedata);
        let queryParams = {
          batch: this.batch,
          college: this.collegeMajor,
          level: 'cet4',
        };
        console.log(queryParams, 'queryParams');
        let url = this.Url.getRate;
        this.participate_Piechartloading = true;
        this.tableloading = true;
        let result = await defHttp.get({ url: url, params: queryParams });
        console.log(result, 'result');
        let chartsData = [];
        for (let key in result.gradeData) {
          chartsData.push({
            name: key + '级',
            value: result.gradeData[key].passRate,
          });
        }
        let option = {
          tooltip: {
            trigger: 'item',
            conginee: false,
            //字体大小
            itemStytle: {
              // 设置阴影效果
              shadowBlur: 10, // 阴影模糊大小
              shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色
              shadowOffsetX: 5, // 阴影水平方向偏移
              shadowOffsetY: 5, // 阴影垂直方向偏移
              fontSize: 100,
            },
          },
          title: {
            text: '该批次每一年级的通过率环形图',
            left: 'top',
            top: '0%',
            textStyle: {
              fontSize: 12,
            },
          },
          legend: {
            top: '10%',
            left: 'center',

            itemGap: 3,
            selectedMode: true,
          },
          color: ['#ec2e30', '#c75af1', '#2b9eef', '#eee03f', '#2aed91', '#c5ed3c'],

          series: [
            {
              name: '学院/专业该批次通过人数环形图',
              type: 'pie',
              radius: ['50%', '100%'],
              center: ['50%', '50%'],
              startAngle: 130,
              top: 80,
              //暂时没有
              itemStyle: {
                // borderRadius: 5,
                // borderColor: '#fff',
                borderWidth: 2,
              },
              label: {
                show: true,
                // position: 'inside',
                fontSize: 12,
                overflow: 'truncate',
              },
              labelLine: {
                show: true,
                smooth: true,
                length: 10,
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
                label: {
                  show: true,
                  fontSize: 15,
                  fontWeight: 'bold',
                },
              },
              data: chartsData,
            },
            {
              type: 'pie',
              startAngle: 130,
              top: 80,
              radius: ['40%', '51%'],
              center: ['50%', '50%'],
              //暂时没有
              itemStyle: {
                // borderRadius: 3,
                // borderColor: '#fff',
                borderWidth: 2,
              },
              label: {
                show: false,
              },
              hoverAnimation: false,
              legendHoverLink: false,
              // animationn：false,
              tooltip: {
                show: false,
              },
              data: chartsData,
            },
          ],
          animationDurationUpate: 500,
        };
        this.participate_Piechartloading = false;
        this.tableloading = false;
        this.$nextTick(() => {
          var myChart = echarts.init(document.getElementById('participate_Piechart'));
          myChart.setOption(option);
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  .container {
    // display: flex;
    background-color: #fff;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  }

  .title {
    font-size: 20px;
    color: rgb(8, 8, 8);
    font-weight: bold;
  }
  .tip {
    margin-bottom: 10px;
    background-color: #d0e5fe;
    opacity: 0.9;
  }
</style>
