<script setup lang="ts">
// import { subjectStore } from '@/stores';
import subjectApi from '@/api/subject/subject'
import { useRoute } from 'vue-router'
import Card from '@/page/subject/components/Card.vue'
import ChapterTree from '../combination/ChapterTree/index.vue'
import XLCard from '../history/Card.vue'
import AnalysisTable from './AnalysisTable.vue'
// import Card from './Card.vue';
// import LoadIcon from '@/page/system/mailbox/components/LoadIcon.vue';
import { rateType } from '@/hooks'

const OSS_URL = import.meta.env.VITE_OSS_URL

const route = useRoute()

// const { subject } = subjectStore();

const data = ref<anyObj>({})
const trainType = computed(() => (data.value.trainType === 1 ? 0 : 1))

const pageLoading = ref(false)

async function init() {
  pageLoading.value = true
  data.value = {}
  try {
    const { data: res } = await subjectApi.getGroupPaperDetail(route.params.id as string)
    data.value = res.data
  } catch {}
  pageLoading.value = false
}

onActivated(() => {
  init()
})
</script>
<template>
  <div class="page">
    <BackBar leftText="查看报告"></BackBar>
    <div
      class="main"
      :style="{
        background: `url(${OSS_URL}/urm/groupPaper_hisDetail_bg.svg) 100%/cover no-repeat`,
      }"
    >
      <div v-if="data.id" class="hidden_scroll">
        <div class="whole">
          <Card
            title="练习次数"
            type="other"
            :text="(data.trainNum || '-') + '次'"
            width="398"
            height="166"
          ></Card>
          <Card
            title="练习题数"
            type="other"
            :text="(data.titleNum || '-') + '题'"
            width="398"
            height="166"
          ></Card>
          <Card
            title="错题数"
            type="other"
            :text="(data.errorNum || 0) + '题'"
            width="398"
            height="166"
          ></Card>
          <Card
            title="答题正确率"
            :text="data.correctRate / 100 + '%'"
            :type="rateType(data.correctRate)"
            width="398"
            height="166"
          ></Card>
        </div>
        <div class="range">
          <div class="range-title title" data-content="组卷范围">组卷范围</div>
          <div class="range-list hidden_scroll_x">
            <div v-for="i in data.paperScore" :key="i.id" class="range-list-item">
              <div class="range-list-item-title">
                {{ i.textBookName }}
              </div>
              <el-scrollbar>
                <ChapterTree :options="i.chapter" :type="trainType"></ChapterTree>
              </el-scrollbar>
            </div>
          </div>
        </div>
        <div class="analysis">
          <div class="analysis-title title" data-content="知识点分析">知识点分析</div>
          <div class="analysis-table">
            <AnalysisTable
              v-if="data.knowledgePaperStatisticsVoList?.length"
              :list="data.knowledgePaperStatisticsVoList"
            ></AnalysisTable>
            <Empty v-else content="暂无已作答知识，快去练习吧！" type="learn"></Empty>
          </div>
        </div>
        <div class="record">
          <div class="record-title title" data-content="历史报告">历史报告</div>
          <div v-if="data.userTrainRecordVoList?.length" class="record-list">
            <div v-for="i in data.userTrainRecordVoList" :key="i.id" class="record-list-item">
              <XLCard v-bind="i" :trainType="data.trainType" detail></XLCard>
            </div>
          </div>
          <Empty v-else content="暂无历史报告，快去练习吧！" type="report"></Empty>
        </div>
      </div>
      <Empty v-else class="empty" :type="pageLoading ? 'loading' : 'network'"> </Empty>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  padding: 5.83vh $space-8 0;
  position: relative;
  line-height: 1.5;
  @include main_bg;
  nav {
    position: absolute;
    top: 2.67vh;
    left: 64px;
    z-index: 1;
  }
  .main {
    width: 1792px;
    height: 90.67vh;
    padding: 8.92vh 40px 3.5vh;

    .hidden_scroll {
      height: 100%;
    }
    .whole {
      display: flex;
      margin-bottom: 4.67vh;
      .xxl-card {
        margin-right: 40px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .title {
      text-align: center;
      color: #fff;
      text-align: center;
      font-family: $font-special;
      font-size: 3.33vh;
      margin-bottom: 2vh;
      @include font-stroke($font-color, 4px);
    }
    .range {
      margin-bottom: 4.67vh;
      &-list {
        display: flex;
        height: 25.33vh;
        &-item {
          flex-shrink: 0;
          width: 672px;
          height: 100%;
          background-color: #f6fcff;
          border-radius: 2.67vh;
          overflow: hidden;
          margin-right: 24px;
          :deep(.el-scrollbar) {
            height: calc(100% - 80px);
          }
          &:last-child {
            margin-right: 0;
          }
          &-title {
            width: 672px;
            height: 6.67vh;
            background: #90fcf7;
            color: $font-color;
            font-family: OPPOSans;
            font-size: 2.67vh;
            padding: 1.33vh 24px;
            @include single_ellipsis;
          }
        }
      }
    }
    .analysis {
      margin-bottom: 4.67vh;
    }
    .record {
      &-list {
        display: grid;
        grid-template-columns: repeat(4, 398px);
        grid-template-rows: 236px;
        grid-auto-rows: 236px;
        row-gap: 2.67vh;
        column-gap: 40px;
      }
    }
  }
}
</style>
