<template>
  <div :id="'round-' + currentLevel.titleType" class="page__content">
    <div class="page__content__left hidden_scroll">
      <template v-if="currentLevel.titleType === 1">
        <div class="left_content">
          <div class="word">
            <div class="spell">
              <AbbrImg v-if="currentLevel.titleCategory === 2" :abbr="currentLevel.abbr"></AbbrImg>

              {{ currentLevel.title }}
            </div>
            <Horn v-if="currentLevel.accent" :src="currentLevel.accent" autoplay />
          </div>
          <div class="phoneticSymbol">{{ currentLevel?.titleTips }}</div>
          <div v-if="currentLevel.titlePicture" class="illustration">
            <LazyLoad :src="currentLevel.titlePicture" @onTapEnlargeImg="tapEnlargeImg" />
          </div>
        </div>
      </template>
      <template v-else-if="currentLevel.titleType === 2">
        <div class="left_content">
          <div class="word">
            <div class="spell">
              <AbbrImg v-if="currentLevel.titleCategory === 2" :abbr="currentLevel.abbr"></AbbrImg>

              {{ filterParentheses(currentLevel.title || '') }}
            </div>
            <Horn
              v-if="currentLevel.accent && props.isChanged"
              :src="currentLevel.accent"
              autoplay
            />
          </div>
          <div class="phoneticSymbol">{{ currentLevel?.titleTips }}</div>
          <div v-if="currentLevel.titlePicture" class="illustration">
            <LazyLoad :src="currentLevel.titlePicture" @onTapEnlargeImg="tapEnlargeImg" />
          </div>
        </div>
      </template>
      <template v-else-if="currentLevel.titleType === 3">
        <div class="left_content">
          <div class="round-3">
            <div class="sentence">
              <AbbrImg v-if="currentLevel.titleCategory === 2" :abbr="currentLevel.abbr"></AbbrImg>
              <span v-html="topic"></span>
            </div>
            <Horn v-if="currentLevel.accent" :src="currentLevel.accent" autoplay />
          </div>
          <div class="chinese">{{ currentLevel?.titleTips }}</div>
          <div v-if="currentLevel.titlePicture" class="illustration">
            <LazyLoad :src="currentLevel.titlePicture" @onTapEnlargeImg="tapEnlargeImg" />
          </div>
          <div class="explain_form_box">
            <div
              v-if="
                answer.data.result &&
                currentLevel.sentenceMeaningWordFormLabel &&
                currentLevel.sentenceMeaningWordFormLabel !== 1
              "
              class="explain_form"
            >
              <text class="form">{{ currentLevel.sentenceMeaningWordSpell }}</text> 是
              <text class="prototype">{{ currentLevel.wordSpell }}</text>
              的<text class="form_name">{{
                WORD_LABEL[currentLevel.sentenceMeaningWordFormLabel - 1] || WORD_LABEL[0]
              }}</text>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="page__content__left__content">
          <div class="spell">
            <AbbrImg
              v-if="currentLevel.titleCategory === 2"
              style="line-height: 100px"
              :abbr="currentLevel.abbr"
            ></AbbrImg>
            {{ currentLevel?.title }}
          </div>
          <div class="phoneticSymbol">{{ currentLevel?.titleTips }}</div>
          <Horn v-if="currentLevel.accent" :src="currentLevel.accent" autoplay />
        </div>
      </template>
    </div>
    <div class="page__content__line">
      <!-- 标生按钮 -->
      <div v-if="answer.data.result !== question_wrong" class="btn_mark">
        <div class="pointer" @click="handleSurrender">
          <img class="flag" :src="res_flag" />
        </div>
      </div>
      <div
        v-else-if="
          currentLevel.titleType < 3 || (currentLevel.titleType === 3 && !currentLevel.titleTips) // 不是例句题或例句题题目为单词时显示
        "
        class="btn_mark"
        @click="handelMark"
      >
        <text
          :class="['t-icon', isMarked ? 't-icon-a-shengliang' : 't-icon-a-Property1an1']"
        ></text>
      </div>
    </div>
    <div class="page__content__right">
      <PictureOptions
        v-if="currentLevel.titleType === 4"
        :list="currentLevel.optionList"
        :result="answer.data.result"
        @selected="answer.answering"
      ></PictureOptions>
      <TextOptions
        v-else
        :list="currentLevel.optionList"
        :result="answer.data.result"
        :titleType="currentLevel.titleType"
        @selected="answer.answering"
      >
      </TextOptions>
    </div>
    <div v-if="showMaskRef" class="mask">
      <div class="content">{{ toastText }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import TextOptions from './TextOptions.vue'
import PictureOptions from './PictureOptions.vue'
import type { Exercises, Option } from '../interface'

import useAnswer from '../hooks/useAnswer'
import LazyLoad from '../../../../../components/LazyLoad.vue'
import Horn from '../../../../../components/HornC.vue'
import wordDetailApi from '@/api/subject/wordDetail'
import { question_right, question_wrong } from '../..'

const props = defineProps<{
  currentLevel: Exercises
  handle: anyObj
  isChanged?: boolean
}>()

const emit = defineEmits(['onTapEnlargeImg'])

const OSS_URL = import.meta.env.VITE_OSS_URL

const res_flag = `${OSS_URL}/xuexiaole_clinet/hardMode/res_flag.png`
const tick = `${OSS_URL}/xuexiaole_clinet/normalMode/tick.png`
const line_word = `url(${OSS_URL}/xuexiaole_clinet/normalMode/line_word.png)`

// 黄色喇叭计时器
const PlayTiming = ref()
// 倒计时
const PlayTim = ref(0)
// 喇叭显示/隐藏
const PlayShow = ref(false)
// 计时显示播放按钮
function reckon() {
  console.log('计时')
  PlayTim.value = 0
  PlayTiming.value = setInterval(() => {
    if (PlayTim.value < 5) {
      PlayTim.value = PlayTim.value + 1
    } else {
      PlayShow.value = true
      cancRCimer() // 清除 定时器
    }
  }, 1000)
}
// 清除定时器
function cancRCimer() {
  clearInterval(PlayTiming.value)
  // timer.value = null
  // PlayShow.value = false;
}
/* 过滤括号里的内容 */
function filterParentheses(str: string) {
  return str.replace(/\（(.*)\）/, '').replace(/\((.*)\)/, '')
}

// 图片放大
function tapEnlargeImg() {
  if (props.currentLevel.titlePicture) {
    emit('onTapEnlargeImg', props.currentLevel.titlePicture)
  }
}

const toastText = ref('已加入生词本')
const showMaskRef = ref(false)
const timeRef = ref(0)
const handleOpenMask = (val: boolean) => {
  toastText.value = val ? '已加入生词本' : '已从生词本移除'
  showMaskRef.value = true
  if (timeRef.value) {
    clearTimeout(timeRef.value)
  }
  timeRef.value = setTimeout(() => {
    showMaskRef.value = false
    clearTimeout(timeRef.value)
  }, 500) as any
}
const WORD_LABEL = [
  '原型',
  '第一人称单数',
  '第三人称单数',
  '一般过去式',
  '过去分词',
  '现在分词',
  '复数形式',
  '比较级',
  '最高级',
]

const topic = computed(() => {
  if (answer.data.result === question_wrong || answer.data.result === question_right) {
    const rightAnswer =
      props.currentLevel.sentenceDisplaySpell ||
      props.currentLevel.optionList.filter(item => item.answer)[0].value
    return props.currentLevel.title?.replace(
      '_____',
      `<span style="color: #99d609;text-decoration:underline; text-underline-offset:8px">${rightAnswer}</span>`,
    )
  } else {
    return props.currentLevel.title
  }
})

const isMarked = ref(false)

function handelMark() {
  isMarked.value = !isMarked.value
  wordDetailApi
    .operateTag({
      id: props.currentLevel.wordId,
      meaningId: props.currentLevel.meaningId as any,
      levelId: props.currentLevel.levelId,
      knowFlag: null,
      strangeFlag: isMarked.value ? 1 : 0,
    })
    .then(() => {
      handleOpenMask(isMarked.value)
    })
}

function handleSurrender() {
  if (answer.data.result) return
  answer.answering(false, props.currentLevel.optionList.find(item => item.answer) as Option, true)
}

const answer = useAnswer(props.handle)

watch(
  () => props.currentLevel,
  nv => {
    isMarked.value = nv.strangeWord === 1
    if (props.currentLevel.titleType === 2 && !props.isChanged) {
      cancRCimer() // 清除定时器
      answer.load(nv)
      if (nv.accent) {
        PlayShow.value = false
        reckon()
      }
    } else {
      answer.load(nv)
    }
  },
  { immediate: true },
)

defineExpose({
  answering: answer.answering,
})
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

.page__content {
  margin-top: 5.75vh;
  height: calc(100% - 110px);
  display: flex;
  position: relative;
  user-select: none;
  .page__content__left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    .left_content {
      flex: 1;
      max-width: 581px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .word {
      display: flex;
      align-items: center;
      position: relative;
    }
    .spell {
      max-width: 480px;
      padding: 0 32px;
      background-image: v-bind(line_word);
      background-size: auto 100px;
      color: var(--grey-1, rgba(0, 0, 0, 0.85));
      font-family: $font-special;
      font-size: 2.83vh; /* 64px */
      font-style: normal;
      font-weight: 500;
      line-height: 8.33vh;
      display: flex;
      align-items: center;
    }
    .horn {
      position: absolute;
      left: 100%;
      cursor: pointer;
    }

    .chinese {
      width: 100%;
      color: var(--grey-3, rgba(0, 0, 0, 0.65));
      font-size: 2.67vh;
    }
    .explain_form_box {
      width: 100%;
      // height: 78px;
      .explain_form {
        padding: 1vh 28px;
        border-radius: 1.33vh;
        border: 0.33vh solid #ffa51f;
        background: #fffef2;
        color: vrgba(0, 0, 0, 0.65);
        font-family: $font-special;
        font-size: 2.67vh;
        .form {
          color: #8409d6;
        }
        .prototype {
          color: #99d609;
        }
        .form_name {
          color: #09c2d6;
        }
      }
    }
    .sentence {
      color: var(--grey-1, rgba(0, 0, 0, 0.85));
      font-family: $font-text;
      font-size: 2.67vh; /* 48px */
      font-style: normal;
      font-weight: 500;
    }

    .phoneticSymbol {
      color: var(--grey-3, rgba(0, 0, 0, 0.65));
      font-family: $font-text;
      font-size: 2.67vh; /* 36px */
      font-style: normal;
      font-weight: 400;
    }
    .illustration {
      width: 100%;
      min-height: 0;
      margin: 2.67vh 0;
      flex: 1;
      img {
        width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }
  }
  .page__content__right {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 32px 3.33vh 32px;
  }
  .page__content__line {
    position: relative;
    border-left: 0.08vh dashed #d9d163;
    .btn_mark {
      cursor: pointer;
      position: absolute;
      left: 50%;
      top: -3.67vh;
      transform: translate(-50%, 0);
      width: 6.67vh;
      height: 6.67vh;
      border: 0.33vh solid #d9d163;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fffef5;
      .t-icon {
        width: 5.17vh;
        height: 5.17vh;
      }
      .flag {
        height: 6.83vh;
        width: 6.83vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    .content {
      width: 320px;
      height: 8vh;
      z-index: 999;
      border-radius: 1.67vh;
      border: 0.33vh solid var(--4, #ffd58c);
      background: var(--4, #fffaf2);
      box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.15);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--grey-1, rgba(0, 0, 0, 0.85));
      font-family: $font-text;
      font-size: 2.67vh;
      font-style: normal;
      font-weight: 400;
      line-height: 4vh;
      /* 150% */
    }
  }
}
#round-1 {
  :deep(.horn) {
    margin-left: 14px;
    margin-right: 14px;
    width: 72px;
    height: 6vh;
    flex-shrink: 0;
    position: absolute;
    left: 100%;

    img {
      width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  }
}
#round-2 {
  :deep(.horn) {
    margin-left: 14px;
    margin-right: 14px;
    width: 72px;
    height: 6vh;
    flex-shrink: 0;

    img {
      width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  }

  :deep(.options__item__content__text) {
    font-family: Arial, Helvetica, sans-serif;
  }
}
#round-3 {
  .page__content__left {
    .round-3 {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;

      .horn {
        margin-left: 14px;
        margin-right: 14px;
        width: 72px;
        height: 6vh;
        flex-shrink: 0;
        position: unset;
        left: unset;

        img {
          width: 100%;
          max-height: 100%;
          object-fit: contain;
        }
      }
    }
  }

  .chinese {
    max-width: 580.992px;
    // text-align: center;
  }
}
#round-4 {
  margin-top: 0;
  height: 100%;

  .page__content__left {
    // width: 635px;
    flex: none;
    padding-left: unset;
  }
  .page__content__right {
    margin-top: 7.92vh;
    padding: 0 110px 0 24px;
  }
  .page__content__line {
    margin-top: 7.92vh;
    border-left: 0.08vh dashed #d9d163;
  }
  .page__content__left__content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .horn {
      position: relative;
      left: 0;
      margin-left: 14px;
      margin-right: 14px;
      margin-top: 3.33vh;
      width: 72px;
      height: 6vh;
      img {
        width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }
  }
}
</style>
