<template>
  <div class="search_pup">
    <div class="back_box" @click="navigateBack">
      <!-- <div class="icon"></div> -->
      <Icon class="icon" name="double_arrow_down" size="32"></Icon>
      <div class="title">下拉</div>
    </div>
    <div class="content_box">
      <WordUnderstand :id="getWordId" :searchKey="keyWords"></WordUnderstand>
    </div>
    <!-- <img src="@/static/unity/circle_hert.png" alt="" /> -->
  </div>
</template>
<script setup lang="ts">
import WordUnderstand from '../../wordDetails/details/wordUnderstand.vue'

const props = defineProps<{
  wordId: string
  wordSpell: string
  closed?: boolean
}>()
const emit = defineEmits(['tapDown'])
const getWordId = ref('')
const keyWords = ref('')

function navigateBack() {
  emit('tapDown')
  // if (props.closed) window.location.href = 'uniwebview://slideDown?falag=1';
}

onMounted(() => {
  if (props.wordId) {
    getWordId.value = props.wordId
    keyWords.value = props.wordSpell
  }
})
</script>
<!-- <style lang="scss">
page {
    @include main_bg;
}
</style> -->
<style scoped lang="scss">
.search_pup {
  box-sizing: border-box;
  background: linear-gradient(171.53deg, #fcfdf9 1.46%, #dfebf8 25.39%);
  border-radius: 3.33vh 3.33vh 0 0;
  position: relative;
  z-index: 0;

  .back_box {
    position: absolute;
    top: 0;
    z-index: 999;
    cursor: pointer;
    left: 50%;
    transform: translateX(-50%);
    width: 202px;
    height: 7.58vh;
    background-color: #8a94fd;
    color: white;
    font-family: $font-special;
    font-size: 3vh;
    font-weight: 400;
    line-height: 6vh;
    text-align: left;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 1.67vh 1.67vh;
    box-shadow:
      2px 2px 5px rgba(0, 0, 0, 0.2),
      -2px 2px 5px rgba(0, 0, 0, 0.2);
    .icon {
      margin-right: 10px;
    }
  }
  :deep(.content_box) {
    height: 100%;
    overflow: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    .word_understand {
      padding-top: 0;
      padding-bottom: 0;
      margin: 0 auto;
      overflow: auto;
      height: 100vh;
      background-image: none;
      width: 100%;
      padding: 0;
      .word_understand_content {
        padding: 5vh 225px 0;
      }
    }
    .word_gist_skeleton {
      background-image: none;
    }
  }
  img {
    position: absolute;
    z-index: -1;
    top: 8.33vh;
    right: 100px;
    height: 40vh;
    width: 480px;
  }
}
</style>
