<script setup lang="ts">
import homeWorkApi from '@/api/system/homeWork'
import { colorConfig } from './hooks'
import { rateType } from '@/hooks'

const props = defineProps<{
  params: anyObj
}>()

// const width_rate = window.screen.width / 1920;

const data = ref<anyObj[]>([])
async function getData() {
  const { data: res } = await homeWorkApi.getKnowledgeAnalyse(props.params)
  data.value = res.data
  currentType.value = res.data[0].type
}
const typeConfig = ['薄弱', '合格', '良好', '优秀']
const dataList = computed(() =>
  data.value.map(({ type }) => ({
    value: type,
    label: typeConfig[type],
  })),
)
const tableData = computed(
  () => data.value.find(i => i.type === currentType.value)?.knowledgeAnalyseVos,
)
const currentType = ref(0)

const pageLoading = ref(false)

onMounted(async () => {
  pageLoading.value = true

  try {
    await getData()
  } catch {}
  pageLoading.value = false
})
</script>
<template>
  <div class="knowledge">
    <div v-if="data.length" class="knowledge-main">
      <div class="knowledge-main-select">
        <SelectTab v-model="currentType" :dataList="dataList"></SelectTab>
      </div>
      <div class="knowledge-main-table">
        <el-table :data="tableData">
          <el-table-column label="知识点名称" prop="name" align="center" minWidth="53%">
          </el-table-column>
          <el-table-column
            label="满分"
            prop="fullScore"
            align="center"
            minWidth="23.5%"
          ></el-table-column>
          <el-table-column label="得分" align="center" minWidth="23.5%">
            <template #default="{ row }">
              <span
                :style="{
                  color: colorConfig[rateType((Number(row.scoreRate.replace('%', '')) || 0) * 100)],
                }"
                >{{ row?.score }}/{{ row?.scoreRate }}</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <Empty
      v-else
      class="empty"
      :type="pageLoading ? 'loading' : 'knowledge'"
      content="暂无知识点数据～"
    ></Empty>
  </div>
</template>
<style scoped lang="scss">
.knowledge {
  width: 100%;
  height: 100%;
  &-main {
    border-radius: 3.33vh;
    border: 0.67vh solid #fff;
    background: linear-gradient(179deg, #fdfdf9 0.69%, #dfebf7 99.53%);
    box-shadow: 0 0.33vh 0.67vh 0 rgba(0, 0, 0, 0.25);
    padding: 4.33vh 48px;
    height: 100%;
    &-select {
      text-align: center;
    }
    :deep(.select-list) {
      display: inline-flex;
      margin-bottom: 5vh;
      .data-item {
        width: 298px;
      }
    }
    &-table {
      height: calc(100% - 100px);
      :deep(.el-table) {
        box-sizing: border-box;
        border: 0.33vh #659cfe solid;
        border-radius: 3.33vh;
        background: transparent;
        max-height: 100%;
        @include hidden_scroll;

        .cell {
          line-height: 1.5;
          color: $font-color;
          font-size: 2.33vh;
          padding: 0 4px;
          @include single_ellipsis;
        }
        th.el-table__cell {
          background: #ccdeff;
          font-family: $font-special;
          padding: 1.5vh 0;
        }
        .el-table__cell {
          height: 7.5vh;
          color: $font-color;
          font-family: OPPOSans;
          font-size: 2.33vh;
          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,
              #deedfc,
              #deedfc 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,
              #deedfc,
              #deedfc 8px,
              transparent 8px,
              transparent 16px /* 线条间隔 */
            );
          }
          &:last-child {
            &::before {
              display: none;
            }
          }
        }
        tr {
          background: transparent;
          td {
            font-family: OPPOSans;
            padding: 1.5vh 0;
          }
        }
      }
    }
  }
}
</style>
