<script setup lang="ts">
import { useAudio } from '@/hooks'
interface cardType {
  word: string
  sound: string
  explain: string
  audio_br: string
}
const props = withDefaults(
  defineProps<{
    wordData: cardType
    modelValue: string
    num: string
  }>(),
  {
    num: '',
    modelValue: '',
    wordData: () => ({
      word: '',
      sound: '',
      explain: '',
      audio_br: '',
    }),
  },
)

const emit = defineEmits(['update:modelValue'])

const OSS_URL = `${import.meta.env.VITE_OSS_URL}`
function handlePlaySound() {
  if (props.modelValue && props.modelValue === props.num) return
  emit('update:modelValue', props.num)
  useAudio({
    url: props.wordData.audio_br,
    autoplay: true,
    onEnded: () => {
      emit('update:modelValue', '')
    },
  })
}
</script>
<template>
  <div class="yinbiao-card" @click="handlePlaySound()">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="261"
      height="75"
      viewBox="0 0 261 75"
      fill="none"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M260.485 0.242188C256.046 5.75336 250.989 10.7917 245.34 15.2576C213.466 40.3214 170.697 41.9264 125.636 19.5199C97.1719 60.1119 58.4658 79.8111 18.4849 73.0538C12.3695 72.004 6.43679 70.3706 0.730469 68.2019V0.242188H260.485Z"
        fill="#9EFCF8"
      />
    </svg>
    <div class="word">
      <LineFont :text="wordData.word.replace(/<\/?b>/g, '')" size="48"></LineFont>
      <!-- <LineFont text="intergenerational" size="40"></LineFont> -->
      <span class="top-text" v-html="wordData.word"> </span>
      <span class="top-text-stroke" v-html="wordData.word"> </span>
    </div>
    <div class="sound">
      /{{ wordData.sound }}/

      <div v-if="wordData.audio_br" class="sund-horn">
        <Horn v-if="modelValue === num" active width="40" class="horn"></Horn>
        <Icon v-else name="playSound" size="48"></Icon>
      </div>
    </div>
    <div class="zn">
      {{ wordData.explain }}
    </div>
  </div>
</template>
<style lang="scss" scoped>
.yinbiao-card {
  width: 418px;
  height: 16.83vh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 0.33vh solid #90fcf7;
  border-radius: 1.67vh;
  background-color: #f2fffe;
  margin: 0 24px 2vh 0;
  position: relative;
  z-index: 3;
  overflow: hidden;
  cursor: pointer;

  box-shadow: 0 0.33vh 0.33vh rgba(0, 0, 0, 0.25);

  &:nth-child(4n) {
    margin-right: 0;
  }
  svg {
    height: 5.83vh;
    width: 300px;
    position: absolute;
    z-index: -1;
    left: -70px;
    top: 0;
  }
  .word {
    position: relative;
    span {
      &::after {
        top: -0.33vh;
      }
    }
    // color: red;
    :deep(.top-text) {
      position: absolute;
      left: 0px;
      top: 0.42vh;
      font-size: 4vh;
      font-family: $font-special;
      color: transparent;
      text-align: center;
      z-index: 1;
      b {
        color: #ffe850;
        position: relative;
        z-index: 0;
      }
    }
    :deep(.top-text-stroke) {
      position: absolute;
      left: 0px;
      top: 0.42vh;
      z-index: -1;
      font-size: 4vh;
      font-family: $font-special;

      b {
        -webkit-text-stroke: 8px $font-color;
      }
    }
  }

  .sound {
    margin: 0.33vh 0 0.67vh;
    color: #888;
    font-family: 'PingFang SC';
    font-style: normal;
    line-height: 3.5vh; /* 233.333% */
    font-size: 3vh;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.67vh;
    .sund-horn {
      height: 4vh;
      width: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 8px;
      cursor: pointer;

      .horn {
        margin-left: 6px;
      }
    }
  }
  .zn {
    color: #666;
    text-align: center;
    font-family: $font-special;
    font-size: 2.83vh;
    font-style: normal;
    font-weight: 400;
    line-height: 3.5vh; /* 140% */
  }
}
</style>
