<template>
  <div>
    <Dec :content="content" />
    <div class="aswinfo">
      <div class="testtitle">
        <p><span class="bold">试卷编码：</span>0003</p>
        <p><span class="bold">试卷名称：</span>【第六章-经济学人】测试试卷（中）</p>
        <el-button type="primary" size="small">导出成绩单</el-button>
      </div>
      <div class="testinfo">
        <p class="bold">2020年小学一年级开学考试</p>
        <div class="infobox">
          <el-row>
            <el-col :span="2">
              <p>考场</p>
              <p class="bold big">001</p>
            </el-col>
            <el-col :span="7" style="border-right:1px solid #ccc">
              <p><i class="el-icon-document" /> 卷面分：100分</p>
              <p><i class="el-ump-shijian" /> 考试时长：30分钟</p>
              <p><i class="el-ump-shijian" /> 开始考试时间：2019-12-25 10:00</p>
            </el-col>
            <el-col :span="15" style="padding-left:20px">
              <div class="scoreinfo">
                <Info v-for="(item,index) in scoredata" :key="index" :icon="item.icon" :label="item.label" :value="item.value" />
              </div>
              <div class="paperinfo">
                <Info v-for="(item,index) in paperdata" :key="index" :icon="item.icon" :label="item.label" :value="item.value" />
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="piebox">
        <div id="myChart" :style="{width: '100%', height: '500px'}" />
      </div>
      <div class="rankbox">
        <div class="title">排行榜</div>
        <el-table
          :data="rankData"
          height="430"
          style="width: 100%"
        >
          <el-table-column
            prop="rank"
            label="排名"
          />
          <el-table-column
            prop="name"
            label="学生名称"
          />
          <el-table-column
            prop="rightbl"
            label="正确率"
          />
          <el-table-column
            prop="score"
            label="得分"
          />
        </el-table>
      </div>
      <div style="clear:both" />
      <div class="errorbox">
        <div class="title">
          <p class="bold" style="float:left;">易错题分析</p>
          <p style="float:right">正确率从低到高排序 <i class="el-icon-caret-bottom" /></p>
          <div style="clear:both" />
        </div>
        <div class="listbox">
          <div v-for="(item,index) in errorList" :key="index" :ref="'list'" class="list">
            <el-row>
              <el-col :span="4">
                <p class="bold">第{{ item.rank }}题</p>
                <p>{{ item.type }}</p>
              </el-col>
              <el-col :span="16">
                <div class="asw">
                  <p style="float:left"><i class="el-ump-icon-3" />易错项：<span class="red">{{ item.easyerror }}</span></p>
                  <p style="float:left;margin-left:40px;"><i class="el-ump-icon-5" />正确答案：<span class="green">{{ item.right }}</span></p>
                  <div style="clear:both" />
                </div>
                <div v-if="activeShow!=index" class="rightbl">
                  <i class="el-ump-icon-6" />
                  <span>正确率</span>
                  <Rightbl :data="item.rightbl" />
                </div>
                <transition name="el-zoom-in-top">
                  <Aswdetail v-show="activeShow==index" :data="item.aswdetail" class="detailbox" />
                </transition>
              </el-col>
              <el-col :span="4" style="line-height:70px;">
                <div v-if="activeShow!=index" style="display:inline-block;cursor: pointer;" @click="toggle(index)">
                  <span>展开详情</span>
                  <i class="el-icon-caret-bottom" />
                </div>
                <div v-else style="position:absolute;bottom:0px;cursor: pointer;" @click="toggle(-1)">
                  <span>收起详情</span>
                  <i class="el-icon-caret-top" />
                </div>
              </el-col>
            </el-row>
            <div v-if="activeShow==index" class="blbox">
              <i class="el-ump-icon-6" />
              正确率：{{ item.rightbl }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Dec from '@/components/Dec'
import Aswdetail from './components/aswdetail'
import Info from './components/info'
import Rightbl from './components/rightbl'
export default {
  name: 'Aswinfo',
  components: {
    Dec,
    Aswdetail,
    Info,
    Rightbl
  },
  data() {
    return {
      content: '',
      activeShow: -1,
      tg: true,
      scoredata: [
        {
          icon: 'el-ump-icon-4',
          label: '最高分',
          value: '99分'
        },
        {
          icon: 'el-ump-icon-',
          label: '最低分',
          value: '34分'
        },
        {
          icon: 'el-ump-icon-1',
          label: '平均分',
          value: '76分'
        }
      ],
      paperdata: [
        {
          icon: 'el-ump-icon-2',
          label: '应到人数',
          value: '55人'
        },
        {
          icon: 'el-ump-icon-2',
          label: '及格人数',
          value: '43人'
        },
        {
          icon: 'el-ump-icon-2',
          label: '不及格人数',
          value: '7人'
        },
        {
          icon: 'el-ump-icon-2',
          label: '缺考人数',
          value: '5人'
        }
      ],
      rankData: [
        {
          rank: '1',
          name: '张三',
          rightbl: '98%',
          score: '98'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        }
      ],
      errorList: [
        {
          rank: '1',
          type: '单选题',
          easyerror: 'AB',
          right: 'ABCDEFG',
          rightbl: '30.32%',
          aswdetail: [
            {
              answer: 'A',
              num: '33',
              total: '60',
              right: 1
            },
            {
              answer: 'BCDEFGHIJKL',
              num: '12',
              total: '60',
              right: 0
            },
            {
              answer: 'C',
              num: '5',
              total: '60',
              right: 0
            },
            {
              answer: 'D',
              num: '5',
              total: '60',
              right: 0
            },
            {
              answer: '未提交',
              num: '5',
              total: '60',
              right: -1
            }
          ]
        },
        {
          rank: '3',
          type: '多选题',
          easyerror: 'AB',
          right: 'ABCDEFG',
          rightbl: '30.32%',
          aswdetail: [
            {
              answer: 'A',
              num: '33',
              total: '60',
              right: 1
            },
            {
              answer: 'BCDEFGHIJKL',
              num: '12',
              total: '60',
              right: 0
            },
            {
              answer: 'C',
              num: '5',
              total: '60',
              right: 0
            },
            {
              answer: 'D',
              num: '5',
              total: '60',
              right: 0
            },
            {
              answer: '未提交',
              num: '5',
              total: '60',
              right: -1
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '某站点用户访问来源',
          subtext: '纯属虚构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    toggle(index) {
      index === -1 ? this.tg = true : this.tg = false
      this.activeShow = index
    }
  }
}
</script>
<style scoped>
.aswinfo{
    min-width: 1100px;
    max-width: 1700px;
    height:calc(100vh - 115px);
    overflow: auto;
    margin:0 auto;
    background: #fff;
    margin-top:15px;
    padding:20px;
}
.infobox{
  font-size: 14px;
}
.big{
  font-size: 20px;
}
.bold{
  font-weight:bold
}
.testtitle{
  overflow: hidden;
  padding:10px 0;
}
.testtitle p{
  float: left;
}
.testtitle p:first-child{
  margin-right:20px;
}
.testtitle .el-button{
  float: right
}
.testinfo{
  border:1px solid #ccc;
  border-radius: 20px;
  padding:20px;
}
.scoreinfo .info,.paperinfo .info{
  width:110px;
  margin-right:15px;
}
.piebox{
  width:calc(60% - 5px);
  padding:5px;
  float: left;
  border:1px solid #ccc;
  border-radius: 20px;
  margin-top:10px;
}
.rankbox{
  width:calc(40% - 5px);
  height:512px;
  padding:5px;
  float: left;
  border:1px solid #ccc;
  border-radius:20px;
  margin-top:10px;
  margin-left:5px;
}
.rankbox .title{
  line-height: 60px;
  text-align: center;
}
.errorbox{
  border:1px solid #eee;
  border-radius: 20px;
  padding:10px 20px;
  margin-top:10px;
  background: #eee;
}
.listbox{
  max-height: 550px;
  overflow: auto;
}
.listbox .list{
  background: #fff;
  border-radius: 15px;
  padding:10px 15px;
  position: relative;
  margin-bottom:20px;
}
.detailbox{
  margin-top:30px;
}
.list i{
  color:#ccc;
  margin-right:10px;
}
.blbox{
  position:absolute;
  right:20px;
  top:10px;
  border:1px solid #ccc;
  padding:5px 10px;
}
.red{
  color: #f00;
}
.green{
  color:green;
}
</style>
