<template>
  <div v-show="props.status" class="mask">
    <div class="wrapper">
      <div class="title">
        <span>一</span>
        <span>词</span>
        <span>多</span>
        <span>义</span>
      </div>
      <div class="close-btn pointer" @click="close">
        <img class="full-w-h" :src="btn_close" />
      </div>
      <div class="words">{{ props.word.spell }}</div>
      <div class="table__container">
        <table>
          <tbody>
            <tr v-for="item in props.appearWordList" :key="item.wordId">
              <td class="paraphrase">
                <AbbrImg :abbr="item.typeAbbr" gap="8"></AbbrImg>
                <span>{{ item.znDesc }}</span>
              </td>
              <td class="illustration">
                <img class="aspectFit" :src="item.wordImg" />
              </td>
              <td class="level">
                <div>{{ item.stageName }}</div>
                <div>第{{ item.levelNum }}关</div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { Statistics, AppearWord } from '../interface/index'

const props = defineProps<{
  status: boolean
  word: Statistics
  appearWordList: Array<AppearWord> | null
}>()
const emits = defineEmits(['close'])
const OSS_URL = import.meta.env.VITE_OSS_URL
const btn_close = `${OSS_URL}/xuexiaole_clinet/normalMode/btn_close.png`
function close() {
  emits('close', false)
}
</script>
<style scoped lang="scss">
* {
  box-sizing: border-box;
  user-select: none;
}

$bgColor: #fffef5;
$bdColor: #d9d163;
$tableBdColor: #ccc018;
$tableBd: 2px solid $tableBdColor;

.mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1999;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper {
  position: relative;
  width: 1125px;
  padding: 2.67vh;
  border-radius: 3.33vh;
  background-color: $bgColor;
  .title {
    display: flex;
    align-items: center;
    position: absolute;
    left: 32px;
    top: -3.33vh;
    text {
      display: inline-block;
      width: 80px;
      height: 6.67vh;
      border-radius: 50%;
      background-color: $bgColor;
      display: flex;
      align-items: center;
      justify-content: center;

      font-family: $font-special;
      font-size: 3.5vh;
      color: #736d20;
      border: 0.33vh solid $bdColor;
    }
  }
  .words {
    margin: 3.33vh 0 2.67vh;
    text-align: center;
    font-family: $font-special;
    font-size: 4vh;
    line-height: 1;
  }
  .table__container {
    width: 100%;
    border: 0.33vh solid #ccc018;
    border-radius: 1.67vh;
    overflow: hidden;
    table {
      width: 100%;
      table-layout: fixed;
      overflow-y: auto;
      overflow-x: hidden;
      tr {
        &:last-child td {
          border-bottom: none;
        }
      }
      td {
        border-right: $tableBd;
        border-bottom: $tableBd;
        &:last-child {
          border-right: none;
        }
      }

      .paraphrase {
        text-align: center;
        color: #6a3906;
        font-family: $font-special;
        font-size: 2.67vh;
        text {
          vertical-align: middle;
        }
      }
      .illustration {
        width: 209px;
        height: 10.17vh;
        font-size: 0;
        img {
          width: 100%;
          max-height: 100%;
          object-fit: contain;
        }
      }
      .level {
        color: #736d20;
        text-align: center;
        font-family: $font-special;
        font-size: 2.33vh;
      }
    }
  }

  .close-btn {
    width: 48px;
    height: 4vh;
    position: absolute;
    top: -1.5vh;
    right: -12px;
  }
}
</style>
