<template>
  <Basic>
    <div class="Flex">
      <div class="Left">
        <el-card shadow="never">
          <div class="mock_test_report">
            <div class="score"><span>{{score}}</span><span>分</span></div>
            <div class="header">
              <h3>{{header.name}}</h3>
              <div class="flex">
                <div class="item">
                  <span>题目数</span>
                  <span>{{header.num}}</span>
                </div>
                <div class="item">
                  <span>总分</span>
                  <span>{{header.score}}</span>
                </div>
                <div class="item">
                  <span>作答用时</span>
                  <span>{{header.use_time}}</span>
                </div>
                <div class="item">
                  <span>开始时间</span>
                  <span>{{header.start_time}}</span>
                </div>
                <div class="item">
                  <span>交卷时间</span>
                  <span>{{header.end_time}}</span>
                </div>
              </div>
            </div>
            <div class="body">
              <div class="label-flex">
                <div class="left">作答概况</div>
              </div>
              <el-table
                :data="tableData"
                border
                show-summary
                style="width: 801px"
              >
                <el-table-column
                  v-for="(item,index) of table_cols"
                  :key="index"
                  :prop="item.prop"
                  :label="item.label"
                  :width="item.width"
                >

                </el-table-column>
              </el-table>
            </div>
            <div class="footer">
              <div class="label-flex">
                <div class="left">作答详情</div>
                <div class="right">
                  <div class="flex">
                    <div class="item">
                      <span></span>
                      <span>正确</span>
                    </div>
                    <div class="item">
                      <span></span>
                      <span>错误</span>
                    </div>
                    <div class="item">
                      <span></span>
                      <span>未做</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex">
                <div
                  v-for="(item,index) in detail"
                  :class="[item.state==1 ? 'green' : item.state==2 ? 'red' : '']"
                  :key="index"
                  @click="Success(item)"
                >{{index+1}}</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div
        v-if="no.length!=0"
        class="Right"
      >
        <el-card shadow="never">
          <div class="header">
            <div class="left">排名</div>
            <div class="right">答题得分</div>
          </div>
          <div class="body">
            <div
              v-for="(item,index) in no"
              :key="index"
              class="item"
            >
              <div class="left">
                <div class="index">{{item.rank}}</div>
                <div class="name">{{item.name}}</div>
              </div>
              <div class="right">{{item.score}}</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </Basic>
