<template>
  <div class="tabel__container">
    <table class="myTable">
      <thead>
        <tr>
          <th>
            <div class="th"></div>
          </th>
          <th>
            <div class="th"></div>
          </th>
          <th v-for="(item, index) in round" :key="'r' + index">
            <div class="th">第{{ chineseNumberals[index] }}轮</div>
          </th>
        </tr>
      </thead>
      <tbody v-if="props.list.length > 0" ref="tableBody" class="tbd">
        <tr v-for="item in props.list" :key="item.wordId">
          <td>
            <div class="flex full-w-h">
              <img
                v-if="item.appearWordList && item.appearWordList.length > 0"
                class="review__btn"
                :src="img_review"
                @click="semanticPop.open(item, item.appearWordList)"
              />
              <div class="word__detail">
                <div class="word">
                  <span @click="viewDetail(item)">{{ item.spell }}</span>
                </div>
                <div class="chinese">
                  <AbbrImg :abbr="item.typeAbbr" gap="8"></AbbrImg>

                  <span>{{ item.znDesc }}</span>
                </div>
              </div>
            </div>
          </td>
          <td class="wordImg">
            <img mode="aspectFit" :src="item.wordImg" />
          </td>
          <td
            v-for="(resultItem, index) in item.resultStr.split(',')"
            :key="item.wordId + resultItem + index"
          >
            <template v-if="resultItem === '1'">
              <img class="result__img" :src="img_tick" />
            </template>
            <template v-else>
              <img class="result__img" :src="img_cross" />
            </template>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <SemanticReview v-bind="semanticPop.data" @close="semanticPop.close()"></SemanticReview>
</template>
<script setup lang="ts">
import type { Statistics, AppearWord } from '../interface/index'
import SemanticReview from './SemanticReview.vue'
const props = defineProps<{
  list: Array<Statistics>
  style?: anyObj
}>()

const emit = defineEmits(['viewDetail'])
const OSS_URL = import.meta.env.VITE_OSS_URL
const img_tick = `${OSS_URL}/xuexiaole_clinet/normalMode/tick.png`
const img_cross = `${OSS_URL}/xuexiaole_clinet/normalMode/cross.png`
const img_review = `${OSS_URL}/xuexiaole_clinet/normalMode/review.png`

const round = computed(() => props.list[0]?.resultStr?.split(',')?.length || 4)

const chineseNumberals = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
const tableBody = ref()

/* 词义回顾弹窗 */
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 viewDetail = (val: Statistics) => {
  // uni.navigateTo({
  //     url: '/pages/strangeBook/strangeBook',
  //     success: res => {
  //         // 通过eventChannel向被打开页面传送数据
  //         res.eventChannel.emit('acceptDataFromOpenerPage', { isOpenPop: true, word: item });
  //     },
  // });
  emit('viewDetail', val.wordId, val.spell)
}

watch(
  () => props.list,
  () => {
    if (tableBody.value) {
      nextTick(() => {
        tableBody.value.scrollTop = 0
      })
    }
  },
)
</script>

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

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

.tabel__container {
  flex: 1;
  width: 100%;
}
.myTable {
  table-layout: fixed;
  width: 100%;
  height: 100%;
  background: var(--1, #fffef2);
  border: $border;
  border-radius: 2.5vh;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;

  color: var(--grey-2, rgba(0, 0, 0, 0.75));
  font-family: $font-special;
  font-size: 2.33vh;

  th {
    height: 6.33vh;
    :first-child {
      border-radius: 2.5vh 0 0 0;
    }

    &:first-child {
      box-sizing: border-box !important;
      border-top-left-radius: 30px;
      width: 501px;
    }
    &:last-child {
      border-top-right-radius: 30px;
    }
    &:nth-child(2) {
      width: 209px;
    }
    border-left: $border;
    border-right: $border;
    border-top: $border;
  }
  td {
    border: $border;
    text-align: center;
    &:nth-child(1) {
      width: 501px;
    }
  }
  tr {
    &:last-child {
      td {
        &:first-child {
          border-bottom-left-radius: 30px;
        }
        &:last-child {
          border-bottom-right-radius: 30px;
        }
      }
    }
  }
  .flex {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .review__btn {
    // margin: 0 8px 0 16px;
    width: 55px;
    height: 4.17vh;
    cursor: pointer;
    flex-shrink: 0;
  }
  .word__detail {
    .word {
      font-size: 3.33vh;

      span {
        cursor: pointer;
      }
    }
    .chinese text {
      vertical-align: middle;
    }
  }
  .wordImg {
    width: 209px;
    height: 10.17vh;
    font-size: 0;
    img {
      width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  }
  .result__img {
    width: 5.33vh;
    height: 5.33vh;
  }
}
.tbd {
  display: block;
  text-align: center;
  max-height: 46vh;
  // max-height: 492px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /*滚动更流畅*/
}

table thead,
.tbd tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

table {
  // border-collapse: separate !important;
  // border-spacing: 0 !important;
}

/* 滚动条样式 */
table tbody::-webkit-scrollbar {
  width: 0;
}
table tbody::-webkit-scrollbar-thumb {
  background-color: #d9d163;
  // border-radius: 5px;
}
table tbody::-webkit-scrollbar-track {
  // background-color: #004453;
}
table tbody::-webkit-scrollbar-thumb:hover {
  // background-color: rgb(17, 177, 174);
}
table tbody::-webkit-scrollbar-thumb:active {
  // background-color: rgb(9, 136, 134);
}
</style>
