<template>
  <div class="tabel__container">
    <table class="left__table">
      <thead>
        <tr class="stripe">
          <th>
            <div class="th">单词</div>
          </th>
          <th>
            <div class="th">图片</div>
          </th>
          <th>
            <div class="th">道具</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.wordId">
          <td>
            <div class="word">
              <div v-if="!item.appearWordList && isShowAllLottieRef" class="word__zw"></div>
              <img
                v-if="item.appearWordList && item.appearWordList.length > 0"
                class="word__review"
                :src="img_review"
                @click="handleReview(item, item.appearWordList)"
              />
              <div class="word__zw__spell">
                <text @click="viewDetail(item)">{{ item.spell }}</text>
                <div class="znDesc">
                  <AbbrImg height="50" :abbr="item.typeAbbr" gap="5"></AbbrImg>
                  <text @click="viewDetail(item)">{{ item.znDesc }}</text>
                </div>
              </div>
            </div>
          </td>
          <td>
            <div class="wordImg">
              <img mode="aspectFit" :src="item.wordImg ? item.wordImg : getImage(item.wordId)" />
            </div>
          </td>
          <td>
            <div class="game-props__list left">
              <div v-if="item.glass > 0" class="game-props__item">
                <div class="game-props__item__icon">
                  <img :src="res_glass" />
                </div>
                <div class="game-props__item__num">
                  <text class="symbol">x</text>{{ item.glass }}
                </div>
              </div>
              <div v-if="item.bomb > 0" class="game-props__item">
                <div class="game-props__item__icon">
                  <img :src="res_bomb" />
                </div>
                <div class="game-props__item__num">
                  <text class="symbol">x</text>{{ item.bomb }}
                </div>
              </div>
              <div v-if="item.surrender > 0" class="game-props__item">
                <div class="game-props__item__icon">
                  <img :src="res_flag" />
                </div>
                <div class="game-props__item__num">
                  <text class="symbol">x</text>{{ item.surrender }}
                </div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="right__table__container">
      <table class="right__table">
        <tbody>
          <tr>
            <td class="data__name">百发百中</td>
            <td class="data__item">{{ props.allRightCount }}个</td>
          </tr>
          <tr>
            <td class="data__name">正确率</td>
            <td class="data__item">{{ props.rightRate }}%</td>
          </tr>
          <tr>
            <td class="data__name">奖励</td>
            <td class="data__item exp_text">
              <div class="left">
                <img class="icon_exp" :src="icon_exp" />
                <div class="exp_value">
                  <div style="transform: translate(0, -2px); margin-right: 2px">+</div>
                  <div>{{ props.exp || 0 }}</div>
                </div>
              </div>
              <div class="right">
                <img class="icon_exp" :src="`${OSS_URL}/icon/diamond_new.svg`" />
                <div class="exp_value">
                  <div style="transform: translate(0, -2px); margin-right: 2px">+</div>
                  <div>{{ props.diamond || 0 }}</div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="data__name">耗时</td>
            <td class="data__item">{{ props.timeStr }}</td>
          </tr>
          <tr>
            <td class="data__name">使用道具</td>
            <td>
              <div class="game-props__list">
                <div class="game-props__item">
                  <div class="game-props__item__icon">
                    <img :src="res_glass" />
                  </div>
                  <div class="game-props__item__num">
                    <text class="symbol">x</text>{{ props.glassCount }}
                  </div>
                </div>
                <div class="game-props__item">
                  <div class="game-props__item__icon">
                    <img :src="res_bomb" />
                  </div>
                  <div class="game-props__item__num">
                    <text class="symbol">x</text>{{ props.bombCount }}
                  </div>
                </div>
                <div class="game-props__item">
                  <div class="game-props__item__icon">
                    <img :src="res_flag" />
                  </div>
                  <div class="game-props__item__num">
                    <text class="symbol">x</text>{{ props.surrenderCount }}
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <SemanticReview v-bind="semanticPop.data" @close="semanticPop.close()" />
</template>
<script setup lang="ts">
import { reactive, ref, watch, inject } from 'vue'
import type { Ref } from 'vue'
// import lottie from 'lottie-web';
import SemanticReview from '../../normalMode/components/SemanticReview.vue'
import type { Statistics } from '../interface/index'
import type { AppearWord } from '../../normalMode/interface'
// import PartOfSeech from '@/components/PartOfSpeech/PartOfSpeech.vue';

const props = defineProps<{
  timeStr: string
  bombCount: number
  glassCount: number
  surrenderCount: number
  allRightCount: number
  rightRate: number
  exp: number
  diamond: number
  list: Array<Statistics>
}>()

const emit = defineEmits(['viewDetail'])
const OSS_URL = import.meta.env.VITE_OSS_URL
const res_glass = `${OSS_URL}/xuexiaole_clinet/normalMode/res_glass.png`
const res_bomb = `${OSS_URL}/xuexiaole_clinet/normalMode/res_bomb.png`
const res_flag = `${OSS_URL}/xuexiaole_clinet/normalMode/res_flag.png`
const img_review = `${OSS_URL}/xuexiaole_clinet/normalMode/review.png`
const icon_exp = `${OSS_URL}/xuexiaole_clinet/normalMode/icon_exp.png`

