<template>
	<view class="search-container">
		<view class="search-row">
			<view>
				<image mode="aspectFit" src="/static/images/icon/retail/search.png"></image>
				<input 
					type="text"
					placeholder="请输入商品名称、sku"
					v-model="searchText"
					focus="true"
				/> 
				<image @click="searchClear" mode="aspectFit" src="/static/images/icon/retail/searchClear.png"></image>
			</view>
			<button hover-class="hover-active" @click="searchTrigger(searchText, 'search')">搜索</button>
		</view>
		
		<view class="history-search">
			<view>
				<view>历史搜索</view>
				<image @click="searchHistoryDelete" mode="aspectFit" src="/static/images/icon/retail/historySearchDelete.png"></image>
			</view>
			<view>
				<view v-for="(item, index) in historyList" :key="index" @click="searchTrigger(item, 'text')">{{ item }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../../../utils/util.js';
	import retailServer from '../../js/retail_server';
	import retailApi from '../../js/retail_api';
	
	export default {
		data() {
			return {
				searchText: "",		// 搜索文本
				historyList: [],	// 历史列表
			}
		},
		onLoad() {
			this.getSearchHistory();	// 获取搜索历史
		},
		methods: {
			// 删除历史搜索
			searchHistoryDelete() {
				if (this.historyList.length <= 0) {
					util.showNone("暂无历史数据！");
					return;
				}
				
				let _this = this;
				uni.showModal({
				    content: '确人删除全部历史记录？',
				    success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								
								_this.historyList = [];
								uni.removeStorage({
									key: 'searchHistoryData',
									success: function (res) {
										console.log('success');
									}
								});
							} 
							else if (res.cancel) {
								console.log('用户点击取消');
							}
				    }
				});
			},
			
			// 清除搜索文本
			searchClear() {
				this.searchText = "";
			},
			
			// 触发搜索
			searchTrigger(text, type) {
				if (!text) {
					util.showNone("请输入商品名称、sku");
					return;
				}
				
				let _this = this;
				if (type == "search") {
					// 存本地历史数据跟当前的搜索数据，返回上一页后用来搜索数据
					_this.historyList.push(text);
					uni.setStorage({
						key: 'searchHistoryData',
						data: _this.historyList,
						success: function() {
							console.log('success');
						},
						fail: function(err) {
							console.log(err);
						},
					});
				}
				
				util.showLoad();
				retailServer.get({
					url: retailApi.assistantListErpGoodsCateAndGoods,
					data: {
						assistant_key: text
					},
					isDefaultGet: false,
					failMsg: '搜索失败！'
				}).then(res => {
					if (res.data.code == 0) {
						let mark = false;
						for (let i = 0; i < res.data.data.list.length; ++i) {
							if (res.data.data.list[i].goods_list) {
								mark = true;
							}
						}
						
						// 没数据
						if (!mark) {
							util.showNone("暂无数据");
							return;
						}
						
						uni.setStorage({
							key: "searchData",
							data: res.data.data.list,
							success: function() {
								util.hideLoad();
								
								// 有数据的话就返回到上一页面，加载对应数据
								uni.navigateBack({
									delta: 1
								});
							},
							fail: function(err) {
								util.showNone("搜索失败");
							},
						});
					}
					else {
						util.showNone(res.data.message || '操作失败！');
					}
				});
			},
			
			// 获取搜索历史
			getSearchHistory() {
				let _this = this;
				
				uni.getStorage({
					key: 'searchHistoryData',
					success: function (res) {
						console.log(res.data);
						for (let i = 0; i < res.data.length; ++i) {
							_this.historyList.push(res.data[i]);
						}
					},
					fail: function(err) {
						console.log(err); 
						_this.historyList = [];
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	.search-container {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		padding-bottom: 0rpx;
		padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
		padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
		
		.search-row {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 152rpx;
			background-color: rgb(255,255,255);
			
			>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-grow: 1;
				height: 92rpx;
				border-radius: 10rpx;
				background-color: rgb(242,242,247);
				margin-left: 24rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				
				>input {
					flex-grow: 1;
					height: 100%;
					font-size: 32rpx;
				}
				>image{
					flex-shrink: 0;
					
					&:first-child {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
					&:nth-child(3) {
						width: 32rpx;
						height: 32rpx;
						margin-left: 20rpx;
					}
				}
			}
			>button {
				flex-shrink: 0;
				margin-left: 20rpx;
				margin-right: 20rpx;
				width: 100rpx;
				height: 62rpx;
				line-height: 62rpx;
				font-size: 32rpx;
				color: rgb(255,255,255);
				background-color: rgb(6,147,137);
				border-radius: 10rpx;
				white-space: nowrap;
				padding: 0 0;
			}
		}
		
		.history-search {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: white;
			padding-top: 26rpx;
			padding-left: 26rpx;
			
			>view {
				width: 100%;
				
				&:first-child {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 26rpx;
					
					>view {
						font-size: 32rpx;
						font-weight: bold;
					}
					
					>image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 26rpx;
					}
				}
				&:nth-child(2) {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					
					>view {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						height: 66rpx;
						font-size: 28rpx;
						color: rgb(193,193,199);
						background-color: rgb(242,242,247);
						border-radius: 32rpx;
						padding-left: 30rpx;
						padding-right: 30rpx;
						margin-right: 26rpx;
						margin-bottom: 26rpx;
					}
				}
			}
		}
	}
</style>
