<template>
  <div class="taba">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        v-for="(item,index) of table_cols"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
        <div slot-scope="scope">
          <span
            v-if="item.prop== 'right_count'"
            class="right_count"
          >{{scope.row[[item.prop]]}}</span>
          <span
            v-else-if="item.prop=='wrong_count'"
            class="wrong_count"
          >{{scope.row[[item.prop]]}}</span>
          <span v-else>{{scope.row[[item.prop]]}}</span>
        </div>

      </el-table-column>

      <el-table-column width="159">
        <template slot="header">
          <div class="center">操作</div>
        </template>
        <template slot-scope="scope">
          <div class="center">
            <el-button
              @click="handleClick(scope.row)"
              type="text"
              size="small"
              icon="el-icon-view"
            >查看报告</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :Data="pagination"
      @Func="Request"
    />
  </div>
</template>
<script>
import Home from '@/api/home';
const Pagination = () => import("@/components/Pagination/index");
export default {
  components: {
    Pagination
  },

  data () {
    return {
      table_cols: [
        {
          label: "名称",
          prop: 'exampaper_name',
          width: "340"
        }, {
          label: "开始时间",
          prop: 'exam_time',
          width: "230"
        },
        {
          label: "结束时间",
          prop: 'submit_time',
          width: "230"
        },
        {
          label: "得分",
          prop: 'scores',
          width: "100"
        },
        {
          label: "正确",
          prop: 'right_count',
          width: "50"
        },
        {
          label: "错误",
          prop: 'wrong_count',
          width: "50"
        }],
      tableData: [{
        exam_time: "2021-04-20 15:32:26",
        exampaper_name: "第一次世界大战考试",
        submit_time: "2021-04-20 15:32:26",
        scores: 88,
        exampaper: 38,
        right_count: 3, wrong_count: 2
      }, {
        exam_time: "2021-04-20 15:32:26",
        exampaper_name: "第二次世界大战考试",
        submit_time: "2021-04-20 15:32:26",
        scores: 88,
        exampaper: 16,
        right_count: 3, wrong_count: 2
      }, {
        exam_time: "2021-04-20 15:32:26",
        exampaper_name: "冷战",
        submit_time: "2021-04-20 15:32:26",
        scores: 88,
        exampaper: 6,
        right_count: 3, wrong_count: 2
      }],
      pagination: {}
    }
  },
  methods: {
    // 请求数据
    Request (data = {}) {
      let query = { ...data };
      Home.examinationrecord_b(query).then(res => {
        try {
          let { currentPage, data, totalResult, totalPage } = res;
          this.pagination = {
            currentPage,
            page_size: 10,
            total: totalResult,
            page_count: totalPage
          }
          this.tableData = data;
        } catch (err) {
          console.error(`数据处理错误：${err}`)
        }
      })
    },
    handleClick (data) {
      this.$router.push({ path: "/mocktestreport", query: { type: "mock", id: data.id } })
    }
  },
  created () {
    this.Request();
  },
}
</script>
<style lang="less" scoped>
.taba {
  .right_count,
  .wrong_count {
    display: block;
    text-align: center;
  }
  .right_count {
    color: green;
  }
  .wrong_count {
    color: red;
  }
  .el-button {
    color: #1abc9c;
  }
  .center {
    text-align: center;
  }
}
</style>