<template>
  <div>
    <div class="fill-card">
      <el-table :data="problemList">
        <el-table-column type="expand">
          <template v-slot="props">
            <div>{{ props.row.description }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column label="类型">
          <template v-slot="scope">
            <span>{{typeTagContent(scope.row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上传时间">
          <template v-slot="scope">
            <span>{{format(scope.row.createdAt) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template v-slot="scope">
            <el-button
                type="primary"
                size="mini"
                @click="
                $router.push({ path: '/problem/' + scope.row.id })
              "
            >详情</el-button
            >
            <el-button
                type="danger"
                size="mini"
                @click="this.$store.commit('removeProblem', scope.row)"
            >移出试题清单</el-button
            >
            <el-button
                type="success"
                size="mini"
                @click="this.$store.commit('addProblem', scope.row)"
            >加入试题清单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="30"
        :total="pageInfo.total"
        @current-change="$emit('current-change', $event)"
    />
  </div>
</template>

<script>
import { formatTimestamp, problemTypeToTagContent } from "@/utils/coder-utils";

export default {
  name: "ProblemList",
  methods: {
    format(timestamp) {
      return formatTimestamp(timestamp);
    },
    typeTagContent(type) {
      return problemTypeToTagContent(type);
    }
  },
  props: {
    problemList: {
      type: Array,
      default: () => []
    },
    pageInfo: {
      type: Object,
      default: () => ({})
    }
  }
};
</script>
