<template>
  <div v-if="props.modelValue" class="mask">
    <div class="g-container">
      <div class="close-btn pointer" @click="close">
        <img class="full-w-h" :src="btn_close" />
      </div>
      <div class="title">
        <div
          v-for="item in titleList"
          :key="item.index"
          :class="[isActive === item.index ? 'active' : '', 'title-content']"
          @click="changeNav(item.index)"
        >
          <div class="middle">
            <div class="center">
              {{ item.value }}
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="left">
          <div v-show="isActive === 1" class="word">
            <div class="en-desc">
              {{ wordData.spell }}
              <div
                v-if="introduceImg && introduceImg.length > 0"
                class="today-hot-trumpet"
                @click="playAccent"
              >
                <!-- <ShowLottie
                                    name="sound_play"
                                    autoplay
                                    :isPlay="isPlay"
                                    width="100%"
                                    height="100%"
                                /> -->
                <Horn width="56" :active="isPlay"></Horn>
              </div>
            </div>
            <div class="cn-desc">
              <div class="cn-desc-img">
                <AbbrImg :abbr="wordData.typeAbbr" gap="8"></AbbrImg>
              </div>
              {{ wordData.znDesc }}
            </div>
            <Swiper v-if="introduceImg" :swiperList="introduceImg"></Swiper>
            <div v-if="!introduceImg && wordData.spell" class="bottom_horn" @click="playAccent">
              <!-- <ShowLottie
                                name="sound_play"
                                autoplay
                                :isPlay="isPlay"
                                width="100%"
                                height="100%"
                            /> -->
              <Horn width="56" :active="isPlay"></Horn>
            </div>
          </div>
          <div
            v-if="isActive === 2 && (!wordData.sentenceList || wordData.sentenceList.length === 0)"
            class="empty"
          >
            <img :src="empty_gril" />
            <div>暂无例句</div>
          </div>
          <div v-else-if="isActive === 2 && wordData.sentenceList">
            <div
              v-for="(item, index) in wordData.sentenceList"
              v-show="sentenceIndex === index && isActive === 2"
              :key="index"
              class="sensetence"
            >
              <Swiper v-if="item.image" :swiperList="item.image"></Swiper>
              <div class="en-desc">
                <!-- {{ wordObj?.spell }} -->
                <div class="en_desc_content" style="max-width: 90%">
                  {{ item.content }}
                  <!-- <text
                                        v-for="(v, index) in item.content.split(' ')"
                                        :key="index"
                                        class="en_desc_item"
                                    >
                                        {{ v + ' ' }}
                                    </text> -->
                </div>
                <div
                  v-if="item.brFile && item.image && item.image.length > 0"
                  class="today-hot-trumpet"
                  @click="playAccent"
                >
                  <!-- <ShowLottie
                                        name="sound_play"
                                        autoplay
                                        :isPlay="isPlay"
                                        width="100%"
                                        height="100%"
                                    /> -->
                  <Horn width="56" :active="isPlay"></Horn>
                </div>
              </div>
              <div class="cn-desc">{{ item.znDesc }}</div>
              <div v-if="!item.image && item.brFile" class="bottom_horn" @click="playAccent">
                <!-- <ShowLottie
                                    name="sound_play"
                                    autoplay
                                    :isPlay="isPlay"
                                    width="100%"
                                    height="100%"
                                /> -->
                <Horn width="56" :active="isPlay"></Horn>
              </div>
            </div>
          </div>
          <div v-else-if="isActive === 3 && wordData.memoryTips">
            <div class="tips">
              <div v-for="tip in wordData.memoryTips" :key="tip.method" class="tip">
                <div class="tip-title">{{ tip.method }}</div>
                <div class="tip-content" v-html="tip.details"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="right">
          <div class="topic">
            <text v-if="wordData.stageName"
              >关卡：{{ wordData.stageName }}-第{{ wordData.levelNum }}关</text
            >
            <text v-else> 暂未加入关卡 </text>
          </div>
          <div class="answer">
            <div class="answer-item">
              <img :src="accuracy" />
              <div class="text">
                [选择]正确
                <text class="number">{{ wordData.successCount ?? '0' }}</text
                >次
              </div>
            </div>
            <div class="answer-item">
              <img :src="err_rate" />

              <div class="text">
                [选择]错误 <text class="number">{{ wordData.faultCount ?? '0' }}</text
                >次
              </div>
            </div>
            <div class="answer-item">
              <img :src="accuracy" />
              <div class="text">
                [拼写]正确
                <text class="number">{{ wordData.spellSuccess ?? '0' }}</text
                >次
              </div>
            </div>
            <div class="answer-item">
              <img :src="err_rate" />
              <div class="text">
                [拼写]错误
                <text class="number">{{ wordData.spellFault ?? '0' }}</text
                >次
              </div>
            </div>
            <div class="answer-item">
              <img :src="accuracy" />
              <div class="text">
                [复习]成功
                <text class="number">{{ wordData.reviewSuccessful ?? '0' }}</text
                >次
              </div>
            </div>
            <div class="answer-item">
              <img :src="err_rate" />

              <div class="text">
                [复习]失败 <text class="number">{{ wordData.reviewFailed ?? '0' }}</text
                >次
              </div>
            </div>
          </div>
          <!-- <div class="prop">
            <div class="name">道具使用</div>
            <div class="number">
              <img :src="res_glass" />
              <img :src="res_bomb" />
              <img :src="res_flag" />
              <div>
                x<text class="number-text">{{ wordData.glassCount ?? '0' }}</text>
              </div>
              <div>
                x<text class="number-text">{{ wordData.bombCount ?? '0' }}</text>
              </div>
              <div>
                x<text class="number-text">{{ wordData.surrenderCount ?? '0' }}</text>
              </div>
            </div>
          </div> -->
          <div
            v-if="isActive === 2 && wordData.sentenceList.length > 1"
            class="slice_box left_arrow"
          >
            <img :src="Left_Arrow" mode="" @click="changeDate(-1)" />
          </div>
          <div
            v-if="isActive === 2 && wordData.sentenceList.length > 1"
            class="slice_box right_arrow"
          >
            <img :src="Right_Arrow" mode="" @click="changeDate(1)" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import hud from '@/utils/hud'
