<script setup lang="ts">
import { userStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { EncourageLanguage, rateType } from '@/hooks'
import { timeDiff } from '@/utils'

const props = defineProps<{
  modelValue: boolean
  data: any
}>()
const emit = defineEmits(['update:modelValue', 'ok'])

const { userInfo } = storeToRefs(userStore())

// 正确率
const rightRate = computed(() => {
  return Math.trunc((props.data.rightNum / props.data.totalNum) * 10000)
})

// 作答时长
const timeInfo = computed(() => {
  const time = timeDiff(props.data.startTime, props.data.endTime)
  if (props.data.timeOutExit) {
    return time + '(超时)'
  }
  return time
})

// 乐贝
const currency = computed(() => {
  return props.data.bonus?.['currency'] || 0
})

function ok() {
  emit('update:modelValue', false)
  emit('ok')
}

// 鼓励标题
const encourageTitle = computed(() => EncourageLanguage.value(rightRate.value))

// 测算数值标题
const numberTitle = computed(() => {
  const total = props.data.graspInfo?.totalNum || 0
  const stageName = props.data.extra?.stageName
  if (stageName) return `${stageName}（共${total}个）`
  const book = props.data.extra?.book
  if (!book) return 'AI测算'
  return `${book.versionName}-${book.bookName}（共${total}个）`
})
</script>
<template>
  <el-dialog
    class="word-test-report"
    align-center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modelValue="modelValue"
    @update:modelValue="$emit('update:modelValue', $event)"
  >
    <board-bg class="report_dia_main">
      <div class="hidden_scroll">
        <div class="report_dia_title" :data-content="encourageTitle">
          {{ encourageTitle }}
        </div>
        <div class="reward-list">
          <div v-if="currency" class="reward-list-item">
            <Icon name="coin" width="72"></Icon>
            <span class="text">+{{ currency }}</span>
          </div>
        </div>
        <div class="card-box">
          <div class="card-list">
            <right-rate-card :right-rate="rightRate" />
            <number-card title="得分" :text="data.score" :type="rateType(rightRate)" width="460" />
            <number-card
              class="rating"
              title="评级"
              :text="data.rating"
              :type="rateType(rightRate)"
              width="460"
            />
          </div>
        </div>

        <div class="report_dia_title" :data-content="numberTitle">{{ numberTitle }}</div>
        <div class="card-box">
          <div class="card-list">
            <number-card
              title="陌生数"
              :text="data.graspInfo?.strangeText"
              type="error"
              :tip="data.graspInfo?.strangeChange || undefined"
            />
            <number-card
              title="认识数"
              :text="data.graspInfo?.knowText"
              type="warning"
              :tip="data.graspInfo?.knowChange || undefined"
            />
            <number-card
              title="熟悉数"
              :text="data.graspInfo?.knowWellText"
              type="primary"
              :tip="data.graspInfo?.knowWellChange || undefined"
            />
            <number-card
              title="掌握数"
              :text="data.graspInfo?.graspText"
              type="success"
              :tip="data.graspInfo?.graspChange || undefined"
            />
          </div>
        </div>

        <div class="report_dia_title" data-content="测评明细">测评明细</div>
        <div class="word-list">
          <div
            v-for="item in data.wordVoList"
            :key="item.id"
            class="word"
            :class="{
              wrong: item.testResult !== 1,
            }"
          >
            <div class="spell">
              <span class="text">{{ item.spell }}</span>
            </div>
            <abbr-img class="abbr" :abbr="item.typeAbbr" />
            <div class="cn">
              {{ item.znDesc }}
            </div>
            <span v-if="item.questionType === 3" class="type">拼写</span>
          </div>
        </div>
      </div>
      <mj-button type="warn" width="240" height="70" size="32" @click="ok">我知道了</mj-button>
    </board-bg>
  </el-dialog>
</template>
<style lang="scss">
.word-test-report {
  box-sizing: border-box;
  line-height: 1.5;

  .rating {
    .number-card-text {
      font-size: 5vh;
      top: -0.5vh;
    }
  }

  .word-list {
    margin-top: 2vh;
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 三列等宽 */
    column-gap: 20px;
    row-gap: 2vh;
    padding-bottom: 6vh;

    .word {
      height: 11.7vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 0.33vh solid black;
      border-radius: 1vh;
      gap: 1vh;
      color: #4b4b68;
      position: relative;
      overflow: hidden;
      border-color: #42c20b;
      background-color: #c9fcab;

      &.wrong {
        border-color: #cc1818;
        background-color: #fcc0c0;
      }

      .type {
        position: absolute;
        left: 0;
        top: 0;
        background-color: #eff;
        padding: 5px 10px;
        border-bottom-right-radius: 1vh;
      }

      .spell {
        display: flex;
        align-items: center;
        font-size: 1.8vh;
      }

      .abbr {
        .img-Speech {
          width: auto;
          height: 2vh;
        }
      }

      .cn {
        text-align: center;
        font-size: 1.5vh;
      }
    }
  }

  &.el-dialog {
    box-shadow: none;
    background-color: transparent;
    padding: 0;
    border: none;
    width: 1600px;
    height: 92.5vh;
  }
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    .report_dia_main {
      width: 100%;
      height: 100%;
      padding: 6vh 56px 4.67vh;
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
      // @include hidden_scroll;
      // overflow: hidden;
      .hidden_scroll {
        height: 100%;
        border-radius: 1.67vh;
      }
      .mj-button {
        position: absolute;
        bottom: 3vh;
        left: 50%;
        transform: translate(-50%);
      }
    }
    .report_dia_title {
      color: #fff;
      text-align: center;
      font-family: $font-special;
      font-size: 4vh;
      font-style: normal;
      font-weight: 400;
      line-height: 6vh; /* 150% */
      letter-spacing: 20px;
      @include font-stroke(#2d39bc, 6px);
    }
    .reward-list {
      margin-top: 2vh;
      display: flex;
      align-items: center;
      justify-content: center;
      &-item {
        display: flex;
        align-items: center;
        margin: 0 40px;
        color: $font-color;
        font-family: $font-special;
        font-size: 2.67vh;
        .x-icon {
          margin-right: 16px;
        }
      }
    }
    .card-box {
      background-color: #f5feff;
      padding: 2vh;
      border-radius: 1.67vh;
      margin-bottom: 3.33vh;
      .card-list {
        display: flex;
        gap: 30px;
      }

      &-rate {
        width: 460px;
        height: 13.83vh;
      }
      .number-card {
        flex: 1;
        height: 13.83vh;
      }
    }
  }
}
</style>
