<template>
  <div :class="{ 'info-content': true, needAnswer: needAnswer }">
    <div class="sentence-content">
      <div v-if="!needAnswer" class="titile">
        句子
        <span class="num">（共{{ sentencenum }}句）</span>
      </div>

      <!-- 句子列表 -->

      <div class="scroll-cont">
        <div class="scroll-list">
          <!-- 加载 -->
          <div v-if="playLoading" class="cont">
            <div v-for="(item, index) in 5" :key="index" class="cover"></div>
          </div>
          <div v-else class="list">
            <div v-for="(dataItem, index) in data" :key="index" class="paragraph">
              <div
                class="slice-line"
                :style="{
                  background: sliceLine,
                }"
              >
                <div class="text">Paragraph {{ index + 1 }}</div>
              </div>
              <div
                v-for="(item, index) in dataItem"
                :id="'item' + item.id"
                :key="index"
                :class="
                  item.id === curSentenceInfo.data.id ? ' item item_play pointer' : 'item pointer'
                "
              >
                <!-- 播放按钮、播放动画 -->
                <div class="senten_play" @click="playSound(item)">
                  <ShowLottie
                    v-if="item.id === curSentenceInfo.data.id"
                    name="Playing"
                    autoplay
                    :isPlay="playShow"
                    width="100%"
                    height="100%"
                  />
                  <img v-else class="senten_play_icon" :src="`${OSS_URL}/icon/read_play.svg`" />
                </div>

                <div class="item_text">
                  <div class="item_text_conten">
                    <div
                      v-for="(WordItem, wordIndex) in item.sentenceWordVoList"
                      :key="wordIndex"
                      :class="{
                        item_text_conten_item: true,
                        isName: nameList.includes(WordItem.word) && showNext,
                      }"
                      @click="getWordDetail(WordItem, nameList.includes(WordItem.word))"
                    >
                      <!-- <span
                                            :class="{
                                                identifying:
                                                    WordItem.id ===
                                                    curSentenceInfo.CurrentPlayingWordInfo?.id,
                                            }"
                                            >{{ WordItem.word + (WordItem.symbol ?? '') }}</span
                                        > -->
                      {{ WordItem.word + (WordItem.symbol ?? '') }}
                      <!-- {{ WordItem.word }} -->
                    </div>
                  </div>

                  <div v-if="item.istranslate" class="ch_item_text_conten_item">
                    {{ item.znDes }}
                  </div>
                </div>
                <!-- 收藏、切换中英 -->
                <div v-if="showNext" class="right-icon">
                  <div v-if="item.znDes" class="icon" @click.stop="changeTranslate(item)">
                    <img
                      :src="`${OSS_URL}/icon/translate_${item.istranslate ? 'active' : 'nomal'}.svg`"
                      alt=""
                    />
                  </div>
                  <div class="icon" @click.stop="SwitchCollect(item)">
                    <img
                      :src="`${OSS_URL}/icon/collect2_${item.collect ? 'active' : 'nomal'}.svg`"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAudio, XMessage } from '@/hooks'
import SearchWordPup from '@/page/subject/strangeBook/components/SearchWordPup.vue'
import happyReadApi from '@/api/subject/happyRead'
import sentenceCollectApi from '@/api/subject/sentenceCollect'

const props = withDefaults(
  defineProps<{
    needAnswer: boolean
    data: anyObj[]
    showNext: boolean
    characterName: string
  }>(),
  {
    needAnswer: false,
    showNext: false,
    characterName: '',
    data: () => [],
  },
)
const emits = defineEmits(['seeWord', 'open'])
const OSS_URL = `${import.meta.env.VITE_OSS_URL}`

const sliceLine = `url(${OSS_URL}/urm/slice_line_2.svg) 100% / contain no-repeat`
const nameList = computed(() => {
  const byComma = props.characterName.split(',')
  const result = byComma.map(item => item.split(' ')).flat()
  return result
})
const instance = getCurrentInstance() // 获取组件实例

// 句子数量
const sentencenum = computed(() => {
  let num = 0
  // if (store.BookInformation.newVoiceList.sentenceList.length === 0) {
  //     num = 0;
  // } else {
  //     num = store.BookInformation.newVoiceList.sentenceList.length;
  // }
  return num
})
// 自动翻页

const playLoading = ref(false) // 加载loading
const playShow = ref(false) // 播放状态

// 当前播放句子信息
const curSentenceInfo = ref<anyObj>({
  data: {
    id: '',
  },
  CurrentPlayingWordInfo: {
    id: '',
  },
})
// 点击播放按钮
function playSound(e: anyObj) {
  if (!e.enUrl) return XMessage.error('暂无音频')

  curSentenceInfo.value.data = e
  console.log('播放')

  useAudio({
    url: e.enUrl,
    onEnded() {
      if (e.istranslate && e.znUrl) {
        useAudio({
          url: e.znUrl,
          onEnded() {
            clearData()
          },
          onError,
        })
      } else {
        clearData()
      }
    },
    onError,
  })
}

function onError() {
  console.log('音频播放错误')
  clearData()
}

function clearData() {
  curSentenceInfo.value = {
    data: {
      id: '',
    },
    CurrentPlayingWordInfo: {
      id: '',
    },
  }
  useAudio({
    url: '',
    autoplay: false,
  })
}