import type { sentenceListType, wordDataType } from '../interface/index'
import Swiper from './swiper.vue'
import { useAudio } from '@/hooks'
import wordTableApi from '@/api/subject/wordTable'

const props = defineProps<{
  modelValue: boolean
  pupData: anyObj
}>()
const emits = defineEmits(['update:modelValue'])

watch(
  () => props.modelValue,
  nav => {
    if (nav) getData()
  },
)
const OSS_URL = import.meta.env.VITE_OSS_URL
const btn_close = `${OSS_URL}/xuexiaole_clinet/normalMode/btn_close.png`
const empty_gril = `${OSS_URL}/xuexiaole_clinet/normalMode/empty_gril.png`
const Right_Arrow = `${OSS_URL}/xuexiaole_clinet/normalMode/Right_Arrow.png`
const Left_Arrow = `${OSS_URL}/xuexiaole_clinet/normalMode/Left_Arrow.png`
const err_rate = `${OSS_URL}/xuexiaole_clinet/normalMode/err_rate.png`
const accuracy = `${OSS_URL}/xuexiaole_clinet/normalMode/accuracy.png`

// const audio = useAudio();
const titleList = ref([] as any)
const isActive = ref(1)
const isPlay = ref(false) // 播放
const audioData = ref<anyObj>({
  brAccents: '',
  usAccents: '',
}) // 音频
const introduceImg = ref<string | null>('') // 简介图片
const sentenceIndex = ref<number>(0)
const wordData = ref<wordDataType>({
  spell: '',
  znDesc: '',
  bombCount: 0,
  faultCount: 0,
  reviewSuccessful: 0,
  reviewFailed: 0,
  glassCount: 0,
  successCount: 0,
  surrenderCount: 0,
  spellSuccess: 0,
  spellFault: 0,
  typeAbbr: '',
  levelNum: 0,
  stageName: '',
  brAccents: '',
  usAccents: '',
  sentenceList: [],
  memoryTips: '',
})

