<template>
  <div ref="searhBox" class="py-10 px-40 md:px-4 search-box " round>
    <!-- <img class="h-[50px] mb-4 mx-auto" height="30" :src="img" alt=""> -->
    <div class="relative">
      <!-- <n-select size="large" round class="w-[13%] md:w-[40%]" @change="updateEngine" v-model:value="engine" :options="selectOptions" /> -->
      <n-input size="large" placeholder="探索世界吧！" ref="input" round class="w-full" v-model:value="searchValue" clearable
        @keyup.enter="toSearch(0)" @focus="inputFocus" @blur="inputBlur" @keydown.arrow-down.prevent="select" />
      <!-- <n-button size="large" round class="w-[15%] md:w-[30%]" type="primary" @click="toSearch">搜索</n-button> -->
      <ul ref="mos" v-show="smodel" tabindex="2" @blur="ulBlur"
        class="absolute left-0 bg-[#FAEEFB] z-50 !rounded-2xl overflow-hidden py-2">
        <li ref="item" tabindex="1" v-for="(s, i) in selectOptions" class="sop" @keyup.enter="toSearch(i)"
          @blur="itemBlur" @keydown.arrow-down.prevent="downSelect(i)" @keydown.arrow-up.prevent="upSelect(i)"
          @click="toSearch(i)">
          <div><span class="text-[#409eff]">{{ s.label }}: </span>{{ searchValue }}</div>
        </li>
      </ul>
    </div>

  </div>
</template>

<script setup>
//mark import

import { usesizeStore } from "@/stores/size.js";
import { onMounted } from 'vue';
//mark data
const size = usesizeStore()
const searchValue = ref('')
const selectOptions = [
  { label: '必应', value: 'https://cn.bing.com/search?q=' },
  { label: '谷歌', value: 'https://www.google.com/search?q=' },
  { label: '百度', value: 'https://www.baidu.com/s?wd=' },
  { label: '翻译', value: 'https://translate.volcengine.com?text=' }
]

const smodel = ref(false)
const input = ref(null)
const mos = ref(null)
const inWidth = ref(0)
const inHeight = ref(0)
const item = ref(null)
const searhBox = ref(null)
//mark method
// https://cn.bing.com/search?q=111
function toSearch(i) {
  console.log(666666);
  if (!searchValue.value) return
  // if (i == 3) {
  //   $msg.info('翻译功能正在开发中')
  //   return
  // }

  window.open(selectOptions[i].value + searchValue.value, "_blank")
}

function inputFocus() {
  smodel.value = true  
}
function inputBlur(e) {

  if (e.relatedTarget) return
  setTimeout(() => {
    smodel.value = false
  }, 200);

}
function ulBlur() {
  console.log("*******");

  smodel.value = false
}

function itemBlur(e) {
  if (!e.relatedTarget) {
    setTimeout(() => {
      smodel.value = false
    }, 200);
  }
}

function select() {
  // 聚焦item0
  //  console.log(item.value[0]);
  item.value[1].focus()
}
function downSelect(i) {

  if (i == selectOptions.length - 1) item.value[0].focus()
  else item.value[i + 1].focus()
}

function upSelect(i) {
  if (i == 0) item.value[selectOptions.length - 1].focus()
  else item.value[i - 1].focus()
}
//mark 周期、内置函数等

onMounted(() => {
  inWidth.value = input.value.$el.offsetWidth
  inHeight.value = input.value.$el.offsetHeight
  mos.value.style.width = inWidth.value + 'px'
  mos.value.style.top = inHeight.value + 'px'
  const h = searhBox.value.offsetHeight
  size.setSearchH(h)
  
})
</script>

<style scoped lang="less">
.search-box {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.sop {
  padding: 4px 10px;
  transition: all 0.4s ease-in-out;
  outline: none;
}

.sop:hover,
.sop:focus {
  padding: 4px 20px;
  background: #f2e8fc;
  /* padding: 2px 0 2px 4px; */

}

.sop:focus span {
  color: @purple !important;
}

.sop:hover span {
  color: @orange !important;
}
</style>
<style>
.n-input-group>*:not(:first-child) {
  margin-left: unset !important;
  border-top-left-radius: 1rem !important;
  border-bottom-left-radius: 1rem !important;
}
</style>