<template>
  <div class="readSentence">
    <div leftText="" class="backBar" @click="$emit('update:modelValue', false)">
      <Icon name="left_arrow" size="80"></Icon>
    </div>
    <div class="content">
      <div class="tool">
        <div :class="{ icon: true, noBorder: activeTool }" @click="clickTool">
          <img :src="tooList[activeTool].url" />
        </div>
      </div>
      <div class="left">
        <div class="left_content">
          <div class="word">
            <div class="spell">
              <AbbrImg v-if="props.titleCategory === 2" :abbr="abbr"></AbbrImg>
              {{ props.title }}
            </div>
          </div>
          <div class="phoneticSymbol">
            {{ props?.titleTips }}
            <Horn v-if="props.accent" :src="props.accent" class="horn" />
          </div>
          <div v-if="props.titlePicture" class="illustration">
            <img :src="props.titlePicture" alt="" @click="tapEnlargeImg" />
          </div>
        </div>
      </div>
      <div class="right">
        <PictureOptions
          v-if="props.titleType === 4"
          :list="props.optionList"
          :result="answer.data.result"
          @selected="answer.answering"
        ></PictureOptions>
        <TextOptions
          v-else
          :list="props.optionList"
          :result="answer.data.result"
          @selected="answer.answering"
        >
        </TextOptions>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { sentenceChoose } from '../interface/interface'
import TextOptions from '@/page/subject/learnWord/normalMode/components/TextOptions.vue'
import PictureOptions from '@/page/subject/learnWord/normalMode/components/PictureOptions.vue'
import useAnswer from '@/page/subject/learnWord/normalMode/hooks/useAnswer'
import wordDetailApi from '@/api/subject/wordDetail'
const props = defineProps<{
  modelValue: boolean
  data: sentenceChoose
  index: number
  titleType: number
  optionList: anyObj[]
  titlePicture: string
  strangeWord: number
  titleCategory: number
  titleTips?: string
  abbr: string
  title: string
  accent: string
  levelId: string
  meaningId: string
  wordId: string
}>()

const emits = defineEmits([
  'update:modelValue',
  'handleSurrender',
  'handleRight',
  'handleError',
  'changeStrange',
])
const OSS_URL = `${import.meta.env.VITE_OSS_URL}`
const loadBg = `url(${OSS_URL}/urm/phonics_load_bg.svg) center/contain no-repeat`

const answer = useAnswer({
  handleRight,
  handleError,
  noNeedNext: true,
})
const activeTool = ref(0) // 当前显示的工具栏
const tooList = computed(() => [
  {
    name: '投降',
    idx: 1,
    url: `${OSS_URL}/xuexiaole_clinet/normalMode/res_flag.png`,
  },
  {
    name: '生词本',
    idx: 2,
    url: props.strangeWord
      ? `${OSS_URL}/icon/shengciben.svg`
      : `${OSS_URL}/icon/shengciben_active.svg`,
  },
])

function handleRight() {
  activeTool.value = 1
  emits('handleRight')
}
function handleError() {
  activeTool.value = 1
  emits('handleError')
}
function clickTool() {
  if (!activeTool.value) {
    // 投降
    answer.answering(
      false,
      props.optionList.find(item => item.answer),
      true,
    )
    emits('handleSurrender')
  } else {
    // 取消或加入生词本
    wordDetailApi.operateTag({
      id: props.wordId,
      meaningId: props.meaningId,
      levelId: props.levelId,
      knowFlag: null,
      strangeFlag: props.strangeWord ? 1 : 0,
    })
    emits('changeStrange', props.strangeWord)
  }
}

function tapEnlargeImg() {}

onMounted(() => {
  setTimeout(() => {
    // isPlay.value = playerStore.playShow;
    answer.load({ optionList: props.optionList })
  }, 300)
})
</script>

<style lang="scss" scoped>
//
.backBar {
  position: absolute;
  left: 64px;
  top: 2.67vh;
  cursor: pointer;
}
.readSentence {
  height: 100vh;
  width: 100vw;
  @include main_bg;
  padding-top: 15vh;
  .content {
    display: flex;
    align-items: center;
    width: 1720px;
    height: 84.83vh;
    margin: 0 auto;
    background: v-bind(loadBg);
    position: relative;
    .tool {
      position: absolute;
      right: 8px;
      top: 2.67vh;
      background-color: #d6f2ff;
      height: 11vh;
      width: 132px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0 3.33vh 0 3.33vh;
      box-shadow: 0 0.33vh 0.33vh 0 #00000040;

      .icon {
        height: 6.67vh;
        width: 80px;
        border-radius: 50%;
        background-color: #fffef5;
        border: 0.33vh solid #d9d163;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        &.noBorder {
          border: none;
          background-color: transparent;
        }
        img {
          height: 6.67vh;
          width: 80px;
        }
      }
    }
  }

  .left,
  .right {
    width: 50%;
    padding-top: 3.33vh;
    height: 65vh;
  }
  .right {
    display: flex;
    align-items: center;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      height: 100%;
      left: -40px;
      top: 0;
      width: 5px;
      background: repeating-linear-gradient(to bottom, #fff01f 0%, #fff01f 2%, #fff 2%, #fff 4%);
    }
  }
  .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    .left_content {
      flex: 1;
      width: 100%;
      max-width: 581px;
      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: url('https://xxl-1313840333.cos.ap-guangzhou.myqcloud.com/xuexiaole_clinet/normalMode/line_word.png');
      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;
    }
    .horn {
      cursor: pointer;
      margin-left: 20px;
    }

    .chinese {
      width: 100%;
      color: var(--grey-3, rgba(0, 0, 0, 0.65));
      font-size: 2.67vh;
    }
    .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 {
      display: flex;
      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%;
      height: 30vh;
      margin: 2.67vh 0;
      img {
        width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 3.33vh;
        box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.25);
      }
    }
  }
}
</style>
