<script setup lang="ts">
const props = defineProps<{
  list: anyObj[]
}>()
// （0-待点亮 1-陌生 2-熟悉 3-已掌握）
const degreeConfig = [
  { label: '待点亮', color: '#BABABA' },
  { label: '陌生', color: '#A13C00' },
  { label: '熟悉', color: '#2D39BC' },
  { label: '已掌握', color: '#2F8A5B' },
]
</script>
<template>
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="knowledgeName" label="考察知识点" align="center" min-width="45.6%" />
    <el-table-column prop="totalAnswerCount" label="出题数量" align="center" min-width="18.1%" />
    <el-table-column prop="accuracy" label="答题正确率" align="center" min-width="18.1%">
      <template #default="{ row }"> {{ row.accuracy }}% </template>
    </el-table-column>
    <el-table-column prop="masteryDegree" label="熟练度" align="center" min-width="18.1%">
      <template #default="{ row }">
        <span :style="{ color: degreeConfig[row.masteryDegree]?.color }">
          {{ degreeConfig[row.masteryDegree]?.label }}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
<style scoped lang="scss">
.el-table {
  line-height: 1.5;
  border-radius: 1.67vh;
  border: 0.33vh solid #8a94fd;
  overflow: hidden;
  :deep(.el-table__inner-wrapper) {
    .el-table__cell {
      height: 7.5vh;
      color: $font-color;
      font-family: OPPOSans;
      font-size: 2.33vh;
      font-weight: 400;
      position: relative;
      border: none;
      .cell {
        line-height: 1.5;
      }
      &::after {
        position: absolute;
        left: 0;
        bottom: 0;
        content: '';
        display: block;
        width: 100%;
        height: 0.17vh;
        background: repeating-linear-gradient(
          to right,
          #e8f3fd,
          #e8f3fd 8px,
          transparent 8px,
          transparent 16px /* 线条间隔 */
        );
      }
      &::before {
        position: absolute;
        right: 0;
        top: 0;
        content: '';
        display: block;
        width: 2px;
        height: 100%;
        background: repeating-linear-gradient(
          to bottom,
          #e8f3fd,
          #e8f3fd 8px,
          transparent 8px,
          transparent 16px /* 线条间隔 */
        );
      }
      &:last-child {
        &::before {
          display: none;
        }
      }
    }
  }
  :deep(.el-table__header-wrapper) {
    tr {
      background-color: #c7ccff;
      th.el-table__cell {
        background-color: #c7ccff;
        font-family: $font-special;
      }
    }
  }
}
</style>