// 双语切换
function changeTranslate(item: anyObj) {
  item.istranslate = !item.istranslate
}
// 查看单词详情 或者查看是否是做题
async function getWordDetail(word: anyObj, isName: boolean) {
  if (!props.showNext || isName) return
  emits('seeWord', {
    id: word.id,
    word: word.word,
  })
  // if (word.wordId && word.meaningId) {
  //     const res = await getTestOrWordDetail({
  //         originalWordId: word.wordId,
  //         originalMeaningId: word.meaningId,
  //     });
  //     if (res.data.data) return emits('open', res.data.data[0]);
  // }
  // searchWord.value.id = word.id;
  // searchWord.value.word = word.word;
  // showPop.value = true;
}

// 收藏/取消收藏
function SwitchCollect(item: anyObj) {
  console.log('item', item)

  if (item.collect) {
    sentenceCollectApi
      .cancelCollectSentence({
        sentenceId: [item.id],
        sourceType: 2,
      })
      .then((res: any) => {})
  } else {
    sentenceCollectApi
      .collectSentence({
        sentenceId: [item.id],
        sourceType: 2,
      })
      .then((res: any) => {})
  }
  item.collect = !item.collect
}

defineExpose({
  clearData,
})
onMounted(() => {
  //
})
</script>

<style scoped lang="scss">
.info-content {
  height: 100%;
  display: flex;
  width: 100%;
  flex-direction: column;
  padding: 2.67vh 0 0 40px;
  box-sizing: border-box;
  position: relative;
  z-index: 0;

  .sentence-content {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;

    .titile {
      display: flex;
      color: $font-color;
      font-size: 2.33vh;
      line-height: 3.5vh;
      font-family: $font-special;
      align-items: center;

      .num {
        align-self: flex-end;
        font-size: 1.67vh;
        line-height: 2.17vh;
        color: #666680;
        padding-left: 5px;
      }
    }
    .scroll-cont {
      display: flex;
      overflow: auto;
      padding-right: 20px;

      &::-webkit-scrollbar {
        width: 8px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 0.33vh;
        background: #fff78c;
      }

      &::-webkit-scrollbar-track {
        border-radius: 0.5vh;
        background: rgba(0, 0, 0, 0.05);
      }

      .scroll-list {
        width: 100%;

        .list {
          width: 100%;
          // height: 100%;

          .item {
            width: 100%;
            padding: 0.92vh 16px;
            display: flex;
            flex-direction: row;
            // align-items: ;
            box-sizing: border-box;

            .senten_play {
              display: flex;
              flex-shrink: 0;
              width: 4vh;
              height: 4vh;

              // align-items: center;
              .senten_play_icon {
                width: 100%;
                height: 100%;
              }
            }

            .item_text {
              display: flex;
              flex-direction: column;
              justify-content: center;
              width: 100%;
            }

            .item_text_conten {
              display: flex;
              flex: 1;
              font-size: 2.33vh;
              margin-left: 8.013px;
              flex-wrap: wrap;
              justify-content: flex-start;

              .item_text_conten_item {
                margin: 0.41vh;
                display: flex;
                align-items: center;
                color: #666;
                // height: 100%;
                &.isName {
                  font-weight: 600;
                  font-style: italic;
                }
              }

              .identifying {
                color: rgba(153, 214, 9, 1);
                text-decoration: underline;
                // font-size: 19.994px;
              }
            }

            .ch_item_text_conten_item {
              margin: 0.41vh 12.8px;
              display: flex;
              align-items: center;
              font-size: 1.67vh;
              color: rgba(0, 0, 0, 0.65);
            }

            .right-icon {
              display: flex;
              .icon {
                width: 48px;
                height: 4vh;
                line-height: 4vh;

                img {
                  width: 100%;
                  height: 100%;
                }
                &:first-child {
                  margin-right: 16px;
                }
              }
            }
          }

          .item_play {
            width: 100%;
            padding: 0.92vh 16px;
            display: flex;
            flex-direction: row;
            // align-items: center;
            box-sizing: border-box;
            background-color: #fff78ca6;

            border-radius: 0.83vh;
            font-weight: 600;
            .item_text_conten {
              .item_text_conten_item {
                color: $font-color;
                &.isName {
                  color: $font-color;
                }
              }
            }
          }
          .paragraph {
            .slice-line {
              width: 688px;
              height: 4.83vh;
              margin: 1vh 0;
              margin-left: auto;
              background-position: center;
              .text {
                width: 195px;
                height: 4.83vh;
                line-height: 4.83vh;
                text-align: center;
                margin: 0 auto;
                font-size: 2.67vh;
                background-color: #d6f2ff;
                font-family: Droid Serif;
                font-size: 2.33vh;
                font-weight: 400;
                color: $font-color;
                border-radius: 0.83vh;
              }
            }
          }
        }
      }
    }
  }
}
.needAnswer {
  padding: 0;
  .scroll-list {
    padding: 0 !important;
  }
  .item_text {
    // max-width: 560px;
  }
  .right-icon {
    margin-left: 10px;
    justify-items: flex-end;
    flex: 1;
    justify-content: flex-end;
  }
}
</style>
