<template>
  <div class="top_box">
    <div class="back_box">
      <BackBar :leftText="title ?? '词典'"></BackBar>
    </div>
    <div class="search">
      <input
        v-model="keyWord"
        type="text"
        class="input"
        placeholder="请输入你要查的中文或英文"
        @input="onKeyInput"
        @confirm="onKeyConfirm"
        @focus="onFocus"
        @keydown.enter="onKeyConfirm"
      />
      <Icon name="search" size="40" class="searchIcon" @click="tapSearchBtn"></Icon>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue?: string
  path?: string
  title: string
}>()
const emits = defineEmits(['tapSearch', 'onSearchInput', 'onConfirmInput', 'onFocus', 'onBlur'])

const timer = ref<any>(null)
const keyWord = ref<string>()

const debounceFn = (Callback: (item?: any) => void, delay = 600) => {
  if (timer.value) clearTimeout(timer.value)
  timer.value = setTimeout(() => {
    Callback()
  }, delay)
}

function tapSearchBtn() {
  emits('tapSearch', keyWord.value)
}
function onKeyInput() {
  debounceFn(() => {
    emits('onSearchInput', keyWord.value)
  })
}
function onKeyConfirm() {
  emits('onConfirmInput', keyWord.value)
}
function onFocus(val?: any) {
  emits('onFocus', keyWord.value)
}

defineExpose({
  clearkeyWord: () => {
    keyWord.value = ''
  },
})

watch(
  () => props.modelValue,
  () => {
    keyWord.value = props.modelValue
  },
  {
    deep: true,
    immediate: true,
  },
)
</script>

<style lang="scss" scoped>
.top_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .back_box {
    display: flex;
    align-items: center;

    .back-btn {
      width: 6.67vh;
      height: 6.67vh;
      // background-image: url('~@/static/unity/back_btn.png');
      background-repeat: no-repeat;
      background-size: cover;
      cursor: pointer;
      margin-right: 24px;
    }
    .back_title {
      text-align: center;
      font-family: $font-special;
      font-size: 4vh;
      font-style: normal;
      font-weight: 400;
      line-height: 4vh;
      position: relative;
      z-index: 2;
      color: #fff;
      text-shadow: 0 0.45vh 0.45vh rgba(0, 0, 0, 0.2);
      .bgc_text {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        -webkit-text-stroke-width: 8px;
        z-index: -1;
        -webkit-text-stroke-color: $font-color;
      }
    }
  }
  .search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 792px;
    height: 6.67vh;
    background-color: rgba(0, 0, 0, 0.35);
    border: 0.33vh solid rgba(255, 255, 255, 0.85);
    border-radius: 3.33vh;
    padding: 1.67vh 40px;
    box-sizing: border-box;
    .input {
      width: 600px;
      color: #ccc;
      font-family: 'Alibaba Health Font 2.0 CN';
      font-size: 2.33vh;
      font-style: normal;
      font-weight: 300;
      line-height: 3.5vh; /* 150% */
      background: none;
      &::-webkit-input-placeholder,
      &::placeholder {
        color: #ccc;
        font-family: 'Alibaba Health Font 2.0 CN';
        font-size: 2.33vh;
        font-style: normal;
        font-weight: 300;
        line-height: 3.5vh; /* 150% */
      }
    }
    .searchIcon {
      pointer-events: auto;
      height: 3.33vh;
      width: 40px;
      cursor: pointer;
    }
  }
}
</style>
