<template>
 <div class="z-10 sticky top-0 desktop:w-[1440px] desktop:h-[535.5px] desktop:pt-[70px] mobile:w-full mobile:h-[219px] mobile:pt-[25px]" style="top:0px;">
  <div class="flex flex-1 justify-center items-center">
    <img
      :src="iconList.label"
      class="desktop:w-[70px] desktop:h-[40px] mobile:w-[40px] mobile:h-[24px]"
    />
    <span
      class="desktop:text-[50px] mobile:text-[24px] font-semibold text-white ml-[16px]"
      >MetaForce Scan</span
    >
  </div>
  <div
    class="flex flex-1 flex-col w-full justify-center items-center desktop:mt-[68px] mobile:mt-[32px]"
  >
    <div class="flex flex-1 w-full desktop:px-[282px] mobile:px-[20px]">
      <el-input
        v-model="input"
        class="bg-black desktop:h-[65px] desktop:pl-[33px] mobile:h-[40px] mobile:pl-[15.69px] mobile:text-[12px] desktop:rounded-t-[32.5px] overflow-hidden hp-input-wrapper mobile:rounded-t-[20px]"
        :class="
          isActive && data.length > 0
            ? ''
            : 'desktop:rounded-b-[32.5px] mobile:rounded-b-[20px]'
        "
        placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number"
        :prefix-icon="Search"
        :input-style="{ background: '#262626' }"
        @focus="handleFocus"
        @blur="handleBlur"
        @input="handleChangeInput"
        @keydown="handleEnter"
      />
    </div>
    <div
      class="h-[78px] w-full desktop:px-[282px] mobile:px-[20px] z-[9]"
      :class="isActive && data.length > 0 ? '' : 'hidden'"
    >
      <div
        class="bg-black-262626 desktop:px-[32px] desktop:py-[20px] mobile:px-[20px] mobile:py-[10px] hover:bg-gray-323232 border-t-[1px] border-black-3B3B3C cursor-pointer break-all"
        v-for="(item, index) in data"
        :key="index + item?.hash"
        :class="
          index === data.length - 1
            ? 'desktop:rounded-b-[32.5px] mobile:rounded-b-[20px] border-b-[0px]'
            : 'border-b-[1px]'
        "
        @click="handleClick(item)"
      >
        <span class="text-blue-65B5FF mobile:text-[14px]">{{
          item?.info || '-'
        }}</span>
      </div>
    </div>
  </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { getSearch } from '@src/api/BlockController'
import { Throttle } from '@src/utils/throttle'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import * as iconList from '../assets/Icons/index'

const router = useRouter()

let input = ref<string>('')
let isActive = ref(false)
// let isBg = ref(false)
const data = ref<any>([])

const handleFocus = () => (isActive.value = true)
const handleBlur = () =>
  setTimeout(() => {
    isActive.value = false
  }, 150)
// 按下了enter / 失去焦点
const handleEnter = (e: any) => {
  if (e.keyCode === 13 && data.value.length != 0) {
    console.log(data)
    handleClick(data.value[0])
  }
}
// 点击了
const handleClick = (item: any) => {
  // 根据type判断需要跳转到哪个页面
  let route = ''
  switch (item?.type) {
    case 1: {
      route = 'blocks'
      break
    }
    case 2: {
      route = 'tx'
      break
    }
    case 3: {
      route = 'tokens'
      break
    }
    case 4: {
      route = 'BitcNFt'
    }
  }
  // 跳转
  if (item?.type == 4) {
    router.replace(`/${route}/${item?.hash}`)
    return
  }
  router.replace(`/${route}/${item.info}`)
}
// 修改input
const handleChangeInput = () => {
  Throttle(searchRequest, 1000)()
}
// 请求的函数
const searchRequest = async () => {
  try {
    const res = await getSearch(input.value)
    data.value = res.data
    // if (data) {
    // handleClick(data.value[0])
    // }
  } catch (error) {}
}



</script>

<style scoped>

</style>
