<template>
  <div class="tabb">
    <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-edit"
            >继续练习</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :Data="pagination"
      @Func="Request"
    />
  </div>
</template>
<script>
const Pagination = () => import("@/components/Pagination/index");
import Home from '@/api/home';
export default {
  components: {
    Pagination
  },
  data () {
    return {
      table_cols: [{
        label: "开始时间",
        prop: 'create_time',
        width: "200"
      },
      {
        label: "开始习题",
        prop: 'begin_answer',
        width: "250"
      },
      {
        label: "结束时间",
        prop: 'submit_time',
        width: "200"
      },
      {
        label: "结束习题",
        prop: 'end_answer',
        width: "250"
      },
      {
        label: "正确",
        prop: 'right_count',
        width: "50"
      },
      {
        label: "错误",
        prop: 'wrong_count',
        width: "50"
      }],
      tableData: [],
      pagination: {},
    }
  },
  computed: {

  },
  methods: {
    // 请求练习记录数据
    Request (data = { page: 1, limit: 10 }) {
      Home.mock_examination_b(data).then(res => {
        try {
          let { currentPage, data, totalResult, totalPage } = res;
          this.tableData = data;
          this.pagination = {
            currentPage,
            page_size: 10,
            total: totalResult,
            page_count: totalPage
          }
        } catch (err) {
          this.$message.error(`数据处理：${err}`);
        }
      })
    },
    handleClick (data) {
      let { create_time, submit_time, next_practise } = data;
      this.$router.push({ path: '/exam', query: { practise: data.id, timer: new Date(submit_time) - new Date(create_time), next_practise } })
    }
  },
  created () {
    this.Request();
  },
}
</script>
<style lang="less" scoped>
.tabb {
  .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>