<template>
  <div>
    <common></common>
    <el-card class="con">
    <!-- 上部导航栏 -->
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane>
        <span slot="label">
          <i class="el-icon-date"></i> 学生信息
        </span>
        <!-- 内容上部区域 -->
        <div class="workTop">
          <div class="Topleft">
            <span>2019年10月20日模拟训练测试1</span>
            <span>六年级二班</span>
          </div>
          <div class="Topright">
            <div class="block1"></div>未提交
            <div class="block2"></div>已提交
            <div class="block3"></div>已批阅
          </div>
        </div>
        <!-- 内容表格区域 -->
        <!-- 下方内容区域 -->
        <div class="botTable">
          <el-table :show-header="false" :data="tableData" style="width: 100%">
            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
            <el-table-column align="center" prop="name" label="姓名" width></el-table-column>
          </el-table>
          <div class="botRight">
            <div>
              共
              <span>40</span>人
            </div>
            <div>
              已提交
              <span>22</span>人
            </div>
            <div>
              已批阅
              <span>2</span>人
            </div>
          </div>
        </div>

        <div class="undone">
          <a href="javescript:;" @click="unread">还没有批阅完成？</a>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <i class="el-icon-date"></i> 班级学情
        </span>
       <div class="homeworkline"><div class="scorePage">成绩单</div></div>
   <!-- 班级学情表格 -->
     <div class="">
      <el-table
    :data="tableData2"
    border
    style="width: 100%"
    :header-cell-style="{background:'#FAFAFA'}">
    <el-table-column
    align="center"
      prop="id"
      label="序号"
      width="">
    </el-table-column>
    <el-table-column
    align="center"
      prop="id"
      label="序号"
      width="">
    </el-table-column>
    <el-table-column
    align="center"
      prop="id"
      label="序号"
      width="">
    </el-table-column>
    <el-table-column
    align="center"
      prop="id"
      label="序号"
      width="">
    </el-table-column>
    <el-table-column
    align="center"
      prop="id"
      label="序号"
      width="">
    </el-table-column>
    <el-table-column
    align="center"
      prop="id"
      label="序号"
      width="">
    </el-table-column>
    <el-table-column
    align="center"
      prop="id"
      label="序号"
      width="">
    </el-table-column>
    </el-table>
      </div>
      <div class="homeworkline"><div class="scorePage">题型得分率</div></div>
        <div id="main01" style="width: 600px;height:400px;"></div>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">
          <i class="el-icon-date"></i> 精准推送
        </span>
        精准推送
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <i class="el-icon-date"></i> 套题分析
        </span>
       套题分析
      </el-tab-pane>
    </el-tabs>
    </el-card>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      activeName: "",
      tableData: [
        {
          name: 1
        }
      ],
      tableData2:[]
    };
  },
  methods: {
    unread() {
      this.$router.push("./unread");
    }
  },
  mounted(){
    // 柱形图
var myChart01 = echarts.init(document.getElementById('main01'));
var options01 = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '平均正确率', '最高正确率'],
            ['选择题', 43.3, 85.8, 93.7],
            ['填空题', 83.1, 73.4, 55.1],
            ['解答题', 86.4, 65.2, 82.5],
            ['计算题', 72.4, 53.9, 39.1],
             ['综合题', 72.4, 53.9, 39.1]

        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
        {type: 'bar'},
        {type: 'bar'},
    ]
};
myChart01.setOption(options01)
  }
};
</script>
<style lang="less" scoped>
.con{
    margin:15px auto 0;
    width: 1200px;
    min-width: 800px;
    height: 100%;
    background-color: #fff;
    
}
.workTop {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .Topright {
    width: 210px;
    height: 14px;
  }
  .block1,
  .block2,
  .block3 {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #ced8e7;
    margin: 0 2px;
  }
  .block2 {
    background-color: #4597ff;
  }
  .block3 {
    background-color: #e58d37;
  }
}

.botTable {
  position: relative;
  width: 100%;
  height: 205px;
  border: 1px solid #ccc;
  .botRight {
    position: absolute;
    bottom: 15px;
    right: 5px;
    width: 250px;
    height: 20px;
    div {
      margin-left: 10px;
      font-size: 14px;
      float: left;
    }
    span:nth-child(1) {
      color: #ff0000;
    }
    div:nth-child(2) span {
      color: #68a7ff;
    }
    div:nth-child(3) span {
      color: #e58d37;
    }
  }
}
.undone {
  margin: 15px;
  float: right;
  a {
    color: #ff0000;
  }
}

// 班级学情
.homeworkline {
  font-size: 10px;
    height: 15px;
    width: 100%;
    border-bottom:1px solid #ccc;
    position: relative;
    margin-bottom: 20px;
    .scorePage{
        width: 60px;
        text-align: center;
        height: 18px;
        background-color: #fff;
        padding: 0 5px;
        position: absolute;
        bottom: -8px;
        left: 15px;
    }
}
</style>