<!-- 机构端 - 搜索页面 -->
<template>
	<view class="page">
		<!-- #ifdef MP-WEIXIN -->
		<view class="detail-navbar">
			<view class="detail-navbar-back" @click="uni.navigateBack()">
				<text class="back-arrow">‹</text>
				<text class="back-text">返回</text>
			</view>
			<text class="detail-navbar-title">搜索</text>
			<view style="width: 120rpx;"></view>
		</view>
		<!-- #endif -->

		<view class="search-bar-row">
			<input
				class="search-input"
				type="text"
				placeholder="搜索商品、订单、用户…"
				:value="keyword"
				@input="onInput"
				@confirm="doSearch"
			/>
			<view class="search-btn" @click="doSearch">
				<text class="search-btn-text">搜索</text>
			</view>
		</view>

		<view class="content" v-if="!searched">
			<text class="tip">输入关键字开始搜索</text>
		</view>
		<view class="content" v-else>
			<text class="tip">暂无搜索结果</text>
		</view>
	</view>
</template>

<script lang="uts">
	export default {
		data() {
			return {
				keyword: '' as string,
				searched: false as boolean
			}
		},
		methods: {
			onInput(e : InputEvent) {
				this.keyword = e.detail.value
			},
			doSearch() {
				if (!this.keyword.trim()) return
				this.searched = true
			}
		}
	}
</script>

<style>
	.page { background-color: #f5f5f5; min-height: 100vh; }
	.detail-navbar { display: flex; flex-direction: row; align-items: flex-end; background-color: #ffffff; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: #eeeeee; box-sizing: border-box; padding-top: var(--status-bar-height); height: calc(88rpx + var(--status-bar-height)); }
	.detail-navbar-back { display: flex; flex-direction: row; align-items: center; padding: 0 30rpx; height: 88rpx; width: 120rpx; }
	.back-arrow { font-size: 44rpx; color: #333333; line-height: 1; margin-right: 4rpx; }
	.back-text { font-size: 28rpx; color: #333333; }
	.detail-navbar-title { flex: 1; text-align: center; font-size: 32rpx; font-weight: 600; color: #1a1a1a; height: 88rpx; line-height: 88rpx; }
	.search-bar-row { display: flex; flex-direction: row; align-items: center; background-color: #ffffff; padding: 20rpx 30rpx; margin-bottom: 20rpx; }
	.search-input { flex: 1; height: 72rpx; background-color: #f5f5f5; border-radius: 36rpx; padding: 0 30rpx; font-size: 28rpx; }
	.search-btn { margin-left: 20rpx; padding: 0 30rpx; height: 72rpx; line-height: 72rpx; background-color: #09C39D; border-radius: 36rpx; }
	.search-btn-text { font-size: 28rpx; color: #ffffff; }
	.content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120rpx 40rpx; }
	.tip { font-size: 28rpx; color: #999; }
</style>
