<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
// import { showToast } from 'vant'

const { t } = useI18n()
const searchValue = ref('')
// const onSearch = () => {}
// const onCancel = () => showToast('取消')
const goUser = () => {
  uni.switchTab({
    url: '/pages/user/user'
  })
}

const goPage = () => {
  uni.navigateTo({
    url: '/subPackages/search/search'
  })
}
</script>

<template>
  <view class="nav-box">
    <image src="/static/image/user/touxiang.png" style="width: 1.7813rem; height: 1.7813rem; margin-right: 0.625rem; border-radius: 1.25rem"></image>
    <view class="input_wrap">
      <image src="/static/image/searchNavigation/search.png" class="search-img" />
      <input v-model="searchValue" cursor-color="#b3b3b3" :placeholder="t('search.tip3')" style="margin-left: 10px" @click="goPage" />
    </view>
    <image src="/static/image/searchNavigation/set.png" class="set-box" @click="goUser" />
  </view>
</template>

<style lang="scss" scoped>
// input::-webkit-input-placeholder {
//   /* placeholder颜色 */
//   // color: #aab2bd;
//   /* placeholder字体大小 */
//   font-size: 0.75rem !important;
// }
.uni-input-placeholder {
  font-size: 0.75rem !important;
}
.nav-box {
  top: 0;
  left: 0;
  width: 100%;
  height: 3.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  .input_wrap {
    display: flex;
    align-items: center;
    width: 16.7188rem;
    height: 1.8125rem;
    border-radius: 1.25rem;
    // border: 0.0625rem solid #46abef;
    background-color: #08182b;
  }

  .search-img {
    margin-left: 0.44rem;
    width: 0.875rem;
    height: 0.875rem;
  }

  ::v-deep.uni-input-input {
    color: #b3b3b3 !important;
    font-size: 0.75rem !important;
  }

  uni-input {
    flex: 1;
  }

  .set-box {
    width: 1.3125rem;
    height: 1.1875rem;
    margin-left: 0.5938rem;
  }
}
</style>
