<template>
  <div class="dictionaries">
    <div class="search_box">
      <TopSearch
        title="词典"
        @tapSearch="tapSearch"
        @onSearchInput="onSearchInput"
        @onConfirmInput="onConfirmInput"
      >
      </TopSearch>
    </div>

    <div
      class="book"
      :style="{
        'background-image': `url(${OSS_URL}/urm/dictionaries_box.svg)`,
      }"
    >
      <div class="seek_words">
        <seekWords ref="seekWordRef" @selectedWord="selectedWord"></seekWords>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

import seekWords from './components/seekWords.vue'
import TopSearch from './components/TopSearch.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const OSS_URL = import.meta.env.VITE_OSS_URL

const keyWord = ref<string>('')
const seekWordRef = ref<{
  tapSearch: (data: any) => void
  onSearchInput: (data: any) => void
  onConfirmInput: (data: any) => void
}>()
function selectedWord(value: { id: any; spell: string }) {
  // uni.navigateTo({
  //     url: `/pages/unityPages/wordDetails/index?id=${value.id}&spell=${value.spell}`,
  // });
  router.push(`/subject/wordDetails?id=${value.id}&spell=${value.spell}`)
}

// 搜索
function tapSearch(val: any) {
  keyWord.value = val.value
  onConfirmInput(val)
}
function onSearchInput(val: any) {
  keyWord.value = val.value
  seekWordRef.value?.onSearchInput(val)
}
async function onConfirmInput(val: any) {
  keyWord.value = val.value
  seekWordRef.value?.onConfirmInput(val)
}
defineOptions({
  name: 'WordDictionaries',
})
</script>
<style scoped lang="scss">
.dictionaries {
  @include main_bg;

  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  .search_box {
    padding: 3vh 64px 0;
  }
  .book {
    position: relative;
    width: 144vh;
    height: 90vh;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: contain;
    .back_icon {
      cursor: pointer;
      position: absolute;
      top: -5.17vh;
      left: -60.006px;
      width: 120.013px;
      height: 10vh;
    }

    .seek_words {
      height: 100%;
      padding: 11vh 128px 8.33vh;
      box-sizing: border-box;
    }
  }
}
</style>
