<template>
  <div class="bbsl-common-page">
    <div class="wrap">
      <div class="header">
        题库分析
      </div>
      <div class="content">
        <div class="contentItem">
          <div id="testingTypes" class="full"></div>
        </div>
        <div class="divider"></div>
        <div class="contentItem">
          <div id="itemFifficulty" class="full"></div>
        </div>
      </div>
      <div class="footer">
        <el-table
          ref="multipleSelection"
          v-loading="loading"
          :cell-style="{'text-align': 'center'}"
          :data="tableData.questionTypeVos"
          :header-cell-style="{'text-align': 'center'}"
          :style="{width: '100%'}"
          size="mini"
          @row-dblclick="handleDbClick"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            label="题目类型"
            prop="typeName"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="题目总数" prop="count" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="简单" prop="simple" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="普通" prop="ordinary" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="困难" prop="difficult" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </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: {},
      tableData1: [],
      sttxList: [], //试题类型
      stndList: [], //试题难度
      difficultPercentage: []
    }
  },
  created() {
    this.sttxList = dictUtils.getDictItemsFromCache('sttx')
    this.stndList = dictUtils.getDictItemsFromCache('stnd')
  },
  mounted() {},
  methods: {
    // 获取list
    loadData(page) {
      this.difficultPercentage = []
      this.loading = true
      bbtjMenu.questionAnalysis({}, res => {
        if (res) {
          this.tableData = res
          this.tableData.questionTypeVos.forEach(q => {
            this.sttxList.forEach(s => {
              if (q.type == s.value) {
                q.typeName = s.name
              }
            })
          })
          for (let key in this.tableData.difficultPercentage) {
            this.stndList.forEach(t => {
              if (key == t.value) {
                this.difficultPercentage.push({
                  name: t.name,
                  value: this.tableData.difficultPercentage[key]
                })
              }
            })
            console.log(this.difficultPercentage) //键值
          }
          this.$nextTick(() => {
            this.testType()
            this.fifficulty()
          })
          this.$set(this.tableData)
          this.loading = false
        }
        console.log(this.tableData)
      })
    },
    testType() {
      let arr = []
      this.tableData.questionTypeVos.forEach(q => {
        arr.push({
          name: q.typeName,
          value: q.count
        })
      })
      let chartDom = document.getElementById('testingTypes')
      let myChart = echarts.init(chartDom)
      let option = {
        title: {
          text: '试题类型百分比统计',
          top: '20',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '0',
          left: 'center'
          // orient: 'vertical',
          // top: '30%',
          // right: '20'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            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()
      })
    },
    fifficulty() {
      let chartDom = document.getElementById('itemFifficulty')
      let myChart = echarts.init(chartDom)
      let option = {
        title: {
          text: '试题难度百分比统计',
          top: '20',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // orient: 'vertical',
          bottom: '0',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: this.difficultPercentage,
            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: #fff;
  border-radius: 20px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;

  .header {
    padding: 10px;
    font-weight: bold;
    box-sizing: border-box;
    border-bottom: 1px solid #dcdfe6;

    span {
      font-weight: 100;
      color: #999999;
    }
  }

  .content {
    height: calc(50% - 31px);
    display: flex;
    align-items: center;

    .contentItem {
      width: 50%;
      height: 100%;
    }

    .divider {
      width: 1px;
      height: 80%;
      background-color: #dcdfe6;
    }
  }

  .footer {
    height: 50%;
  }
}
</style>
