<template>
  <div class="word-details-page">
    <div v-show="showBox" class="mask" @click="demo"></div>
    <div class="word_search">
      <TopSearch
        v-model="searchKey"
        title="词典"
        @tapSearch="tapSearch"
        @onSearchInput="onSearchInput"
        @onConfirmInput="onConfirmInput"
        @onFocus="onFocus"
      >
      </TopSearch>
      <div v-show="showBox" :class="['search-box', 'search-box-empty']">
        <seekWords
          ref="searchRef"
          :showStatistics="false"
          isPopUp
          @selectedWord="selectedWord"
          @searchEmpty="searchEmpty"
        >
        </seekWords>
      </div>
    </div>
    <div class="word-details-container">
      <wordUnderstand
        :id="getWordId"
        :searchKey="keyWords"
        @updateSpell="updateSpell"
        @searchEmpty="searchEmpty"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue'
import wordUnderstand from './details/wordUnderstand.vue'
import TopSearch from '../dictionaries/components/TopSearch.vue'
import wordDetailApi from '@/api/subject/wordDetail'

// import { useCheckDictStore } from '@/store/wordDetail/useWordDetail';
// import { pauseMp3 } from './details/hook';
// import seekWords from '@/pages/dictionaries/seekWords.vue';
import seekWords from '../dictionaries/components/seekWords.vue'
import { useRoute } from 'vue-router'
const route = useRoute()

// import seekWords from '@/pages/unityPages/wordDetails/components/seekWords.vue';
const getWordId = ref() // 单词id
const searchKey = ref<string>('') // 搜索关键字
const showBox = ref(false) // 是否显示下拉
const keyWords = ref<string>('')
const isEmpty = ref(false)
const searchRef = ref<{
  tapSearch: (data: any) => void
  onSearchInput: (data: any) => void
  onConfirmInput: (data: any) => void
  resetCurr: (data: any) => void
}>() // 搜索组件中的函数
const searchInputRef = ref<{
  handlefocus: (data?: any) => void
}>()
const checkMore = ref(false)
// const checkDictStore = useCheckDictStore();

function demo() {
  showBox.value = false
}
const tapSearch = (val: any) => {
  searchKey.value = val.value
  keyWords.value = val.value
  setTimeout(() => {
    searchRef.value?.tapSearch(val)
  }, 600)
}

// 同步搜索框的关键字
const updateSpell = (val: string) => {
  keyWords.value = searchKey.value = val
}

function onSearchInput(val: any) {
  searchKey.value = val.value
  searchRef.value?.onSearchInput(val)
}

// 回车搜搜
const onConfirmInput = (val: any) => {
  isEmpty.value = false
  keyWords.value = searchKey.value = val.value

  nextTick(() => {})

  setTimeout(() => {
    searchRef.value?.onConfirmInput(val)
  }, 600)
}

function onFocus(val: any) {
  // searchRef.value?.resetCurr(val);
  showBox.value = true
}

function searchEmpty() {
  isEmpty.value = true
  showBox.value = false
}

function selectedWord(value: { id: any; spell: string }) {
  isEmpty.value = false
  getWordId.value = value.id
  keyWords.value = searchKey.value = value.spell
  showBox.value = false
}
defineOptions({
  name: 'WordDetails',
})

onMounted(() => {
  if (route.query) {
    getWordId.value = route.query?.id
    keyWords.value = searchKey.value = route.query?.spell as string
  }
})
</script>
<style lang="scss" scoped>
.word-details-page {
  @include main_bg;
  position: relative;
  padding: 3vh 64px 0;
  box-sizing: border-box;
  height: 100%;

  .mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
  }

  .gray {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .empty2 {
    display: flex;
    justify-content: center;
    margin-top: 5.33vh;
    text-align: center;
    min-height: 43.33vh;

    image {
      width: 25vh;
      height: 20.75vh;
    }
  }

  .word_search {
    position: relative;

    :deep(.search-box) {
      padding: 1.67vh;
      position: absolute;
      top: 7.5vh;
      right: 0;
      width: 792px;
      height: 29.5vh;
      background-image: linear-gradient(179deg, #fdfdf9 0.78%, #dfebf7 99.53%);
      overflow: scroll;
      z-index: 99;
      border: 0.33vh solid #fff;
      box-sizing: border-box;
      filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
      border-radius: 3.33vh;
      :deep(.result_words) {
        height: 25vh;
      }

      &::-webkit-scrollbar {
        display: none;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        background: transparent;
        color: transparent;
      }

      &.search-box-empty {
        // padding: 24px 56px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .words_data {
        height: 25vh;
        width: 100%;
        align-items: flex-start;
        div[name='empty'] {
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .word {
          .english {
            flex-shrink: 0;
            min-width: 400px;
          }
        }
      }
    }
  }

  .word-details-container {
    // padding: 72px 80px 80px;
    box-sizing: border-box;
    width: 1728px;
    margin: 0 auto;
    // border: 4px solid #d9d163;
    // background-color:#fffef5;
    border-radius: 3.33vh;
    position: relative;
  }
}
</style>
