<script setup lang="ts">
import { changeSymbolPosition } from '../tool.ts'
import sentenceCollectApi from '@/api/subject/sentenceCollect'
import { useAudio } from '@/hooks'
import { wordSortStore } from '@/stores'

const props = withDefaults(
  defineProps<{
    sentenceData: anyObj
    numData: anyObj
    modelValue: boolean
    onResult: boolean
    isEnd: boolean
  }>(),
  {
    modelValue: false,
    onResult: false,
    numData: () => ({
      current: 0,
      totol: 0,
    }),
    sentenceData: () => ({ wordList: [] }),
    isEnd: false,
  },
)

const emits = defineEmits(['changeCollect', 'update:modelValue', 'plsySound', 'clickWord'])
const OSS_URL = import.meta.env.VITE_OSS_URL
const senseHandUrl = `${OSS_URL}/urm/sense_hand.svg`
const answerList = ref<anyObj>([])
const wordStore = wordSortStore()

watch(
  () => props.sentenceData,
  () => {
    answerList.value = changeSymbolPosition(props.sentenceData.wordList)
  },
  {
    immediate: true,
  },
)

const onPlayer = ref(false)

const handlePlaySound = () => {
  if (
    (!props.onResult && (props.modelValue || !props.sentenceData.accent || props.isEnd)) ||
    wordStore.isAudioEnd
  )
    return

  // modelValue.value = true;
  emits('plsySound')
  emits('update:modelValue', true)
  useAudio({
    url: props.sentenceData.accent,
    autoplay: true,
    onEnded: () => {
      emits('update:modelValue', false)
    },
  })
}

const clickWord = (item: anyObj) => {
  if (
    (!props.onResult && (props.modelValue || !props.sentenceData.accent || props.isEnd)) ||
    wordStore.isAudioEnd
  )
    return
  emits('update:modelValue', false)
  if (item.accent) {
    useAudio({
      url: item.accent,
      autoplay: true,
    })
  }
  emits('clickWord', item)
}
const handleCollect = () => {
  // 收藏/取消操作
  if (props.sentenceData.collect) {
    sentenceCollectApi.cancelCollectSentence({ sentenceId: [props.sentenceData.sentenceId] })
  } else {
    sentenceCollectApi.collectSentence({ sentenceId: [props.sentenceData.sentenceId] })
  }
  emits('changeCollect', props.sentenceData.collect ? 0 : 1)
}
</script>
<template>
  <div class="topic-item topic-box">
    <div class="tool">
      <div class="sentenceCount">{{ numData.current + 1 }}/{{ numData.totol }}</div>
      <div class="icons">
        <div v-if="props.sentenceData.accent" class="sound icon">
          <Horn v-if="modelValue" :active="modelValue" width="40"></Horn>
          <Icon
            v-else
            :name="onPlayer ? '' : 'playSound'"
            size="48"
            @click="handlePlaySound()"
          ></Icon>
        </div>
        <Icon
          :name="sentenceData.collect ? 'collect_yellow' : 'collect_grey'"
          size="48"
          @click="handleCollect()"
        ></Icon>
      </div>
    </div>
    <div class="topic_content">
      <div class="topic_content_title">
        <div class="title">
          {{ sentenceData.znDesc }}
        </div>
      </div>
      <div :class="{ topic_content_answer: true, iswrong: sentenceData.iswrong }">
        <div
          v-for="(item, index) in answerList"
          :key="index"
          class="topic_content_answer_item"
          @click="clickWord(item)"
        >
          <div class="spell">
            {{ item.displaySpell }}
          </div>
        </div>
      </div>
    </div>
    <div class="hands">
      <img :src="senseHandUrl" alt="" />
      <img :src="senseHandUrl" alt="" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
@use './topic.scss' as *;
$border_c: #9cfaf7;

.topic-item {
  background-color: #f5feff;
  border-width: 0;
  padding-bottom: 3vh;

  .tool {
    color: #417ccc;
  }
  .topic_content {
    &_title {
      background-color: $border_c;
    }

    &_answer {
      border-radius: 1.67vh;
      background-color: white;

      &_item {
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.33vh solid $border_c;
        background: #fff;
      }
      &.iswrong {
        &_item {
          border-color: #ff8d3b;
        }
      }
    }
  }
}
</style>
