<script setup lang="ts">
import { useRouter } from 'vue-router'
import Title from './components/Title.vue'
import WordCard from './components/WordCard.vue'
import ChooseTitle from './components/ChooseTitle.vue'
import happyReadApi from '@/api/subject/happyRead'

const OSS_URL = `${import.meta.env.VITE_OSS_URL}`
const sliceLine = `url(${OSS_URL}/urm/slice_line.svg) 100% / contain no-repeat`

const showAnswer = ref(false) // 是否展示答案

const currentSentence = ref({
  id: '1839250311213232130',
})

function handleChooseAnswer(e: any) {
  console.log(e)
  showAnswer.value = true
}

const wordList = ref([
  {
    abbr: '',
    word: 'to',
    pinyin: '/gawsg/',
    wordId: '123',
    accentInfo:
      'https://reading-1313840333.cos.ap-guangzhou.myqcloud.com/raz_theseshoes_la36_title_text.mp3',
    meaning: '哈哈',
    strange: false,
  },
  {
    abbr: '',
    word: 'candles',
    pinyin: '/gawsg/',
    wordId: '123',
    answerID: '3',
    accentInfo:
      'https://reading-1313840333.cos.ap-guangzhou.myqcloud.com/raz_theseshoes_la36_title_text.mp3',
    meaning: '哈哈',
    strange: false,
  },
  {
    abbr: '',
    word: 'and',
    pinyin: '/gawsg/',
    wordId: '123',
    answerID: '4',
    accentInfo:
      'https://reading-1313840333.cos.ap-guangzhou.myqcloud.com/raz_theseshoes_la36_title_text.mp3',
    meaning: '哈哈',
    strange: false,
  },
  {
    abbr: '',
    word: 'has',
    pinyin: '/gawsg/',
    wordId: '123',
    answerID: '1',
    accentInfo:
      'https://reading-1313840333.cos.ap-guangzhou.myqcloud.com/raz_theseshoes_la36_title_text.mp3',
    meaning: '哈哈',
    strange: false,
  },
])
const sentenceData = ref({
  topic: "Let's Blow",
  wordCount: 33,
  characterName: 'Ren',
  paragraphs: [
    {
      sort: 1,
      sentenceList: [
        {
          id: '1839250311213232130',
          enDesc: 'What a blast Ren had.',
          znDes: null,
          enUrl:
            'https://reading-1313840333.cos.ap-guangzhou.myqcloud.com/raz_theseshoes_la36_title_text.mp3',
          znUrl: null,
          textId: '1839250311079014401',
          sort: 1,
          sentenceWordVoList: [
            {
              id: '1839250311938846722',
              sentenceId: '1839250311213232130',
              word: 'What',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250312035315713',
              sentenceId: '1839250311213232130',
              word: 'a',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250312131784706',
              sentenceId: '1839250311213232130',
              word: 'blast',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250312224059393',
              sentenceId: '1839250311213232130',
              word: 'Ren',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250312324722689',
              sentenceId: '1839250311213232130',
              word: 'had',
              wordId: null,
              symbol: '.',
              meaningId: null,
              sort: null,
            },
          ],
          paragraphNum: 1,
        },
        {
          id: '1839250311318089729',
          enDesc: 'Ren got to blow out her candles.',
          znDes: null,
          enUrl:
            'https://reading-1313840333.cos.ap-guangzhou.myqcloud.com/raz_theseshoes_la36_title_text.mp3',
          znUrl: null,
          textId: '1839250311079014401',
          sort: 2,
          sentenceWordVoList: [
            {
              id: '1839250312416997377',
              sentenceId: '1839250311318089729',
              word: 'Ren',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250312509272066',
              sentenceId: '1839250311318089729',
              word: 'got',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250312605741058',
              sentenceId: '1839250311318089729',
              word: 'to',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250312693821442',
              sentenceId: '1839250311318089729',
              word: 'blow',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250312781901825',
              sentenceId: '1839250311318089729',
              word: 'out',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250312869982210',
              sentenceId: '1839250311318089729',
              word: 'her',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250312966451201',
              sentenceId: '1839250311318089729',
              word: 'candles',
              wordId: null,
              symbol: '.',
              meaningId: null,
              sort: null,
            },
          ],
          paragraphNum: 1,
        },
        {
          id: '1839250311418753025',
          enDesc: 'They were blue and black candles.',
          znDes: null,
          enUrl:
            'https://reading-1313840333.cos.ap-guangzhou.myqcloud.com/raz_theseshoes_la36_title_text.mp3',
          znUrl: null,
          textId: '1839250311079014401',
          sort: 3,
          sentenceWordVoList: [
            {
              id: '1839250313054531586',
              sentenceId: '1839250311418753025',
              word: 'They',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250313138417666',
              sentenceId: '1839250311418753025',
              word: 'were',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250313230692353',
              sentenceId: '1839250311418753025',
              word: 'blue',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250313322967042',
              sentenceId: '1839250311418753025',
              word: 'and',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250313415241730',
              sentenceId: '1839250311418753025',
              word: 'black',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250313478156290',
              sentenceId: '1839250311418753025',
              word: 'candles',
              wordId: null,
              symbol: '.',
              meaningId: null,
              sort: null,
            },
          ],
          paragraphNum: 1,
        },
        {
          id: '1839250311527804930',
          enDesc: 'She got to take a ride in a big blimp.',
          znDes: null,
          enUrl:
            'https://reading-1313840333.cos.ap-guangzhou.myqcloud.com/raz_theseshoes_la36_title_text.mp3',
          znUrl: null,
          textId: '1839250311079014401',
          sort: 4,
          sentenceWordVoList: [
            {
              id: '1839250313545265154',
              sentenceId: '1839250311527804930',
              word: 'She',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250313679482882',
              sentenceId: '1839250311527804930',
              word: 'got',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250313742397442',
              sentenceId: '1839250311527804930',
              word: 'to',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250313876615169',
              sentenceId: '1839250311527804930',
              word: 'take',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250313943724033',
              sentenceId: '1839250311527804930',
              word: 'a',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250314077941762',
              sentenceId: '1839250311527804930',
              word: 'ride',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250314145050625',
              sentenceId: '1839250311527804930',
              word: 'in',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250314342182914',
              sentenceId: '1839250311527804930',
              word: 'a',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250314476400642',
              sentenceId: '1839250311527804930',
              word: 'big',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250314539315202',
              sentenceId: '1839250311527804930',
              word: 'blimp',
              wordId: null,
              symbol: '.',
              meaningId: null,
              sort: null,
            },
          ],
          paragraphNum: 1,
        },
        {
          id: '1839250311632662530',
          enDesc: 'She and her pals got to play with her new blocks.',
          znDes: null,
          enUrl:
            'https://reading-1313840333.cos.ap-guangzhou.myqcloud.com/raz_theseshoes_la36_title_text.mp3',
          znUrl: null,
          textId: '1839250311079014401',
          sort: 5,
          sentenceWordVoList: [
            {
              id: '1839250314673532930',
              sentenceId: '1839250311632662530',
              word: 'She',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250314740641794',
              sentenceId: '1839250311632662530',
              word: 'and',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250314883248129',
              sentenceId: '1839250311632662530',
              word: 'her',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250315009077250',
              sentenceId: '1839250311632662530',
              word: 'pals',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250315076186114',
              sentenceId: '1839250311632662530',
              word: 'got',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250315143294978',
              sentenceId: '1839250311632662530',
              word: 'to',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250315277512706',
              sentenceId: '1839250311632662530',
              word: 'play',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250315411730434',
              sentenceId: '1839250311632662530',
              word: 'with',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250315478839298',
              sentenceId: '1839250311632662530',
              word: 'her',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250315613057026',
              sentenceId: '1839250311632662530',
              word: 'new',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250315747274754',
              sentenceId: '1839250311632662530',
              word: 'blocks',
              wordId: null,
              symbol: '.',
              meaningId: null,
              sort: null,
            },
          ],
          paragraphNum: 1,
        },
        {
          id: '1839250311741714433',
          enDesc: 'Yum!',
          znDes: null,
          enUrl:
            'https://reading-1313840333.cos.ap-guangzhou.myqcloud.com/raz_theseshoes_la36_title_text.mp3',
          znUrl: null,
          textId: '1839250311079014401',
          sort: 6,
          sentenceWordVoList: [
            {
              id: '1839250315814383618',
              sentenceId: '1839250311741714433',
              word: 'Yum',
              wordId: null,
              symbol: '!',
              meaningId: null,
              sort: null,
            },
          ],
          paragraphNum: 1,
        },
        {
          id: '1839250311829794818',
          enDesc: 'Mom and Ren got the fruits to blend them.',
          znDes: null,
          enUrl:
            'https://reading-1313840333.cos.ap-guangzhou.myqcloud.com/raz_theseshoes_la36_title_text.mp3',
          znUrl: null,
          textId: '1839250311079014401',
          sort: 7,
          sentenceWordVoList: [
            {
              id: '1839250315948601346',
              sentenceId: '1839250311829794818',
              word: 'Mom',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250316015710210',
              sentenceId: '1839250311829794818',
              word: 'and',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250316145733633',
              sentenceId: '1839250311829794818',
              word: 'Ren',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250316208648193',
              sentenceId: '1839250311829794818',
              word: 'got',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250316275757058',
              sentenceId: '1839250311829794818',
              word: 'the',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250316409974786',
              sentenceId: '1839250311829794818',
              word: 'fruits',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250316477083649',
              sentenceId: '1839250311829794818',
              word: 'to',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250316556775425',
              sentenceId: '1839250311829794818',
              word: 'blend',
              wordId: null,
              symbol: null,
              meaningId: null,
              sort: null,
            },
            {
              id: '1839250316674215938',
              sentenceId: '1839250311829794818',
              word: 'them',
              wordId: null,
              symbol: '.',
              meaningId: null,
              sort: null,
            },
          ],
          paragraphNum: 1,
        },
      ],
    },
  ],
})