function getData() {
  hud.loading('正在加载中')
  wordTableApi
    .getWordCardDetail({
      levelId: props.pupData.levelId,
      meaningId: props.pupData.meaningId,
      wordId: props.pupData.wordId,
    })
    .then(res => {
      const tabs = [
        { index: 1, value: '简介' },
        { index: 2, value: '例句' },
      ]
      if (res.memoryTips) {
        tabs.push({ index: 3, value: '助记' })
      }
      wordData.value = res
      audioData.value.brAccents = res.brAccents
      audioData.value.usAccents = res.usAccents
      playAccent()
      if (res.meaningImage) introduceImg.value = res.meaningImage
      titleList.value = tabs
    })
    .finally(() => {
      hud.hideLoading()
    })
}

function changeNav(index: number) {
  isActive.value = index
  if (!wordData.value.sentenceList || wordData.value.sentenceList.length === 0) return
  audioData.value.brAccents =
    index === 1 ? wordData.value.brAccents : wordData.value.sentenceList[0].brFile
  audioData.value.usAccents =
    index === 1 ? wordData.value.usAccents : wordData.value.sentenceList[0].usFile
  playAccent()
}

// 音频播放
function playAccent() {
  // let type = configStore.accents;
  // if (type === 'br') {
  //     _file =
  //         isActive.value === 1
  //             ? JSON.parse(audioData.value.usAccents)
  //             : audioData.value.usAccents;
  // } else {
  let _file
  if (audioData.value.brAccents) {
    _file = isActive.value === 1 ? JSON.parse(audioData.value.brAccents) : audioData.value.brAccents
  } else if (audioData.value.usAccents) {
    _file = isActive.value === 1 ? JSON.parse(audioData.value.usAccents) : audioData.value.usAccents
  } else {
    return
  }

  // }

  isPlay.value = true
  useAudio({
    url: isActive.value === 1 ? _file[0].file : _file,
    onEnded() {
      isPlay.value = false
    },
  })
}

// 左右箭头

function changeDate(num: number) {
  const data = wordData.value.sentenceList as Array<sentenceListType>
  if (sentenceIndex.value >= 0 && sentenceIndex.value <= data.length - 1) {
    sentenceIndex.value += num
  }
  if (sentenceIndex.value < 0) sentenceIndex.value = data.length - 1
  if (sentenceIndex.value > data.length - 1) sentenceIndex.value = 0
  audioData.value.brAccents = data[sentenceIndex.value].brFile
  audioData.value.usAccents = data[sentenceIndex.value].usFile
  playAccent()
}
function clearData() {
  introduceImg.value = ''
  isActive.value = 1
  wordData.value = {
    spell: '',
    znDesc: '',
    bombCount: 0,
    faultCount: 0,
    glassCount: 0,
    reviewSuccessful: 0,
    reviewFailed: 0,
    spellFault: 0,
    successCount: 0,
    surrenderCount: 0,
    spellSuccess: 0,
    typeAbbr: '',
    levelNum: 0,
    stageName: '',
    brAccents: '',
    usAccents: '',
    memoryTips: '',
    sentenceList: [],
  }
  audioData.value = {
    brAccents: '',
    usAccents: '',
  }
  isPlay.value = false
  sentenceIndex.value = 0
}

