<template>
  <div class="bbsl-common-page">
    <div class="wrap">
      <div class="header">
        <div class="title">
          <div></div>
          基本数据(平台数据分析)
        </div>
        <div class="header-content">
          <div class="item">
            <div>试题总数</div>
            <div>{{ this.tableData.questionCount }}</div>
          </div>
          <div class="item">
            <div>试卷总数</div>
            <div>{{ this.tableData.paperCount }}</div>
          </div>
          <div class="item">
            <div>课目总数</div>
            <div>{{ this.tableData.subjectCount }}</div>
          </div>
          <div class="item">
            <div>考生人数</div>
            <div>{{ this.tableData.userCount }}</div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div></div>
          试题分析
        </div>
        <div class="content-box">
          <div class="boxItem">
            <div id="paperTypes" class="full"></div>
          </div>
          <div class="boxItem">
            <div id="itemFifficulty" class="full"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {TableMixin} from '@/mixins/tableMixin'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import bbtjMenu from '@/api/examination/bbtjMenu.js'

export default {
  name: 'kstongjiMenu',
  components: {},
  mixins: [TableMixin],
  data() {
    return {
      tableData: {},
      sttxList: [], //试题类型
      stndList: [] //试题难度
    }
  },
  created() {
    this.sttxList = dictUtils.getDictItemsFromCache('sttx')
    this.stndList = dictUtils.getDictItemsFromCache('stnd')
  },
  mounted() {},
  methods: {
    // 获取list
    loadData() {
      this.loading = true
      this.tableData = []
      bbtjMenu.paperAnalysis({}, res => {
        if (res) {
          this.tableData = res
          this.tableData.questionTypeList.forEach(q => {
            this.sttxList.forEach(s => {
              if (q.type == s.value) {
                q.typeName = s.name
              }
            })
          })
          this.tableData.difficulty.forEach(d => {
            this.stndList.forEach(t => {
              if (d.difficulty == t.value) {
                d.difficultyName = t.name
              }
            })
          })
          this.$nextTick(() => {
            this.fifficulty()
            this.paperType()
          })
          this.$set(this.tableData)
          this.loading = false
        }
        console.log(this.tableData)
      })
    },
    paperType() {
      let typeName = []
      let counts = []
      this.tableData.questionTypeList.forEach(q => {
        typeName.push(q.typeName)
        counts.push(q.count)
      })
      let chartDom = document.getElementById('paperTypes')
      let myChart = echarts.init(chartDom)
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: typeName,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '60%',
            data: counts
          }
        ]
      }
      option && myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    fifficulty() {
      let arr = []
      this.tableData.difficulty.forEach(d => {
        arr.push({
          name: d.difficultyName,
          value: d.count
        })
      })
      let chartDom = document.getElementById('itemFifficulty')
      let myChart = echarts.init(chartDom)
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          // bottom: '0',
          left: '0',
          top: '40%'
        },
        series: [
          {
            type: 'pie',
            // center: ['50%', '50%'],
            radius: ['20%', '30%'],
            data: arr,
            label: {
              normal: {
                formatter: '{b}：{d}%'
              }
            },
            itemStyle: {
              borderColor: '#fff'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      option && myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrap {
  background-color: #eaedf4;
  height: 100%;

  .header {
    height: 40%;
    background-color: #fff;
    border-radius: 20px;
    margin-bottom: 10px;
    padding: 20px;
    box-sizing: border-box;

    .header-content {
      width: 100%;
      height: calc(100% - 15px);
      display: flex;

      align-items: center;
      justify-content: space-between;

      .item {
        width: 23%;
        height: 70%;
        padding: 50px;
        box-sizing: border-box;
        border-radius: 20px;
        // background-color: aquamarine;

        font-weight: bold;

        div:nth-child(1) {
          line-height: 40px;
          font-size: 24px;
        }

        div:nth-child(2) {
          font-size: 24px;
          color: #11be56;
        }
      }

      .item:nth-child(1) {
        background: url('~@/assets/img/Group1.png') no-repeat;
        background-size: 100%;
      }

      .item:nth-child(2) {
        background: url('~@/assets/img/Group2.png') no-repeat;
        background-size: 100%;
      }

      .item:nth-child(3) {
        background: url('~@/assets/img/Group3.png') no-repeat;
        background-size: 100%;
      }

      .item:nth-child(4) {
        background: url('~@/assets/img/Group4.png') no-repeat;
        background-size: 100%;
      }
    }
  }

  .title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;

    div {
      width: 3px;
      height: 15px;
      background-color: #11be56;
      margin-right: 10px;
    }
  }

  .content {
    height: calc(60% - 10px);
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;

    .content-box {
      width: 100%;
      height: calc(100% - 15px);
      display: flex;

      .boxItem {
        width: 50%;
        height: 100%;
      }
    }
  }
}
</style>
