<template>
	<view>
		<view v-if="showHeader" class="header" :style="{ position: headerPosition,top:headerTop,opacity: afterHeaderOpacity }">
			<view class="input-box">
				<input
					placeholder="关键字"
					placeholder-style="color:#c0c0c0;"
					v-model="keyword"
					:focus="true"
					confirm-type="search"
					@confirm="reload"
				/>
				<view class="icon search" @tap="reload()"></view>
			</view>
		</view>
		<view class="wordstop" v-if="showWords">
			<text style="color:gray;font-size: 20;">历史检索</text>
			
		</view>
		<view v-if="goodsList.length==0 && !showWords" style="text-align: center;margin-top: 150upx;">
			暂无相关商品
		</view>
		<view v-if="showWords" class="words">
			<view class="tag-view" v-if="keywords.length>1">
				<uni-tag text="删除" type="error" @click="deletewords()" :inverted="true"/>
			</view>
			<view class="tag-view"  @click="search(item)" v-for="item in keywords" :key="item">
				<uni-tag :text="item" :inverted="true" type="royal" />
			</view>
		</view>
		<view class="place"></view>
		<view class="goods-list" v-if="!showWords">
			<view class="product-list">
				<view class="product" v-for="(goods) in goodsList" :key="goods.id" @tap="toGoods(goods)">
					<image mode="aspectFill" :src="goods.picurl"></image>
					<view v-html="brightenKeyword(goods.title,keyword)" class="name"></view>
					<view class="info">
						<view class="price">{{goods.price}}</view>
						<!-- <view class="slogan">{{ goods.pay_num }}人已付款</view> -->
					</view>
				</view>
			</view>
			<view class="loading-text">{{loadingText}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showHeader:true,
				afterHeaderOpacity: 1,//不透明度
				headerPosition: 'fixed',
				headerTop:null,
				statusTop:null,
				nVueTitle:null,
				keyword:null,
				keywords:[],
				cid:null,
				showReload:false,
				showWords: true,
				page:1,
				// goodsList:[
				// 	{ goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
				// 	{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
				// 	{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
				// 	{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
				// 	{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
				// 	{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
				// 	{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
				// 	{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
				// 	{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
				// 	{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' }
				// ],
				goodsList: [],
				loadingText:"",
				headerTop:"0px",
				headerPosition:"fixed",
				orderbyList:[
					{text:"销量",selected:true,orderbyicon:false,orderby:0},
					{text:"价格",selected:false,orderbyicon:['sheng','jiang'],orderby:0},
					{text:"好评",selected:false,orderbyicon:false,orderby:0}
				],
				orderby:"sheng"
			};
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			//console.log(option); //打印出上个页面传递的参数。
			uni.setNavigationBarTitle({
				title: option.name
			});
			if(option.id){
				this.cid = option.cid
				this.getGoods()
			}
			//兼容H5下排序栏位置
			// #ifdef H5
				//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
				let Timer = setInterval(()=>{
					let uniHead = document.getElementsByTagName('uni-page-head');
					if(uniHead.length>0){
						this.headerTop = uniHead[0].offsetHeight+'px';
						clearInterval(Timer);//清除定时器
					}
				},1);
			// #endif
			var that = this
			uni.getStorage({
				key:'keywords',
				success(res) {
					that.keywords = res.data
				},
				fail() {
					uni.setStorageSync('keywords',[])
				}
			})
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			this.reload()
			uni.stopPullDownRefresh();
		  //   setTimeout(()=>{
				// this.reload();
		        
		  //   }, 1000);
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom(){
			this.loadingText ='正在加载'
			this.page = this.page + 1
			this.getGoods()
			// uni.showToast({title: '触发上拉加载'});
			// let len = this.goodsList.length;
			// if(len>=40){
			// 	this.loadingText="到底了";
			// 	return false;
			// }else{
			// 	this.loadingText="正在加载...";
			// }
			// let end_goods_id = this.goodsList[len-1].goods_id;
			// for(let i=1;i<=10;i++){
			// 	let goods_id = end_goods_id+i;
			// 	let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' };
			// 	this.goodsList.push(p);
			// }
		},
		methods:{
			getGoods(){
				this.loadingText='正在加载中'
				this.$u.api.searchGood(this.keyword, this.page).then(res=>{
					var goodsList = []
					this.loadingText=''
					if(res.data==null){
						this.loadingText="到底了"
					}else{
						for(var i=0;i<res.data.length;i++){
							goodsList.push({
								id:res.data[i].aid,
								title:res.data[i].title,
								picurl:this.vuex_host+ '/public/' + res.data[i].picurl.split(',')[0] ,
								price:res.data[i].price,
								// pay_num:res.data[i].pay_num
							})
						}
						if(this.page==1){
							this.goodsList = goodsList
						}else{
							this.goodsList = this.goodsList.concat(goodsList)
						}
					}
					
				})
			},
			reload(){
				// let tmpArr = []
				this.showWords = false;
				this.goodsList = [];
				this.page=1
				this.getGoods()
				// let end_goods_id = 0;
				// for(let i=1;i<=10;i++){
				// 	let goods_id = end_goods_id+i;
				// 	let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' };
				// 	this.goodsList.push(p);
				// }
				var that = this
				if(that.keywords.indexOf(that.keyword) ==-1){
					that.keywords.unshift(that.keyword)
				}
				that.keywords=that.keywords.splice(0,5)
				console.log(that.keywords)
				uni.setStorageSync('keywords',that.keywords)
			},
			search(item){
				var that = this
				that.keyword = item
				if(that.keyword !=''){
					that.reload()
				}else{
					uni.showToast({
						title:'请输入关键词',
						icon:'none'
					})
				}
				
				
			},
			deletewords(){
				var that = this
				that.keywords = []
				uni.setStorageSync('keywords',[])
			},
			brightenKeyword(val, keyword) {
				const Reg = new RegExp(keyword, 'i');
				let res = '';
				if (val) {
					res = val.replace(Reg, `<span style="color: red;font-style:normal">${keyword}</span>`);
				  return res;
				}
			  },
			
			//商品跳转
			toGoods(e){
				uni.showToast({title: '商品'+e.goods_id,icon:"none"});
				uni.navigateTo({
					url: '../goods?id='+e.id 
				});
			},
			//排序类型
			select(index){
				let tmpTis = this.orderbyList[index].text+"排序 "
				if(this.orderbyList[index].orderbyicon){
					let type = this.orderbyList[index].orderby==0?'升序':'降序';
					if(this.orderbyList[index].selected){
						type = this.orderbyList[index].orderby==0?'降序':'升序';
						this.orderbyList[index].orderby = this.orderbyList[index].orderby==0?1:0;
					}
					tmpTis+=type
				}
				this.orderbyList[index].selected = true;
				let len = this.orderbyList.length;
				for(let i=0;i<len;i++){
					if(i!=index){
						this.orderbyList[i].selected = false;
					}
				}
				uni.showToast({title:tmpTis,icon:"none"});
			}
		}
		
	}