function close() {
  clearData()
  emits('update:modelValue', false)
}
</script>
<style scoped lang="scss">
* {
  box-sizing: border-box;
  user-select: none;
}
.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;
}
.g-container {
  width: 1166px;
  height: 55vh;
  border-radius: 3.33vh;
  background-color: #dfdaf2;
  padding: 1.42vh;
  position: relative;
  .close-btn {
    position: absolute;
    z-index: 9;
    height: 4.17vh;
    width: 4.17vh;
    right: -15px;
    top: -1.25vh;
  }
  .title {
    position: absolute;
    display: flex;
    top: -4.17vh;
    .title-content {
      width: 128px;
      height: 8.67vh;
      background-color: #ffc359;
      cursor: pointer;
      padding: 0.33vh;
      border-radius: 0.67vh;
      transform: translateX(50px) rotate(15deg);
      &.active {
        background-color: #d9d163;
        .middle {
          background-color: #fffef2;
          border: 0.33vh solid #fff78c;
          .center {
            color: #6a3906;
          }
        }
      }
      .middle {
        border-radius: 0.67vh;
        background-color: #ffe8bf;
        width: 120px;
        height: 8vh;
        border: 0.33vh solid #ffd58c;
        position: relative;
        .center {
          font-family: $font-special;
          font-size: 2.67vh;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.45);
          transform: rotate(-15deg);
          text-indent: 20px;
          padding-top: 0.83vh;
        }
      }
    }
  }
  .content {
    display: flex;
    position: relative;
  }
  .left,
  .right {
    border-radius: 3.33vh;
    border: 0.33vh solid #d9d163;
    background-color: #fffef2;
  }
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
    background-size: contain;
    height: 100%;
  }
  .left {
    width: 784px;
    height: 52.33vh;
    transform: translateX(2px);
    overflow-y: scroll;
    position: relative;
    display: grid;
    align-items: center;

    .tips {
      display: flex;
      flex-direction: column;
      row-gap: 2.08vh;
      padding: 2.08vh 15px;
      max-height: 50vh;
      overflow: auto;
      .tip {
        display: flex;
        flex-direction: column;
        row-gap: 0.83vh;

        .tip-title {
          color: #4b4b68;
          font-family: $font-special;
          font-size: 2.5vh;
          padding-left: 18px;
        }
        .tip-content {
          padding: 1.67vh 16px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 2.67vh;
        }
      }
    }
    .bottom_horn {
      align-self: first baseline;
      width: 56px;
      height: 4.67vh;
      cursor: pointer;
      margin: 0 auto;
      margin-top: 2.67vh;
    }

    .word,
    .sensetence {
      width: 100%;
      color: rgba(0, 0, 0, 0.75);
      font-weight: 400;
      // display: flex;
      // flex-direction: column;
      // align-items: center;
      padding: 0 24px 2vh;
      box-sizing: border-box;
      .today-hot-trumpet {
        align-self: first baseline;
        width: 4.67vh;
        height: 4.67vh;
        margin-bottom: 2vh;

        cursor: pointer;
      }

      .en-desc {
        font-family: $font-special;
        font-size: 4vh;
        line-height: 4vh;
        margin-top: 1vh;
        display: flex;
        align-items: center;
        justify-content: center;

        .today-hot-trumpet {
          margin-left: 30px;
        }
      }

      .cn-desc {
        font-family: $font-text;
        font-size: 2.67vh;
        line-height: 4vh;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(0, 0, 0, 0.45);
        width: 100%;

        img {
          // width: 49px;
          height: 2.5vh;
          flex-shrink: 0;
        }
        .cn-desc-img {
          display: flex;
        }
      }
    }
    .word {
      .en-desc {
        // margin-top: 3.5vh;
      }
    }
    .sensetence {
      // height: 100%;
      .en-desc {
        margin-top: 1.67vh;
        text-align: center;
        font-family: 'PingFang SC';
        font-size: 2.67vh;
        font-style: normal;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.75);
        .today-hot-trumpet {
          margin-left: 20px;
        }
        // .en_desc_content {
        //     transition: all 0.5s;
        //     $par: 25%;
        //     background-image: linear-gradient(
        //         to right,
        //         red 95%,
        //         rgba(0, 0, 0, 0.75)
        //     );
        //     background-clip: text;
        //     position: relative;
        //     color: transparent;
        //     // &::before {
        //     //     // display: block;
        //     //     position: absolute;
        //     //     content: '';
        //     //     left: 0;
        //     //     top: 0;
        //     //     width: 100%;
        //     //     height: 50px;
        //     //     background-color: red;
        //     //     background-clip: text;
        //     // }
        // }
      }
      .cn-desc {
        color: rgba(0, 0, 0, 0.45);
        text-align: center;
        font-family: 'PingFang SC';
        font-size: 2vh;
        font-style: normal;
        font-weight: 400;
        line-height: 3vh;
      }
    }
    .empty {
      width: 20vh;
      margin: 0 auto;
      img {
        height: 20vh;
        width: 20vh;
        margin: 0 auto;
      }
      div {
        color: rgba(0, 0, 0, 0.45);
        text-align: center;
        font-family: 'PingFang SC';
        font-size: 1.67vh;
        font-weight: 400;
      }
    }
  }
  .right {
    width: 354px;
    height: 52.33vh;
    padding: 0.75vh;
    transform: translateX(-2px);

    .topic {
      margin: 0 auto;
      margin-top: 2.5vh;
      width: 306px;
      height: 4.33vh;
      line-height: 4.33vh;
      border-radius: 1.33vh;
      border: 0.17vh solid #cc8200;
      background-color: #fff78c;
      font-family: $font-special;
      font-size: 2vh;
      font-weight: 400;
      text-align: center;
    }
    .answer {
      padding: 0 15px;
      .answer-item {
        padding: 1.58vh 0 1.58vh 10px;
        display: flex;
        align-items: center;
        background-image: linear-gradient(to right, #ccc018 0%, #ccc018 50%, transparent 50%);
        background-size: 15px 1px;
        background-repeat: repeat-x;
        background-position: 50% 1%;
        img {
          height: 4vh;
          width: 4vh;
        }
        .text {
          margin-left: 10px;
          font-family: $font-text;
          font-size: 2.33vh;
          font-weight: 400;
          line-height: 3.5vh;
          color: rgba(0, 0, 0, 0.45);

          .number {
            color: rgba(0, 0, 0, 0.75);
          }
        }
        &:first-child {
          background: none;
        }
      }
    }
    .prop {
      padding-top: 1.25vh;
      width: 322px;
      height: 18.33vh;
      background-color: #faf0d7;
      border-radius: 1.67vh;
      margin: 0 auto;
      margin-top: 1.25vh;
      .name {
        margin: 0 auto;
        background-color: #fff78c;
        width: 192px;
        height: 4.17vh;
        border-radius: 1.33vh;
        border: 0.17vh solid #cc8200;
        font-family: $font-special;
        font-size: 2.33vh;
        font-weight: 400;
        line-height: 4.17vh;
        text-align: center;
        position: relative;
        &::after,
        &::before {
          box-sizing: border-box;
          content: '';
          position: absolute;
          height: 0.67vh;
          width: 8px;
          border-radius: 50%;
          border: 0.17vh solid #cc8200;
          background-color: #faf0d7;
          top: 1.67vh;
        }
        &::before {
          left: 10px;
        }
        &::after {
          right: 10px;
        }
      }

      .number {
        margin-top: 1.25vh;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        justify-content: space-between;

        img {
          width: 72px;
          height: 6vh;
        }
        div {
          font-family: $font-text;
          font-size: 1.67vh;
          font-weight: 500;
          text-align: center;
          color: #736d20;
          .number-text {
            font-size: 2.33vh;
          }
        }
      }
    }
    .slice_box {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      img {
        height: 5.33vh;
        width: 64px;
      }
      &.left_arrow {
        left: -815px;
      }
      &.right_arrow {
        right: 310px;
      }
    }
  }
}
</style>

<style lang="scss">
.left {
  .tips {
    strong {
      color: #0094dd;
    }
  }
}
</style>
