<template>
	<view class="page-shop-search">
		<view class="search-header">
			<u-icon name="arrow-left" size="20" color="#333" @click="onBack" />
			<view class="search-header__input-wrap">
				<u-icon name="search" color="#999" size="18" />
				<input
					class="search-header__input"
					v-model="keyword"
					:placeholder="placeholder"
					confirm-type="search"
					:focus="inputFocus"
					@confirm="onSubmit"
				/>
				<u-icon
					v-if="keyword"
					name="close-circle-fill"
					color="#ccc"
					size="18"
					@click="keyword = ''"
				/>
			</view>
			<text class="search-header__btn" @click="onSubmit">搜索</text>
		</view>

		<text class="search-tip">仅搜索本店出售中商品</text>

		<shop-goods-block
			v-if="searched"
			:shop-id="shopId"
			:keyword="searchKeyword"
			:scroll-height="scrollHeight"
			:scroll-top-key="scrollKey"
			empty-text="暂无相关"
			@goods-click="onGoodsClick"
		/>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { SHOP_SEARCH_PLACEHOLDER } from '@/constants/shop'
import { goGoodsDetail } from '@/utils/goodsDetail'
import { smartNavigateBack } from '@/utils/navBack'
import ShopGoodsBlock from '@/components/shop/ShopGoodsBlock.vue'
import { useActionGuard } from '@/utils/actionGuard'

const searchGuard = useActionGuard()

const shopId = ref('')
const keyword = ref('')
const searchKeyword = ref('')
const searched = ref(false)
const scrollKey = ref(0)
const scrollHeight = ref('600px')
const inputFocus = ref(false)
const placeholder = SHOP_SEARCH_PLACEHOLDER

function calcScrollHeight() {
	try {
		const sys = uni.getSystemInfoSync()
		const h = sys.windowHeight || 600
		scrollHeight.value = `${h - 120}px`
	} catch (e) {
		scrollHeight.value = '500px'
	}
}

function onBack() {
	smartNavigateBack()
}

function onSubmit() {
	searchGuard.run(() => {
		const text = (keyword.value || '').trim()
		if (!text) {
			uni.showToast({ title: '请输入搜索内容', icon: 'none' })
			return
		}
		searchKeyword.value = text
		searched.value = true
		scrollKey.value += 1
	})
}

function onGoodsClick(item) {
	if (item && item.goodsId) {
		goGoodsDetail(item.goodsId)
	}
}

onLoad((options) => {
	shopId.value = options.shopId || ''
	calcScrollHeight()
	if (!shopId.value) {
		uni.showToast({ title: '无法打开店铺', icon: 'none' })
		setTimeout(() => onBack(), 500)
		return
	}
	const kw = options.keyword ? decodeURIComponent(options.keyword) : ''
	keyword.value = (kw || '').trim()
	if (keyword.value) {
		onSubmit()
	} else {
		inputFocus.value = true
	}
})
</script>

<style lang="scss" scoped>
.page-shop-search {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #f5f6f8;
}
.search-header {
	display: flex;
	align-items: center;
	padding: 16rpx 24rpx;
	background: #e8f5e9;
}
.search-header__input-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	height: 72rpx;
	margin: 0 16rpx;
	padding: 0 20rpx;
	background: #fff;
	border-radius: 36rpx;
}
.search-header__input {
	flex: 1;
	margin-left: 12rpx;
	font-size: 28rpx;
}
.search-header__btn {
	font-size: 28rpx;
	color: #2e7d32;
	font-weight: 500;
}
.search-tip {
	padding: 16rpx 24rpx;
	font-size: 24rpx;
	color: #999;
}
</style>