</script>

<style lang="scss">
	.icon {
		font-size:26upx;
	}
	.wordstop{
		position: fixed;
		top: 80upx;
		margin-left: 20upx;
		margin-top: 10upx;
		margin-right: 20upx;
	}
	.words {
		position: fixed;
		top: 120upx;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 20rpx;
	}
	.tag-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		margin: 10rpx 15rpx;
		justify-content: center;
	}
	.header{
		width: 92%;
		padding: 0 4%;
		height: 79upx;
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		border-bottom: solid 1upx #eee;
		.target{
			width: 20%;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			margin-bottom: -2upx;
			color: #aaa;
			&.on{
				color: #555;
				border-bottom: 4upx solid #f06c7a;
				font-weight: 600;
				font-size: 30upx;
			}
			
			
		}
		.addr {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			font-size: 28upx;
			.icon {
				height: 60upx;
				margin-right: 5upx;
				display: flex;
				align-items: center;
				font-size: 42upx;
				color: #ffc50a;
			}
		}
		.input-box {
			width: 100%;
			height: 60upx;
			background-color: #f5f5f5;
			border-radius: 30upx;
			position: relative;
			display: flex;
			align-items: center;
			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 60upx;
				height: 60upx;
				font-size: 34upx;
				color: #c0c0c0;
			}
			input {
				padding-left: 28upx;
				height: 28upx;
				font-size: 28upx;
			}
		}
		.icon-btn {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			.icon {
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
			}
		}
	}
.place{
		
		background-color: #ffffff;
		height: 100upx;

	}
.goods-list{
		.loading-text{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60upx;
			color: #979797;
			font-size: 24upx;
		}
		.product-list{
			width: 92%;
			padding: 0 4% 3vw 4%; 
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.product{
				width: 48%;
				border-radius: 20upx;
				background-color: #fff;
				margin: 0 0 15upx 0;
				box-shadow: 0upx 5upx 25upx rgba(0,0,0,0.1);
				image{
					width: 100%;
					height: 48vw;
					border-radius: 20upx 20upx 0 0;
				}
				.name{
					width: 92%;
					padding: 10upx 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					font-size: 30upx;
				}
				.info{
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					width: 92%;
					padding: 10upx 4% 10upx 4%;
					
					.price{
						color: #e65339;
						font-size: 30upx;
						font-weight: 600;
					}
					.slogan{
						color: #807c87;
						font-size: 24upx;
					}
				}
			}
			
		}
	}
</style>
