<script setup lang="ts">
const { t } = useI18n()
import { useUserStore } from '@/store'
const userStore = useUserStore()

const props = defineProps({
  isAutoJump: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits<{
  (e: 'clickSearch'): void
}>()

function handleClickSearch() {
  if(props.isAutoJump) {
    uni.navigateTo({
      url: '/pages/search/index',
    })
  } else {
    emit('clickSearch')
  }
}

function goMessage() {
  if (userStore.checkLogin()) {
    uni.navigateTo({
      url: '/pages-user/pages/message/index',
    })
  }
}
</script>

<template>
  <view class="home-search-row flex items-center gap-14rpx">
    <view
      @click="handleClickSearch"
      class="home-search-bar flex-1 min-w-0 flex items-center h-88rpx rounded-44rpx pl-36rpx pr-28rpx bg-white"
    >
      <image src="@img/chef/100222.png" class="w-28rpx h-28rpx shrink-0"></image>
      <text class="home-search-placeholder text-28rpx ml-16rpx tracking-[.04em] font-500 truncate">{{
        t('components.search.placeholder')
      }}</text>
    </view>
    <view class="home-msg-btn" @click="goMessage">
      <view
        v-if="userStore.isLogin && userStore.unreadMessageCount > 0"
        class="home-msg-badge"
      >
        {{ userStore.unreadMessageCount > 99 ? '99+' : userStore.unreadMessageCount }}
      </view>
      <image src="@img/chef/114.png" class="w-34rpx h-34rpx"></image>
    </view>
  </view>
</template>

<style scoped lang="scss">
.home-search-bar {
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
}
.home-search-placeholder {
  color: #9a9a9a;
}
.home-msg-btn {
  position: relative;
  width: 74rpx;
  height: 74rpx;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.home-msg-badge {
  position: absolute;
  right: -6rpx;
  top: -6rpx;
  min-width: 26rpx;
  height: 26rpx;
  padding: 0 5rpx;
  border-radius: 999rpx;
  background: #E23636;
  color: #fff;
  font-size: 16rpx;
  line-height: 26rpx;
  text-align: center;
  font-weight: 500;
}
</style>