<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">
				<text class="common-white-btn fs26">{{item.name}}</text>
			</view>
		</view>
		<!-- 历史搜索项目结束 -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '',
				historyList: [
					{ name: '汽车保养' },
					{ name: '更换轮胎' },
					{ name: '空调滤芯更改' }
				]
			}
		},
		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})
				// if(this.$http.checkLoginExpired(res.data)) return
				let historyList = res.data.data || []
				this.historyList = historyList
			}
		}
	}
</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;
			}
		}
		.history-search {
			.delete-wrap {
				width: 34rpx;
				height: 34rpx;
				// background: url(../.././static/operate/delete.png) no-repeat center center;
				background-size: 100%;
			}
		}
	}
</style>