</template>
<script>
const Basic = () => import("@/components/Basic/index");
import Home from '@/api/home'
export default {
  components: {
    Basic
  },
  data () {
    return {
      score: 70,//总分
      header: {
        // num: 90,
        // score: 100,
        // use_time: "33分20秒",
        // start_time: "2021-09-22 00:00:00",
        // end_time: "2021-09-22 12:59:23"
      },//头部数据
      table_cols: [{
        label: "题型",
        prop: 'name',
        width: "200"
      },
      {
        label: "题目数",
        prop: 'total_count',
        width: "150"
      },
      {
        label: "答对数",
        prop: 'total_right',
        width: "150"
      },
      {
        label: "总分",
        prop: 'total_scores',
        width: "150"
      },
      {
        label: "得分",
        prop: 'answer_scores',
        width: "150"
      }],
      tableData: [
        //   {
        //   name: '123',
        //   total_count: 45,
        //   total_right: 30,
        //   total_scores: 50,
        //   answer_scores: 30
        // }, {
        //   name: '123',
        //   total_count: 45,
        //   total_right: 30,
        //   total_scores: 50,
        //   answer_scores: 40
        // }
      ],
      // 作答详情
      detail: [
        // { state: 1 },
        // { state: 1 },
        // { state: 1 },
        // { state: 1 },
        // { state: 1 },
        // { state: 1 },
        // { state: 1 },
        // { state: 1 },
        // { state: 2 },
        // { state: 1 },
        // { state: 2 },
        // { state: 1 },
        // { state: 2 },
        // { state: 1 },
        // { state: "" },
        // { state: "" }, { state: "" },
        // { state: "" }, { state: "" },
        // { state: "" },
      ],
      // 排名 
      no: [
        // { name: "蒙奇.D.路飞", score: 99 },
        // { name: "特拉法尔加.罗", score: 95 },
        // { name: "尤斯塔斯·基德", score: 94 },
        // { name: "诺诺亚.索隆", score: 98 },
        // { name: "基拉", score: 93 },
        // { name: "X·德雷克", score: 90 },
      ]
    }
  },
  created () {
    this.Request({ type: this.$route.query.type, id: this.$route.query.id })
  },
  methods: {
    Request (data) {
      Home.mock_examination_report(data).then(res => {
        try {
          let { ranks, answer_log, question } = res.data;
          let score = 0, header = {};
          question.answer_items.forEach(item => {
            score += item.answer_scores;
          })
          header = {
            name: question.exampaper_name,
            num: question.question_total_count, score: question.question_total_scores,
            use_time: `${Math.floor(question.use_time / 60 / 60)}时${Math.floor((question.use_time - Math.floor(question.use_time / 60 / 60) * 60 * 60) / 60)}分${Math.floor(question.use_time % 60)}秒`,
            start_time: question.exam_time,
            end_time: question.submit_time
          }
          let detail = [];
          detail = answer_log.map(item => ({ ...item, state: item.status == 1 ? 1 : item.status == 2 ? 2 : '' }))
          this.header = header;
          this.tableData = question.answer_items;
          this.no = ranks.map(item => {
            let obj = { ...item, score: item.scores };
            return obj;
          });
          this.score = score;
          this.detail = detail;
        } catch (err) {
          console.error(`数据处理错误：${err}`)
        }
      })
    },
    Success (data) {
      console.log(data)
    }
  },
}
</script>
<style lang="less" scoped>
.Flex {
  display: flex;
  justify-content: center;
  .Left {
    width: 850px;
    margin-right: 50px;
    .mock_test_report {
      position: relative;
      .score {
        position: absolute;
        right: 10px;
        & > span:first-child {
          color: #f03;
          font-weight: bold;
          font-size: 28px;
        }
      }
      .header {
        text-align: center;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
        .flex {
          display: flex;
          justify-content: space-around;
          margin: 10px 0;
          .item {
            & > span:first-child {
              color: #777;
              margin-right: 10px;
            }
          }
        }
      }
      .body {
        margin-bottom: 15px;
        .el-button {
          color: #1abc9c;
        }
        .center {
          text-align: center;
        }
      }
      .label-flex {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .left {
          font-weight: bold;
          margin: 5px 0;
        }
        .right {
          .flex {
            display: flex;
            align-items: center;
            color: #777;
            .item {
              & > span:first-child {
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #ccc;
                margin: 0 3px;
              }
              margin: 0 5px;
            }
            & > .item:nth-child(1) > span:first-child {
              background-color: #67c23a;
            }
            & > .item:nth-child(2) > span:first-child {
              background-color: #f03;
            }
          }
        }
      }
      .footer {
        & > .flex {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          div {
            width: 30px;
            height: 30px;
            margin: 5px 15px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            background-color: #ccc;
            color: #fff;
          }
          .green {
            background-color: #67c23a;
          }
          .red {
            background-color: #f03;
          }
        }
      }
    }
  }
  .Right {
    width: 300px;
    .header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .body {
      & > .item:first-child {
        .left {
          .index {
            background-color: #f03;
            color: #fff;
          }
        }
      }
      & > .item:nth-child(2) {
        .left {
          .index {
            background-color: rgb(251, 236, 16);
            color: #fff;
          }
        }
      }
      & > .item:nth-child(3) {
        .left {
          .index {
            background-color: rgb(8, 191, 246);
            color: #fff;
          }
        }
      }
      .item {
        display: flex;
        margin: 10px 0;
        justify-content: space-between;
        align-items: center;
        .left {
          display: flex;
          align-items: center;
          .index {
            width: 20px;
            height: 20px;
            font-size: 14px;
            margin-right: 5px;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
          }
          .name {
            color: #777;
          }
        }
        .right {
          color: #777;
        }
      }
    }
  }
}
</style>