<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

defineProps<{
  appName: string
  locationText: string
  cartBadgeTotal?: number
  isLogin?: boolean
}>()

const emit = defineEmits<{
  (e: 'clickLocation'): void
  (e: 'clickCart'): void
}>()

const noticeTexts = computed(() => [
  t('pages.home.noticeBar.thursday'),
  t('pages.home.noticeBar.sunday'),
  t('pages.home.noticeBar.freshCatch'),
])

/** 横向无缝滚动：多条拼接为一条，重复一遍避免循环时跳变 */
const noticeScrollText = computed(() => {
  const items = noticeTexts.value.filter(Boolean)
  if (!items.length) return ''
  const once = items.join('　　')
  return `${once}　　${once}`
})
</script>

<template>
  <view class="home-top-header px-24rpx pt-12rpx pb-8rpx">
    <view class="home-top-header__toolbar flex items-center justify-between gap-12rpx">
      <view class="flex items-center gap-14rpx min-w-0 flex-1">
        <image
          src="@img/logo.png"
          class="w-52rpx h-52rpx shrink-0"
          style="border-radius: 50%"
        />
        <text class="text-32rpx lh-36rpx text-#1a1a1a font-bold tracking-tight line-clamp-1">
          {{ appName }}
        </text>
      </view>
      <view class="flex items-center gap-10rpx shrink-0">
        <view class="home-loc-pill" @click="emit('clickLocation')">
          <text class="home-loc-pill__text line-clamp-1">
            {{ locationText || t('pages.home.default-location') }}
          </text>
          <image
            src="@img/chef/119.png"
            class="home-loc-pill__arrow w-20rpx h-20rpx shrink-0 op-50 mt-2rpx"
          />
        </view>
        <view class="home-cart-btn" @click="emit('clickCart')">
          <view class="i-carbon:shopping-cart text-36rpx text-#14181b" />
          <view
            v-if="isLogin && (cartBadgeTotal || 0) > 0"
            class="home-cart-badge"
          >
            {{ (cartBadgeTotal || 0) > 99 ? '99+' : cartBadgeTotal }}
          </view>
        </view>
      </view>
    </view>

    <view class="home-notice-wrap mt-10rpx">
      <wd-notice-bar
        :text="noticeScrollText"
        :delay="1"
        :speed="60"
        color="#00A76D"
        background-color="transparent"
        custom-class="home-notice-bar"
      />
    </view>
  </view>
</template>

<style scoped lang="scss">
.home-top-header {
  background: #f2f2f2;
}

.home-notice-wrap {
  width: 100%;

  :deep(.home-notice-bar) {
    padding: 0;
    font-size: 26rpx;
    line-height: 32rpx;
    border-radius: 0;
    background: transparent !important;
  }

  :deep(.wd-notice-bar__wrap) {
    height: 32rpx;
    line-height: 32rpx;
    overflow: hidden;
  }

  :deep(.wd-notice-bar__content) {
    font-size: 26rpx;
    line-height: 32rpx;
    white-space: nowrap;
  }
}

.home-loc-pill {
  display: flex;
  align-items: center;
  gap: 8rpx;
  max-width: 200rpx;
  padding: 12rpx 18rpx;
  background: #fff;
  border-radius: 999rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.home-loc-pill__text {
  flex: 1;
  min-width: 0;
  font-size: 22rpx;
  line-height: 28rpx;
  font-weight: 500;
  color: #333;
}

.home-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72rpx;
  height: 72rpx;
  flex-shrink: 0;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.07);
}

.home-cart-badge {
  position: absolute;
  top: 4rpx;
  right: 4rpx;
  min-width: 28rpx;
  height: 28rpx;
  padding: 0 6rpx;
  font-size: 18rpx;
  line-height: 28rpx;
  font-weight: 600;
  color: #fff;
  text-align: center;
  background: #e23636;
  border-radius: 999rpx;
}
</style>
