<script setup lang="ts">
import globalApi from '@/api/global'
import { useAudio } from '@/hooks'

const props = withDefaults(
  defineProps<{
    isEnd: boolean
    wordData: anyObj
    onResult: boolean
  }>(),
  {
    isEnd: false,
    onResult: false,
    wordData: () => ({ meaningList: [] }),
  },
)
const emits = defineEmits(['changeWord', 'click'])
const OSS_URL = `${import.meta.env.VITE_OSS_URL}`
// const bg = `url(${OSS_URL}/urm/announcement_main_bg.svg) 100%/cover no-repeat`;
const playSound = ref(false)
const timer = ref<null | number>(null)

function handlePlsySound() {
  if (!props.onResult && (playSound.value || !props.wordData.accent || props.isEnd)) return
  playSound.value = true
  useAudio({
    url: props.wordData.accent,
    onEnded: res => {
      playSound.value = false
    },
  })
}
const changeMode = (value: any) => {
  if (timer.value) return
  timer.value = setTimeout(() => {
    globalApi
      .changeWordType({
        id: props.wordData.wordId,
        source: 3,
        strangeFlag: props.wordData.strangeFlag ? 0 : 1,
      })
      .then((res: any) => {
        if (res.data.code === 200) {
          emits('changeWord')
          clearTimeout(timer.value as number)
          timer.value = null
        }
      })
  }, 500) as any
}
</script>
<template>
  <div class="word-card hidden_scroll">
    <div class="word_gist">
      <div class="word_translate_box">
        <div class="spell">
          <div class="spell-content">
            {{ wordData.spell }}
          </div>
        </div>
        <div class="playSound" @click="handlePlsySound">
          <!-- <Icon name="laba" size="64"></Icon> -->
          <Horn :active="playSound" width="40" class="play_icon"></Horn>
        </div>
        <div class="nav_box">
          <div class="nav_tabs">
            <img
              :src="`${OSS_URL}/icon/${wordData.strangeFlag ? 'shengciben_active' : 'shengciben'}.svg`"
              alt=""
              @click="changeMode(0)"
            />
          </div>
        </div>
      </div>

      <div class="origin_box">
        <div v-for="(voc, idx2) in wordData.vocabularyWordList || []" :key="idx2" class="origin">
          {{ voc.tagName }}
        </div>
      </div>
      <div class="type_box">
        <div v-for="(item, idx1) in wordData.meaningList || []" :key="idx1" class="type">
          <AbbrImg height="30" :abbr="item.typeAbbr" class="img"></AbbrImg>
          <div class="desc-list">
            <span v-for="(item2, o) in item.descList" :key="o" :class="['desc']">
              <span v-if="item.descList.length > 1" class="desc_sort">{{ o + 1 }}</span>
              <span
                :class="{
                  desc_znDesc: true,
                  isActive: item2.meaningId === wordData.meaningId,
                }"
                >{{ item2.znDesc }}</span
              >
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
//
.word-card {
  height: 60.83vh;
  padding-right: 30px;
  overflow-y: scroll;
  .word_gist {
    padding: 5.33vh 0 4vh 0;
    .word_translate_box {
      display: flex;
      align-items: center;
      margin-bottom: 3.33vh;

      .spell {
        // width: 214px;
        height: 8.33vh;
        font-family: Arial;
        font-size: 5.33vh;
        font-weight: 500;
        // background-image: url('@/static/unity/line.png');
        // background-size: auto 100px;
        border: 0.33vh solid #fff01f;
        border-right: none;
        border-left: none;
        text-align: center;
        line-height: 8.33vh;
        padding: 0 32px;
        position: relative;
        .spell-content {
          position: relative;
          z-index: 2;
        }
        &::before {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          content: '';
          height: 3.67vh;
          width: 100%;
          border: 0.25vh dashed #fff01f;
          border-right: none;
          border-left: none;
        }
      }
      .playSound {
        cursor: pointer;
        margin: 0 16px 0 24px;
      }

      .nav_tabs {
        img {
          pointer-events: auto;
          cursor: pointer;
          width: 5.33vh;
          height: 5.33vh;
        }
      }
    }

    .origin_box {
      display: flex;
      flex-wrap: wrap;
      gap: 1vh;

      .origin {
        width: 11.33vh;
        height: 3.17vh;
        background-color: #fffaad;
        padding: 0.33vh 24px 0.33vh 24px;
        border-radius: 0.83vh;
        color: #000;
        font-family: Arial;
        font-size: 1.67vh;
        font-style: normal;
        font-weight: 400;
        line-height: 2.5vh; /* 150% */
        text-align: center;
      }
    }

    .type_box {
      padding-top: 2vh;
      display: flex;
      flex-direction: column;
      row-gap: 1vh;

      .type {
        font-family: $font-text;
        font-size: 2.67vh;
        font-weight: 400;
        display: flex;
        margin: 2vh 0 2vh 0;

        &:nth-of-type(1) {
          margin-top: 2.67vh;
        }

        .img {
          width: auto;
          height: 4.17vh;
          margin-right: 4px;
        }
        .desc-list {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 1vh;

          .desc {
            line-height: 4vh;
            margin-right: 16px;
            display: flex;
            align-items: center;

            // &.desc-bold {
            //     font-weight: bold;
            // }
            .desc_sort {
              width: 2.5vh;
              height: 2.5vh;
              margin-right: 6px;
              line-height: 2.5vh;
              text-align: center;
              font-size: 1.67vh;
              border: 0.08vh solid #4ecc4b;
              border-radius: 50%;
              color: #4ecc4b;
            }
            .isActive {
              color: #8409d6;
              text-decoration-line: underline;
              text-decoration-style: wavy;
              text-underline-offset: 8px;
            }
          }
        }
      }
    }
  }
}
</style>
