<template>
  <div>
    <a-card :bordered="false">
      <a-tabs v-model:activeKey="activeKey" type="card">
        <a-tab-pane key="1" tab="对比多专业四级通过率">
          <div class="tab3">
            <!-- <span style="font-size: 15px;margin-right: 10px; display: flex;justify-content: center;align-items: center;
              font-weight: bold;">专业: </span>
              <a-cascader v-model:value="collegeMajor" style="width: 300px;margin-right: 20px;"
                :options="collegeMajorOptions" :changeOnSelect="false" multiple :maxTagCount="5" expandTrigger="hover"
                @change="onMajorChange" />
              <span style="font-size: 15px;margin-right: 10px;font-weight: bold;display: flex;
              justify-content: center;align-items: center;">年级: </span>
              <a-select v-model:value="majorentrydate" style="width: 200px" :options="entrydateOptions" mode="multiple"
                :max-tag-count="5" @change="onCollegeMajorChange"></a-select>
              <a-button style="margin-left: 10px;" type="primary" @click="majorQuery">查询</a-button> -->
            <div style="display: flex">
              <span style="font-size: 15px; margin-right: 10px; font-weight: bold; display: flex; justify-content: center; align-items: center"
                >年级:
              </span>
              <a-checkbox-group v-model:value="majorentrydate" :options="entrydateOptions" @change="onMajorEntrydateChange" />
            </div>
            <div style="display: flex; margin-top: 10px">
              <span style="font-size: 15px; margin-right: 10px; font-weight: bold; display: flex; justify-content: center; align-items: center"
                >学院:
              </span>
              <a-radio-group v-model:value="collegeMajor" :options="collegeMajorOptions" @change="onMajorCollegeChange" />
            </div>
            <div style="display: flex; margin-top: 10px">
              <span style="font-size: 15px; margin-right: 10px; font-weight: bold; display: flex; justify-content: center; align-items: center"
                >专业:
              </span>
              <a-checkbox-group v-model:value="majorCheckOn" :options="majorOptions" @change="onCollegeMajorChange" />
            </div>
            <div style="margin-top: 10px">
              <span style="font-size: 15px; margin-right: 10px; font-weight: bold; display: flex; align-items: center"
                >已选择:
                <a-tag v-for="(item, index) in lastCollegeMajor" :key="item[1]" style="margin-left: 10px; font-size: 13px" color="blue">
                  {{ item[1] }}
                  <a-icon type="close" style="font-size: 15px" @click="removeTag(index)" />
                </a-tag>
              </span>
            </div>
            <div style="margin-top: 20px; margin-right: 20px; display: flex; justify-content: flex-end; align-items: center">
              <a-button style="margin-left: 10px" type="primary" @click="clearMajor">清除</a-button>
              <a-button style="margin-left: 10px" type="primary" @click="majorQuery">查询</a-button>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-card title="按专业分析" :loading="tab3loading" :bordered="false">
      <template #extra>
        <!-- <a-select v-model:value="college" style="width: 300px" mode="multiple" :max-tag-count="2"
          :options="collegeOptions" @change="onCollegeMajorChange"></a-select> -->
        <!-- <a-select v-model:value="batch" style="margin-left: 10px;width: 120px" :options="batchOptions"></a-select> -->
        <!-- <a-select v-model:value="level" style="margin-left: 10px;width: 120px" :options="levelOptions"></a-select> -->
        <!-- <a-select v-model:value="entrydate" style="margin-left: 10px;width: 150px"
          :options="entrydateOptions"></a-select>
        <a-button style="margin-left: 10px;" type="primary" @click="query">查询</a-button> -->
      </template>
      <a-row :gutter="12">
        <a-col :xl="14">
          <div class="container">
            <div id="map3" style="width: 100%; height: 400px"></div>
          </div>
        </a-col>
        <a-col :xl="10">
          <div class="container">
            <div id="map4" style="width: 100%; height: 400px"></div>
          </div>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
  import { defHttp } from '/@/utils/http/axios';
  import * as echarts from 'echarts';
  import { message } from 'ant-design-vue';

  export default {
    data() {
      return {
        activeKey: '1',
        allCollege: [],
        showBox: false,
        showGroup: false,
        oneentrydate: null,
        collegeentrydate: [],
        majorentrydate: [],
        lastMajorEntrydate: [],
        checkedOptions: [],
        collegetab2: [],
        collegeMajorOptions: [],
        collegeMajor: [],
        Url: {
          getBatch: '/cet/getBatch',
          getEntrydate: '/cet/getEntrydate',
          getCollege: '/cet/getCollege',
          getCollegeRate: '/cet/getRateByCollege',
          getAllRate: '/cet/getAllRate',
          getCollegeMajor: '/cet/getCollegeMajor',
          getRateByMajor: '/cet/getRateByMajor',
        },
        tab1loading: false,
        tab2loading: false,
        tab3loading: false,

        collegeOptions: [],
        batchOptions: [],
        levelOptions: [
          { value: 'cet4', label: '英语四级' },
          { value: 'cet6', label: '英语六级' },
        ],
        visible: false,
        level: null,
        college: [],
        batch: null,
        entrydateOptions: [],
        entrydate: [],
        majorCheckOn: [],
        //对不同的学院选择的专业进行记忆化
        lastCollegeMajor: [],
        majorLength: 0,
        majorOptions: [],
        //对学院对比学院进行记忆化上次选择结果
        lastCollege: [],
        //对学院对比学院进行记忆化上次选择结果
        lastCollegeEntrydate: [],
      };
    },
    mounted() {
      this.getCollegeOptions();
      // this.getBatch();
      this.getEntrydate();
      this.allQuery();
      this.getCollegeMajorData();
    },
    methods: {
      onMajorChange(value) {
        console.log(value, 'value');
        let length = value.length;
        //遍历value,与this.collegeMajorOptions比较，如果value中的数据在this.collegeMajorOptions中则获得他的children长度
        for (let i = 0; i < value.length; i++) {
          for (let j = 0; j < this.collegeMajorOptions.length; j++) {
            if (value[i] == this.collegeMajorOptions[j].value) {
              length += this.collegeMajorOptions[j].children.length;
              length -= 1;
            }
            if (length > 5) {
              message.error('最多选择五个专业');
              //删除value最后一个数据
              value.pop();
              return;
            }
          }
        }
        console.log(length, 'length');
      },
      allQuery() {
        this.tab1loading = true;
        let college = ['全校'];
        let query = 'tab1';
        if (this.oneentrydate == null) {
          this.oneentrydate = '2017';
        }
        this.query(query, college, [this.oneentrydate]);
      },
      async majorQuery() {
        if (this.majorentrydate.length == 0) {
          message.error('请选择年级');
          return;
        }
        if (this.collegeMajor.length == 0 || this.collegeMajor == null) {
          message.error('请选择学院');
          return;
        }
        if (this.lastCollegeMajor.length == 1 || this.lastCollegeMajor == null) {
          message.error('请至少选择两个专业');
          return;
        }
        if (this.lastCollegeMajor.length == 0 || this.lastCollegeMajor == null) {
          message.error('请选择专业');
          return;
        }
        this.tab3loading = true;
        let res = null;
        try {
          let params = {
            college: this.lastCollegeMajor,
            entrydate: this.majorentrydate,
          };
          res = await defHttp.post({ url: this.Url.getRateByMajor, params });
        } finally {
          console.log(res, 'res');
          this.tab3loading = false;
          this.$nextTick(() => {
            this.drawChart(res.data, 'tab3');
            this.drawChart2(res.data, 'tab3');
          });
        }
      },

      //获取学院专业级联数据
      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.collegeMajor = ['东语学院'];
        console.log(this.collegeMajor, 'collegeMajor');
        console.log(this.collegeMajorOptions, 'collegeMajorOptions1');
      },

      getCollegeOptions() {
        defHttp.get({ url: this.Url.getCollege }).then((res) => {
          this.collegeOptions = res.colleges;
          // 手动添加一个全校字段

          // this.collegeOptions.unshift({ value: '全校', label: '全校' });
          // this.collegeOptions.forEach(option => {
          //  if (option.value !== '全校') {
          //     option.disabled = true;
          //}

          //  });
          //  this.college = ['全校'];
          // this.collegetab2 = ['地理科学学院', '文学院'];
          console.log(this.collegeOptions, 'collegeOptions');
        });
      },
      onMajorEntrydateChange(value) {
        console.log(value, 'value');
        if (value.length > 5) {
          //找到value中不在this.lastMajorEntrydate中的数据
          for (let i = 0; i < value.length; i++) {
            if (!this.lastMajorEntrydate.includes(value[i])) {
              message.error('最多选择五个');
              //删除value[i]
              value.splice(i, 1);
              return;
            }
          }
        }
        this.lastMajorEntrydate = value;
      },
      //学院对比 学院选项回调函数
      onCollegeChange(value) {
        console.log(value, 'value');
        if (value.length > 5) {
          message.error('最多选择五个');
          //和lastCollege比较，如果value中的数据不在lastCollege中则删除
          for (let i = 0; i < value.length; i++) {
            if (!this.lastCollege.includes(value[i])) {
              value.splice(i, 1);
              return;
            }
          }
          return;
        }
        this.lastCollege = value;
      },
      //学院对比 年级选项回调函数
      onCollegeEntrydateChange(value) {
        console.log(value, 'value');
        if (value.length > 5) {
          message.error('最多选择五个');
          //和lastCollegeEntrydate比较，如果value中的数据不在lastCollegeEntrydate中则删除
          for (let i = 0; i < value.length; i++) {
            if (!this.lastCollegeEntrydate.includes(value[i])) {
              value.splice(i, 1);
              return;
            }
          }
          return;
        }
        this.lastCollegeEntrydate = value;
      },
      //专业选项回调函数
      onCollegeMajorChange(value) {
        //将value中的数据与this.lastCollegeMajor比较，如果value中的有this.lastCollegeMajor中没有的数据则添加,反之寻找在this.majorOptions中并且在this.lastCollegeMajor中但是不在value中的数据删除
        for (let i = 0; i < value.length; i++) {
          if (!this.lastCollegeMajor.map((item) => item[1]).includes(value[i])) {
            if (this.majorLength == 5) {
              message.error('最多选择五个');
              //从value中删除value[i]
              value.splice(i, 1);
              return;
            }
            this.lastCollegeMajor.push([this.collegeMajor, value[i]]);
            this.majorLength++;
          }
        }
        for (let i = 0; i < this.lastCollegeMajor.length; i++) {
          if (!value.includes(this.lastCollegeMajor[i][1])) {
            //查看该数据是都在this.majorOptions中
            if (this.majorOptions.find((item) => item.value == this.lastCollegeMajor[i][1])) {
              this.lastCollegeMajor.splice(i, 1);
              console.log('splice');
              this.majorLength--;
            }
          }
        }
        console.log(value, 'value');
      },
      removeTag(index) {
        if (this.majorCheckOn.includes(this.lastCollegeMajor[index][1])) {
          let index1 = this.majorCheckOn.indexOf(this.lastCollegeMajor[index][1]);
          this.majorCheckOn.splice(index1, 1);
        }
        this.lastCollegeMajor.splice(index, 1);
        this.majorLength--;
      },
      //学院选项回调函数
      onMajorCollegeChange(value) {
        let val = value.target.value;
        console.log(val, 'value');
        console.log(this.collegeMajorOptions.find((item) => item.value == val).children, 'majorOptions');
        this.majorOptions = this.collegeMajorOptions.find((item) => item.value == val).children;
        //将this.majorCheckOn中的数据与this.lastCollegeMajor比较，如果this.lastCollegeMajor中有this.majorCheckOn中没有的数据则删除,反之添加
        // for (let i = 0; i < this.majorCheckOn.length; i++) {
        //   if (!this.lastCollegeMajor.includes(this.majorCheckOn[i])) {
        //     this.lastCollegeMajor.push(this.majorCheckOn[i]);
        //   }
        // }
        // for (let i = 0; i < this.lastCollegeMajor.length; i++) {
        //   if (!this.majorCheckOn.includes(this.lastCollegeMajor[i])) {
        //     this.lastCollegeMajor.splice(i, 1);
        //     console.log("splice")
        //   }
        // }
        // this.lastCollegeMajor = this.majorCheckOn;
        console.log(this.lastCollegeMajor, 'lastCollegeMajor');
        this.majorCheckOn = this.lastCollegeMajor.map((item) => item[1]);
        console.log(this.majorCheckOn, 'majorCheckOn');
      },

      clearMajor() {
        this.majorCheckOn = [];
        this.lastCollegeMajor = [];
        this.majorLength = 0;
      },
      clearCollege() {
        this.collegetab2 = [];
        this.collegeentrydate = [];
        this.lastCollege = [];
        this.lastCollegeEntrydate = [];
      },
      //tab2\3图标
      drawChart(data, tab) {
        let seriesData = [];

        let xData = this.majorentrydate.sort((a, b) => a - b);
        if (tab == 'tab2') {
          xData = this.collegeentrydate.sort((a, b) => a - b);
        }
        let k = 0;
        let legendData = [];
        let colors = [
          '#5370c5',
          '#91CC75',
          '#fac858',
          '#ee6666',
          '#73c0de',
          '#FF6A6A',
          '#FFA500',
          '#EE2C2C',
          '#90EE90',
          '#008B8B',
          '#FFC0CB',
          '#FFDAB9',
          '#FFDEAD',
          '#FFE4B5',
          '#FFE4C4',
          '#FFE4E1',
          '#FFEBCD',
          '#FFEFD5',
          '#FFFAF0',
          '#FFFAFA',
          '#FFFFE0',
          '#FFFFF0',
          '#FFFFFF',
          '#F0F8FF',
          '#FAEBD7',
          '#FAF0E6',
          '#FAFAD2',
          '#F5FFFA',
          '#F8F8FF',
          '#F0FFF0',
          '#F0FFFF',
          '#F0E68C',
          '#F0F8FF',
          '#F0FFF0',
          '#F0FFFF',
          '#F4A460',
          '#F5DEB3',
          '#F5F5DC',
          '#F5F5F5',
          '#F5FFFA',
          '#F8F8FF',
          '#F9EBEA',
          '#FAD7A0',
          '#FAF0E6',
          '#FAFAD2',
          '#FAF0E6  ',
        ];
        for (let i in data) {
          console.log(i, 'i');
          legendData.push(i);
          let yData = [];
          // legendData=[];
          console.log(data[i], 'data[i]');

          for (let j in data[i]) {
            console.log(data[i][j].college, 'data[i][j].college111');
            // if(data[i][j].college == ''){
            yData.push(data[i][j].passRate);
            // legendData.push(data[i][j].college);
          }
          console.log(yData, 'yData');
          seriesData.push({
            name: i,
            type: 'bar',
            //设置柱状图大小
            barWidth: 16,
            data: yData,
            //柱子间距
            barGap: '30%',
            //颜色
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: '{c}%',
                  textStyle: {
                    //数值样式
                    color: 'black',
                    fontSize: 13,
                  },
                },
                color: colors[k++],
              },
            },
          });
        }
        // debugger
        let myChart = null;
        console.log(tab, 'tab');
        if (tab == 'tab2') {
          myChart = document.getElementById('map2');
          if (myChart) {
            myChart = echarts.getInstanceByDom(myChart);
            if (myChart) {
              myChart.dispose();
            }
          }
          myChart = echarts.init(document.getElementById('map2'));
        } else if (tab == 'tab3') {
          myChart = document.getElementById('map3');
          if (myChart) {
            myChart = echarts.getInstanceByDom(myChart);
            if (myChart) {
              myChart.dispose();
            }
          }
          myChart = echarts.init(document.getElementById('map3'));
        }
        // 指定图表的配置项和数据
        let option = {
          legend: {},
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            formatter: function (params) {
              //生成tooltip,加上小圆球
              let result = params[0].name + '级通过率<br>';
              for (let i = 0; i < params.length; i++) {
                result += params[i].marker + legendData[i] + ' : ' + params[i].value + '%' + '<br>';
              }
              return result;
            },
          },
          toolbox: {
            show: true,
            //feature: {
            //  magicType: { show: true, type: ['line', 'bar'] },
            //  restore: { show: true },
            //  saveAsImage: { show: true },
            //},
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: xData,
              axisLabel: {
                interval: 0, //代表显示所有x轴标签显示
                rotate: 0, //代表倾斜0度显示
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: '通过率',
              axisLabel: {
                formatter: '{value} %',
              },
            },
          ],
          series: seriesData,
        };
        // 使用刚指定的配置项和数据显示图表。
        console.log(option, 'option');
        console.log(myChart, 'myChart');
        setTimeout(() => {
          myChart.setOption(option);
        }, 1);
      },
      drawChart2(data, tab) {
        let seriesData = [];

        let xData = this.majorentrydate.sort((a, b) => a - b);
        if (tab == 'tab2') {
          xData = this.collegeentrydate.sort((a, b) => a - b);
        }
        let k = 0;
        let legendData = [];
        let colors = [
          '#5370c5',
          '#91CC75',
          '#fac858',
          '#ee6666',
          '#73c0de',
          '#FF6A6A',
          '#FFA500',
          '#EE2C2C',
          '#90EE90',
          '#008B8B',
          '#FFC0CB',
          '#FFDAB9',
          '#FFDEAD',
          '#FFE4B5',
          '#FFE4C4',
          '#FFE4E1',
          '#FFEBCD',
          '#FFEFD5',
          '#FFFAF0',
          '#FFFAFA',
          '#FFFFE0',
          '#FFFFF0',
          '#FFFFFF',
          '#F0F8FF',
          '#FAEBD7',
          '#FAF0E6',
          '#FAFAD2',
          '#F5FFFA',
          '#F8F8FF',
          '#F0FFF0',
          '#F0FFFF',
          '#F0E68C',
          '#F0F8FF',
          '#F0FFF0',
          '#F0FFFF',
          '#F4A460',
          '#F5DEB3',
          '#F5F5DC',
          '#F5F5F5',
          '#F5FFFA',
          '#F8F8FF',
          '#F9EBEA',
          '#FAD7A0',
          '#FAF0E6',
          '#FAFAD2',
          '#FAF0E6  ',
        ];
        for (let i in data) {
          console.log(i, 'i');
          legendData.push(i);
          let yData = [];
          // legendData=[];
          console.log(data[i], 'data[i]');

          for (let j in data[i]) {
            console.log(data[i][j].college, 'data[i][j].college111');
            // if(data[i][j].college == ''){
            yData.push(data[i][j].passRate);
            // legendData.push(data[i][j].college);
          }
          console.log(yData, 'yData');
          seriesData.push({
            name: i,
            type: 'line',
            data: yData,
            //柱子间距
            barGap: '30%',
            //颜色
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: '{c}%',
                  textStyle: {
                    //数值样式
                    color: 'black',
                    fontSize: 13,
                  },
                },
                color: colors[k++],
              },
            },
          });
        }
        // debugger
        let myChart = null;
        console.log(tab, 'tab');
        if (tab == 'tab3') {
          myChart = document.getElementById('map4');
          if (myChart) {
            myChart = echarts.getInstanceByDom(myChart);
            if (myChart) {
              myChart.dispose();
            }
          }
          myChart = echarts.init(document.getElementById('map4'));
        }
        // 指定图表的配置项和数据
        let option = {
          legend: {},
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            formatter: function (params) {
              //生成tooltip,加上小圆球
              let result = params[0].name + '级通过率<br>';
              for (let i = 0; i < params.length; i++) {
                result += params[i].marker + legendData[i] + ' : ' + params[i].value + '%' + '<br>';
              }
              return result;
            },
          },
          toolbox: {
            show: true,
            //feature: {
            //  magicType: { show: true, type: ['line', 'bar'] },
            //  restore: { show: true },
            //  saveAsImage: { show: true },
            //},
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: xData,
              axisLabel: {
                interval: 0, //代表显示所有x轴标签显示
                rotate: 0, //代表倾斜0度显示
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: '通过率',
              axisLabel: {
                formatter: '{value} %',
              },
            },
          ],
          series: seriesData,
        };
        // 使用刚指定的配置项和数据显示图表。
        setTimeout(() => {
          myChart.setOption(option);
        }, 1);
      },
      // 获取批次数据
      async getBatch() {
        const getBatch = await defHttp.get({ url: this.Url.getBatch });
        this.batchOptions = getBatch.batches;
        this.batch = this.batchOptions[0].value;
        this.level = this.levelOptions[0].value;
      },
      //获取年级数据
      async getEntrydate() {
        const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate });
        this.entrydateOptions = getEntrydate.entrydates;
        this.oneentrydate = this.entrydateOptions[0].value;
      },
      // 查询数据
      async query(query, college, entrydate) {
        this.visible = false;
        let result = null;
        try {
          // console.log(this.college, this.entrydate)
          let params = {
            college: college,
            entrydate: entrydate,
            level: 'cet4',
          };
          let url = query == 'tab1' ? this.Url.getAllRate : this.Url.getCollegeRate;
          console.log(params.college, 'college');
          result = await defHttp.post({ url: url, params });
          //使数据按照passRate从大到小排序
          // result.data.sort((a, b) => {
          //   return b.passRate - a.passRate;
          // });
          console.log('data', result.data);
        } finally {
          query == 'tab1' ? (this.tab1loading = false) : (this.tab2loading = false);
          this.$nextTick(() => {
            this.drawChart(result.data, query);
            this.drawChart2(result.data, query);
          });
        }
      },
    },
  };
</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);
  }

  .query {
    //居左
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 24px;
  }

  .tab3 {
    justify-content: flex-start;
    align-items: center;
    margin-left: 24px;
  }

  .title {
    font-size: 34px;
    color: rgb(8, 8, 8);
    font-weight: bold;
  }
</style>
