<template>
	<view class="search mg-lr-24">
		<!-- 搜索部分开始 -->
		<view class="input-view light-gray u-f u-f-fdr u-f-aic u-f-fwnw">
			<image class="search-icon" src="../.././static/common/search.png" :mode="'widthFix'"></image>
			<input v-model="searchText" confirm-type="search" class="nav-bar-input" type="text" placeholder="搜索"
				@confirm="handleSearch" />
		</view>
		<!-- 搜索部分结束 -->

		<!-- 历史搜索开始 -->
		<view class="history-search u-f u-f-jcsb" v-if="historyList.length>0">
			<view>
				<view class="common-title fs28">历史搜索</view>
			</view>
			<view class="delete-wrap"><text class="delete"></text></view>
		</view>
		<!-- 历史搜索结束 -->

		<!-- 历史搜索项目开始 -->
		<view class="btn-list mg-top-18 u-f u-f-jcfs" v-if="historyList.length>0">
			<view class="cw-btn-wrap mg-right-20" v-for="(item, index) in historyList" :key="index" @click="onSs(item)">
				<text class="common-white-btn fs26">{{item}}</text>
			</view>
		</view>
		<!-- 历史搜索项目结束 -->
		<view class="mg-bot-20" v-for="(item,index) in list" :key="index">
			<view class="white-bg-wrap mg-bot-20 mg-top-20">
				<view class="u-f u-f-aife u-f-jcsb">
					<view class="u-f u-f-aifs u-f-jcsb" @click="goToDetail(item)">
						<view class="mg-right-10">
							<image class="border-radius-9" style="width: 146rpx;height: 146rpx;" :src="item.storeLogo"
								:mode="'scaleToFill'">
							</image>
						</view>
						<view style="flex: calc(100% - 146rpx)">
							<view class="u-f u-f-fdc u-f-aifs">
								<view class="fs28 fw400 light-black mg-bot-10">{{item.storeName}}</view>
								<view class="u-f mg-bot-26">
									<view v-if="item.score!=0">
										<image v-for="i in item.score" :key="i" src="../.././static/common/star.png"
											style="width: 32rpx;height: 32rpx;">
										</image>
									</view>
									<view v-else>
										<image v-for="i in 5" :key="i" src="../.././static/common/star.png"
											style="width: 32rpx;height: 32rpx;">
										</image>
									</view>
									<view class="star-num fs24">{{item.score === 0 ? 5 : item.score}}分</view>
								</view>
								<view class="u-f u-f-jcsb u-f-aic">
									<view class="u-f u-f-jcfs u-f-aic mg-rgiht-30 fs24 one-line-ellipsis">
										<text class="light-black">{{item.distance}}km | </text>
										<text class="light-gray">{{item.detailedAddress}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '',
				historyList: [],
				list: [],
			}
		},
		onLoad() {
			this.getSearches()
		},
		methods: {
			async getSearches() {
				let res = await this.$http.get('/api/client/index/searches', {}, {
					token: true,
					checkToken: true
				})
				let historyList = res.data.data || []
				this.historyList = historyList
			},
			async handleSearch() {
				let data = {
					"field": this.searchText,
					"lng": this.User.curcity.lng,
					"lat": this.User.curcity.lat
				}

				let res = await this.$http.post('/api/client/index/storeList', data, {
					token: true,
					checkToken: true
				})
				let list = res.data.data.rows || []
				this.list = list
			},
			async onSs(e) {
				let data = {
					"field": e,
					"lng": this.User.curcity.lng,
					"lat": this.User.curcity.lat
				}
				let res = await this.$http.post('/api/client/index/storeList', data, {
					token: true,
					checkToken: true
				})
				let list = res.data.data.rows || []
				this.list = list
			},
			goToDetail(item) {
				console.log("item", item)
				this.User.navigate({
					url: '/pagesC/shop-detail/shop-detail?id=' + item.id
				}, "navigateTo", true);
			}
		}
	}
</script>

<style lang="scss" scoped>
	$nav-height: 68rpx;

	.search {
		.input-view {
			background-color: #ffffff;
			border: 1rpx solid #333333;
			height: $nav-height;
			line-height: $nav-height;
			border-radius: 34rpx;
			padding: 0 15px;
			color: #999999;
			margin-bottom: 22rpx;

			.search-icon {
				width: 30rpx;
				height: 30rpx;
			}

			.nav-bar-input {
				height: 100%;
				padding: 0 5px;
				font-size: 12px;
				color: #333333;
			}
		}

		.history-search {
			.delete-wrap {
				width: 34rpx;
				height: 34rpx;
				// background: url(../.././static/operate/delete.png) no-repeat center center;
				background-size: 100%;
			}
		}

		.collect-star {
			width: 42rpx;
			height: 42rpx;
		}

		.star-icon {
			width: 32rpx;
			height: 32rpx;
		}

		.star-num {
			color: #F2CB51;
		}
	}
</style>