const lottieRef = ref()
const isShowAllLottieRef = ref(false)
const pictureList = inject('pictureList') as Ref<any[]>

/* 词义回顾弹窗 */
const semanticPop = {
  data: reactive({
    status: false,
    word: {} as Statistics,
    appearWordList: [] as Array<AppearWord>,
  }),
  open(word: Statistics, list: Array<AppearWord>) {
    this.data.status = true
    this.data.word = word
    this.data.appearWordList = list
  },
  close() {
    this.data.status = false
  },
}

const handleReview = (word: Statistics, appearWordList: Array<AppearWord>) => {
  semanticPop.data.status = true
  semanticPop.data.word = word
  semanticPop.data.appearWordList = appearWordList
}

function getImage(id: any) {
  return pictureList.value.filter(item => item.id === id)[0].img
}

// 去单词详情页面
const viewDetail = (val: Statistics) => {
  emit('viewDetail', val.wordId, val.spell)
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

$bdColor: #d9d163;
$border: 1px solid $bdColor;

.tabel__container {
  width: 100%;
  display: flex;
}

.left__table {
  width: 797px;
  height: 45vh;
  table-layout: fixed;

  .stripe {
    border-radius: 0.83vh;
    background-color: #fffcd6;
  }

  thead {
    border-radius: 0.83vh;
  }

  thead th {
    height: 4.17vh;
    padding: 0.67vh 0 0.83vh 32px;
    background-color: #fffaad;
    color: var(--grey-2, rgba(0, 0, 0, 0.75));
    font-size: 2vh;
    text-align: left;

    &:nth-child(2) {
      width: 192px;
    }

    &:nth-child(3) {
      width: 199px;
    }
  }

  td,
  th {
    &:first-child {
      border-radius: 0.83vh 0 0 0.83vh;
    }

    &:last-child {
      border-radius: 0 0.83vh 0.83vh 0;
    }
  }

  td {
    &:first-child {
      padding: 0 0 0 24px;
    }
    &:not(:first-child) {
      padding: 0 0 0 32px;
    }
  }

  tbody {
    font-size: 2.67vh;
    font-weight: 500;

    tr {
      height: 9.83vh;
    }

    .word {
      display: flex;
      align-items: center;
      color: var(--grey-2, rgba(0, 0, 0, 0.75));
      font-family: Arial;

      &__zw {
        &__spell {
          flex: 1;
          color: rgba(0, 0, 0, 0.75);
          font-family: Arial;
          font-size: 3.33vh;
          font-weight: 700;
          .znDesc {
            display: flex;
            align-items: center;
            font-size: 0;
            text {
              max-width: 272px;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
              white-space: nowrap;
              font-family: $font-text;
              font-size: 2.33vh;
              font-style: normal;
              font-weight: 400;
            }
          }
          text {
            cursor: pointer;
          }
        }
      }

      &__review {
        width: 4.58vh;
        height: 4.17vh;
        margin-right: 2px;
        cursor: pointer;
        flex-shrink: 0;
      }

      &__zw {
        width: 4vh;
        height: 4vh;
        margin-right: 2px;
      }
    }

    .wordImg {
      // width: 160px;
      height: 9.83vh;
      font-size: 0;
      img {
        width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }

    tr:nth-child(2n) {
      background-color: #fffcd6;
    }
  }
}

.game-props__list {
  display: flex;
  align-items: center;

  &.left {
    align-items: self-start;
    flex-direction: column;
    .game-props__item {
      .game-props__item__icon {
        width: 3.33vh;
        height: 3.33vh;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .game-props__item__num {
        font-size: 2vh;
      }
    }
  }

  .game-props__item {
    display: flex;
    align-items: center;

    .game-props__item__icon {
      width: 3.33vh;
      height: 3.33vh;
      flex-shrink: 0;
      font-size: 0;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .game-props__item__num {
      color: #736d20;
      font-size: 2.33vh;
      font-weight: 500;
    }
  }
}

.right__table__container {
  flex: 1;
  height: 100%;
  margin-left: 32px;
  padding: 4.42vh 32px;
  padding-right: 0;
  border-radius: 1.33vh;
  border: 0.17vh dashed var(--1, #fff01f);
  background: var(--unnamed, #fffef5);

  .right__table {
    width: 100%;
    table-layout: fixed;
    tr {
      height: 5.33vh;
    }

    .data__name {
      width: 150px;
      color: var(--unnamed, #736d20);
      font-size: 2.33vh;
      padding-right: 32px;
    }

    .data__item {
      color: var(--grey-2, rgba(0, 0, 0, 0.75));
      font-size: 2.67vh;
      font-weight: 500;
    }

    .exp_text {
      .icon_exp {
        width: 4vh;
        height: 4vh;
        vertical-align: middle;
      }
      .left,
      .right {
        vertical-align: middle;
        display: inline-flex;
        align-items: center;
      }
      .right {
        margin-left: 20px;
      }

      .exp_value {
        color: rgba(0, 0, 0, 0.75);
        font-size: 2.67vh;
        font-weight: 500;
        vertical-align: middle;
        display: inline-flex;
        align-items: center;
      }
    }
    .game-props__item {
      & + .game-props__item {
        margin-left: 24px;
      }
    }
  }
}
</style>
