<script setup lang="ts">
import { computed, onMounted } from 'vue'
import Config from '@/config'
import {throttle} from 'throttle-debounce'
import {useUserStore} from '@/store'

const {t} = useI18n()
const userStore = useUserStore()

const props = withDefaults(
    defineProps<{
      modelValue?: string
      disabled?: boolean
      focus?: boolean
      placeholder?: string
      /** 搜索落地页：右侧圆形购物车，与返回键对称 */
      trailingCart?: boolean
      /** trailingCart 为 true 时：gray=搜索首页浅底；white=结果页白底（与设计稿一致） */
      trailingSurface?: 'gray' | 'white'
    }>(),
    {
      modelValue: '',
      disabled: false,
      focus: false,
      trailingCart: false,
      trailingSurface: 'gray',
    },
)

const emits = defineEmits<{
  'update:modelValue': [value: string]
  search: []
}>()


function search() {
  emits('search')
}

const handleSearch = throttle(Config.throttleTime, search)

function handleInputUpdateModelValue(value: string) {
  console.log(value)
  emits('update:modelValue', value)
}

function handleClickLeft() {
  uni.navigateBack()
}

function goCart() {
  if (userStore.checkLogin()) {
    uni.navigateTo({ url: '/pages-user/pages/cart/index' })
  }
}

const cartBadgeTotal = computed(() => {
  const list = userStore.userCartAllData
  if (!Array.isArray(list) || list.length === 0) return 0
  let n = 0
  for (const m of list) {
    n += (m as { merchantCartVoList?: unknown[] })?.merchantCartVoList?.length || 0
  }
  return n
})

onMounted(() => {
  if (props.trailingCart) {
    userStore.getUserCartAllData()
  }
})

const headerRootClass = computed(() => {
  if (!props.trailingCart) return 'header-search header-search--default'
  return props.trailingSurface === 'white'
    ? 'header-search header-search--trailing-white'
    : 'header-search header-search--landing'
})

defineOptions({
  name: 'HeaderSearch',

})
</script>
<template>
  <view
      :class="headerRootClass"
  >
    <status-bar/>
    <view
      v-if="trailingCart"
      class="header-search__row header-search__row--triple px-24rpx pt-8rpx pb-12rpx"
    >
      <view
        class="header-search__round-btn center shrink-0"
        :class="trailingSurface === 'white' ? 'header-search__round-btn--muted' : ''"
        @click="handleClickLeft"
      >
        <view class="i-carbon:chevron-left text-34rpx text-#14181b"></view>
      </view>
      <view class="header-search__pill flex-1 min-w-0 h-80rpx flex items-center px-28rpx">
        <image src="@img/chef/100222.png" class="w-28rpx h-28rpx mr-14rpx shrink-0"></image>
        <wd-input
            no-border
            clearable
            :focus-when-clear="false"
            :disabled="disabled"
            :focus="focus"
            confirm-type="search"
            custom-class="flex items-center !text-28rpx !bg-transparent flex-1 min-w-0"
            placeholderStyle="font-size: 28rpx;color: #999999; font-weight: 500;"
            :modelValue="modelValue"
            :placeholder="placeholder || t('common.prompt.please-enter-keyword-search')"
            @update:modelValue="handleInputUpdateModelValue"
            @confirm="handleSearch"
        >
        </wd-input>
      </view>
      <view
        class="header-search__round-btn header-search__round-btn--cart center shrink-0"
        :class="trailingSurface === 'white' ? 'header-search__round-btn--muted' : ''"
        @click="goCart"
      >
        <view class="i-carbon:shopping-cart text-34rpx text-#14181b"></view>
        <view
          v-if="userStore.isLogin && cartBadgeTotal > 0"
          class="header-search__cart-badge"
          >{{ cartBadgeTotal > 99 ? '99+' : cartBadgeTotal }}</view
        >
      </view>
    </view>
    <view v-else class="flex-center-sb px-30rpx h-88rpx">
      <view class="shrink-0" @click="handleClickLeft">
        <view class="i-fluent:ios-arrow-ltr-24-filled  text-36rpx text-#333"></view>
      </view>
      <view
          class="px-36rpx w-626rpx h-88rpx flex items-center bg-common rounded-44rpx "
      >
        <image src="@img/chef/100222.png" class="w-28rpx h-28rpx mr-18rpx"></image>
        <wd-input
            no-border
            clearable
            :focus-when-clear="false"
            :disabled="disabled"
            :focus="focus"
            confirm-type="search"
            use-prefix-slot
            custom-class="flex items-center !text-30rpx !bg-transparent flex-1"
            placeholderStyle="font-size: 30rpx;color: #6D6D6D; font-weight: 500;"
            :modelValue="modelValue"
            :placeholder="placeholder || t('common.prompt.please-enter-keyword-search')"
            @update:modelValue="handleInputUpdateModelValue"
            @confirm="handleSearch"
        >
        </wd-input>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.header-search--landing {
  background: #f7f8fa;
}
.header-search--trailing-white {
  background: #fff;
}
.header-search--default {
  position: relative;
  z-index: 1;
  background: #fff;
}
.header-search__row--triple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}
.header-search__round-btn {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}
.header-search__round-btn--muted {
  background: #f0f0f0;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.header-search__round-btn--cart {
  position: relative;
}
.header-search__cart-badge {
  position: absolute;
  top: 6rpx;
  right: 6rpx;
  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;
}
.header-search__pill {
  background: #f2f2f2;
  border-radius: 999rpx;
}
:deep(.wd-input__clear) {
  background: transparent !important;
}
</style>
