<template>
  <div>
    <header class="h-90px">
      <div class="mx-a h-full flex items-center justify-center">
        <!-- 搜索区域 -->
        <div class="relative w-647px px4 p-r-0px!">
          <div class="search-input relative w-100%">
            <el-input
              v-model="searchQuery"
              type="text"
              placeholder="搜一搜"
              :prefix-icon="Search"
              class="no-right-border box-border h40 w-100% rounded-bl-4px rounded-br-0px rounded-tl-4px rounded-tr-0px bg-[#F8F8F8] text-14px outline-#999"
              @keyup.enter="search"
            />
          </div>
        </div>
        <!-- 按钮区域 -->
        <div class="flex items-center">
          <button
            class="h-40px w-111px cursor-pointer border-width-1px border-color-#1A65FF rounded-bl-0px rounded-br-4px rounded-tl-0px rounded-tr-4px border-none border-solid text-center text-14px color-#fff bg-#1A65FF!"
            @click="search"
          >
            搜索
          </button>
          <button
            class="m-l-16px h-40px w-111px cursor-pointer border-width-1px border-color-#E7B03B rounded-bl-6px rounded-br-6px rounded-tl-4px rounded-tr-6px border-none border-solid text-14px color-#fff bg-#E7B03B!"
            @click="handleUpload"
          >
            上传工具
          </button>
        </div>
      </div>
    </header>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { Search } from '@element-plus/icons-vue'
  import useUserStore from '~/store/user'
  const userStore = useUserStore()

  const emits = defineEmits(['search'])

  const searchQuery = ref('')

  const handleUpload = () => {
    // 是否登录
    if (!userStore.token) return ElMessage.error('请先登录')
    // 新开窗口 用router跳转 新窗口打开
    navigateTo('/toolbox-publish')
  }

  const search = () => {
    emits('search', searchQuery.value)
  }
</script>
<style scoped>
  .no-right-border :deep(.el-input__wrapper) {
    border-right: none !important;
    /* box-shadow: -1px 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset !important; */
  }

  /* 如果需要调整右侧圆角，可以添加 */
  .no-right-border :deep(.el-input__wrapper) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
</style>