onMounted(() => {
  happyReadApi.getNaturalLangBeginTrain().then((res: any) => {
    console.log('res', res)
  })
})
</script>
<template>
  <div class="choose-word">
    <BackBar leftText="选词填空" class="backBar" />
    <div class="content">
      <Title tip="SW" :title="sentenceData.topic"></Title>
      <div class="banner">
        <div class="sentence hidden_scroll">
          <div class="scroll">
            <ChooseTitle
              :title-list="sentenceData.paragraphs[0].sentenceList"
              :currentId="currentSentence.id"
              :wordList="wordList"
              :showAnswer="showAnswer"
            />
          </div>
        </div>
        <div class="slice"></div>
        <div class="answer-word">
          <WordCard
            v-for="item in wordList"
            :key="item.wordId"
            :currentId="currentSentence.id"
            :itemData="item"
            :showAnswer="showAnswer"
            @selecct="handleChooseAnswer"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.choose-word {
  height: 100vh;
  background-repeat: no-repeat;
  padding: 2.67vh 0 0 64px;
  @include main_bg;
  .content {
    position: relative;
    width: 1720px;
    height: 81.92vh;
    background-color: #faffff;
    margin-top: 3.75vh;
    border-radius: 3.33vh;
    .banner {
      padding-top: 6.83vh;

      .answer-word {
        display: flex;
        width: 1430px;
        margin: 0 auto;
        & > div {
          margin-right: 50px;
          &:last-child {
            margin: 0;
          }
        }
      }
      .sentence {
        width: 1520px;
        margin: 0 auto;
        height: 40vh;
        overflow: auto;
      }
      .slice {
        width: 1520px;
        margin: 1.25vh auto;
        height: 2.5vh;
        background: v-bind(sliceLine);
      }
    }
  }
}
</style>
