<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :titleVal="'商品搜索'" :statusTitle="true"></status-nav>
		<!-- 输入框 -->
		<view class="search-input-box bacf poszy shop-nav-box" :style="{top: statusHNH+'px'}">
			<view class="disac pad-zy30 mar-s20">
				<!-- 输入框 -->
				<input @confirm="checkShopList" style="border: 2rpx solid #E0E0E0;padding: 0rpx 20rpx;height: 80rpx;line-height: 80rpx;" class="width100 fon34 radius10" type="text" v-model="searchVal" placeholder="请输入商品名称"/>
				<!-- 搜索 -->
				<view @tap="checkShopList" class="flexs mar-z30 radius10 pad-zy40 fon34 colf" style="height: 80rpx;line-height: 80rpx;" :style="{background:publicColor}">搜索</view>
			</view>
			<!-- 筛选结果 -->
			<view v-if="search_result" class="pad-z20 pad-x20">
				<view class="col3 fon28 mar-s30">搜索结果：</view>
			</view>
		</view>
		<!-- 数据列表 -->
		<view v-if="search_result" :style="{marginTop:statusHNH+titleHeight+10+45+'px'}">
			<view v-if="dataList.length!=0" style="margin-top: -20rpx;">
				<view class="pad20">
					<view style="width: 48.6%;float: left;">
						<view v-if="index1%2==0" v-for="(item1,index1) in dataList" :key="index1" class="bacf radius15 mar-x20 animated fadeIn posir" @tap="goPage(item1.id,index1)">
							<image :src="item1.imgSrc" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
							<view class="pad-zy20 pad-s10 pad-x30">
								<view class="fon28 bold col3 clips2">{{item1.title}}</view>
								<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
									<view class="radius10 colf mar-y10" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">{{item1.disease_name}}</view>
									<view class="radius10 colf" v-if="item1.isTuan" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
									<view class="radius10 colf" v-if="item1.isPing" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</view>
									<view class="radius10 colf" v-if="item1.isXian" style="padding: 6rpx 10rpx;background: #F85050;">限时促销</view>
								</view>
								<view class="disac">
									<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">
										<view v-if="item1.isIntegral" class="mar-s20">
											<view>积分:{{item1.integral}}</view>
											<view class="disac mar-s20" v-if="item1.grade!=0">
												<image src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
												<view class="fon24 col3 mar-z10">{{item1.level_text}}</view>
											</view>
										</view>
										<view v-else>
											<span v-if="item1.isPing">拼团价</span>
											<span v-if="item1.isXian">促销价</span>
											￥{{item1.zhePrice}}
										</view>
									</view>
									<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">￥{{item1.yuanPrice}}</view>
								</view>
								<view v-if="item1.isPing" class="disjbac mar-s20">
									<view class="fon24 col80">已拼团{{item1.activity_group_num}}组</view>
									<view class="disac">
										<image v-for="(itemm,indexm) in item1.activity_group_cover" :key="indexm" :src="itemm" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
									</view>
								</view>
								<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24 col80 mar-s20">结束时间：{{item1.activity_end_at}}</view>
							</view>
						</view>
					</view>
					<view style="width: 48.6%;float: right;">
						<view v-if="index1%2!=0" v-for="(item1,index1) in dataList" :key="index1" class="bacf radius15 mar-x20 animated fadeIn posir" @tap="goPage(item1.id,index1)">
							<image :src="item1.imgSrc" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
							<view class="pad-zy20 pad-s10 pad-x30">
								<view class="fon28 bold col3 clips2">{{item1.title}}</view>
								<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
									<view class="radius10 colf mar-y10" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">{{item1.disease_name}}</view>
									<view class="radius10 colf" v-if="item1.isTuan" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
									<view class="radius10 colf" v-if="item1.isPing" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</view>
									<view class="radius10 colf" v-if="item1.isXian" style="padding: 6rpx 10rpx;background: #F85050;">限时促销</view>
								</view>
								<view class="disac">
									<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">
										<view v-if="item1.isIntegral" class="mar-s20">
											<view>积分:{{item1.integral}}</view>
											<view class="disac mar-s20" v-if="item1.grade!=0">
												<image src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
												<view class="fon24 col3 mar-z10">{{item1.level_text}}</view>
											</view>
										</view>
										<view v-else>
											<span v-if="item1.isPing">拼团价</span>
											<span v-if="item1.isXian">促销价</span>
											￥{{item1.zhePrice}}
										</view>
									</view>
									<view v-if="item1.isTuan || item1.isPing || item1.isXian" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">￥{{item1.yuanPrice}}</view>
								</view>
								<view v-if="item1.isPing" class="disjbac mar-s20">
									<view class="fon24 col80">已拼团{{item1.activity_group_num}}组</view>
									<view class="disac">
										<image v-for="(itemm,indexm) in item1.activity_group_cover" :key="indexm" :src="itemm" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
									</view>
								</view>
								<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24 col80 mar-s20">结束时间：{{item1.activity_end_at}}</view>
							</view>
						</view>
					</view>
					<!-- 弹框 -->
					<pu-po :isShowT="isShowT" :contentVal="pu_content" @comfirmev="submitQu" @cancleev="isShowT=false"></pu-po>
				</view>
			</view>
			<nothing-page v-if="dataList.length==0" :content="`暂无更多商品列表`"></nothing-page>
		</view>
		<!-- 历史搜索和热门搜索 -->
		<view v-if="!search_result" class="pad-z30 mar-s30" :style="{marginTop:statusHNH+titleHeight+10+'px'}">
			<cate-tu :list="reSearchList" @delev='delev'></cate-tu>
		</view>
		<!-- 购物车 -->
		<navigator url="/pagesA/shopCart/shopCart?isScore=false" hover-class="none">
			<view class="cart-box">
				<view class="posir">
					<image src="/static/public/cart.png" mode="aspectFill"></image>
					<view class="posia" v-if="cartNum!=0"><view>{{cartNum}}</view></view>
				</view>
			</view>
		</navigator>
		<!-- 弹框 -->
		<pu-po :isShowT="isShowT" @comfirmev="comfirmev" @cancleev="cancleev"></pu-po>
		<!-- 返回顶部 -->
		<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
		<!-- 弹框授权 -->
		<empower @buttonH="buttonH" :vision="vision" :isWhere="2"></empower>
		<!-- 弹框 -->
		<auth-phone v-if="isShowP"></auth-phone>
	</view>
</template>

<script>
	import {cartNum} from '@/jsFile/publicAPI.js';
	import cateTu from '@/components/cate-items/cate-tu.vue';
	export default {
		components:{
			cateTu
		},
		data() {
			return {
				statusHNH:uni.getStorageSync('statusHNH'),
				searchVal:'',//输入框的值
				publicColor:uni.getStorageSync('publicColor'),//主题颜色
				reSearchList:[//历史记录列表
					{
						title:'历史搜索',
						src:'/static/public/del-icon.png',
						list:[]
					},
					{
						title:'热门搜索',
						src:'',
						list:[
							// {content:'秃顶种植需要的条件'},
							// {content:'眉毛种植的是什么'},
							// {content:'那些人能种植'},
							// {content:'眉毛种植需要多少钱'},
							// {content:'那些人能种植'},
						]
					},
				],
				isShowT:false,//是否显示弹框
				showTop:false,//是否显示返回顶部
				newCurrent:0,
				page:1,
				size:200,
				total:'',//总数
				isZanw:true,
				activeIndex:'-1',
				shopCate:['全部病种','全部医生','全部活动'],
				cateTitle:'',
				bingzList:[],//小分类列表
				zanBingArr:[],//暂存小分类
				titleHeight:'',//标题高度
				shaiList:[],//筛选后的结果列表
				dataList:[],
				searchVal:'',//关键词
				doctor_role:'',//医生从职位标识 从商品筛选条件接口获取 目前为doctor=医生 design=设计师
				doctor_name:'',//医生姓名 模糊搜索
				activity:'',//活动类型 不填为普通商品+活动商品 normal=普通商品；group_make=拼团；group_buy=团购;limit_time=限时促销
				disease_id:'',//病种ID
				cartNum:0,
				search_result:false,
				timeList:[],
				zanArr:[],
				timer:'',
				vision:false,
				isShowP:false,
			}
		},
		onPageScroll(e) {
		    e.scrollTop > 360 ? this.showTop = true : this.showTop = false
		},
		onReachBottom() {//触底事件
			// if(this.total!=this.dataList.length){
			// 	this.page++
			// 	this.checkShopList();
			// } else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000);
				setTimeout(()=>{
					this.isZanw = true;
				},10000)
			// }
		},
		onLoad(options) {
			if(options.keyWorld!=undefined && options.keyWorld!='') {
				this.searchVal = options.keyWorld;
				this.checkShopList();
			} else {
				this.search_result = false;
			}
			if(uni.getStorageSync('is_active')!=1){this.vision = true;}
			if(options.invite_code!='' && options.invite_code!=undefined){
				this.loginEv(options.invite_code);
			} else if(options.source_code!='' && options.source_code!=undefined){
				this.loginEv('',options.source_code,options.channel);
			} 
			this.checkSearchHistory();
			this.checkKey();
			// 缓存状态栏+标题栏的高度
			const query = wx.createSelectorQuery()
			query.select('.search-input-box').boundingClientRect((rect) => {
				// console.log('状态栏+标题栏：',rect.height);
				this.titleHeight = rect.height
			}).exec()
		},
		onShow() {
			this.$toolAll.tools.isLogin()
			if(this.searchVal!=undefined && this.searchVal!='') this.checkShopList();
			this.cartNumEv();//查询购物车数量
		},
		onUnload() {
			clearInterval(this.timer);
		},
		methods: {
			loginEv(invite_code='',source='',channel=''){
				uni.login({
					provider: 'weixin',
					success: (res)=> {
						if (res.code) {
							var params = {
								code:res.code,
								invite_code:invite_code,//用户邀请码
								source_code:source,
								channel:channel
							}
							this.$requst.post('user/login',params).then(res => {
								if(res.data.token!=''){
									if(res.data.is_active==0) {
										this.haveImg = false;
										this.vision = true;
									}
								}
							},error => {})
						}
					},
				});
			},
			buttonH(e){//授权成功
				this.haveImg = e
				if(e) {
					this.vision = false
					this.isShowP = true
				} 
			},
			cartNumEv(){//购物车数量
				this.$requst.post('order/shopping-cart-count',{type:'spu'}).then(res=>{
					if(res.code==0){
						this.cartNum = res.data.count;
					}
				})
			},
			checkShopList(){
				this.isZanw = true;
				let params = {
					keyword:this.searchVal,//商品关键字 支持模糊搜索
					page:this.page,
					size:this.size,
				}
				uni.request({
					url:`https://hm.hmzfyy.cn/api/spu/list`,
					data:params,
					method:'post',
					header:{
						'Content-Type': 'application/json; charset=UTF-8',
						'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
					},
					success: (res) => {
						if(res.data.code==0){
							clearInterval(this.timer);
							// if(this.page==1) {
								this.zanArr = [];
								this.dataList = [];
								this.timeList = [];
							// }
							this.total = res.data.total;
							if(res.data.data.list.length!=0){
								res.data.data.list.forEach(item=>{
									let tuan = false,ping = false,xian = false,integral = false;
									if(item.activity_type=='group_make') ping = true;
									if(item.activity_type=='group_buy') tuan = true;
									if(item.activity_type=='limit_time') xian = true;
									let group_cover = [];
									if(item.activity_group_cover.length!=0) {
										item.activity_group_cover.forEach(item=>{
											group_cover.push(this.$http + item)
										})
									}
									let obj = {
										id:item.id,
										imgSrc: this.$http + item.cover,
										title: item.name,
										zhePrice:item.price/100,
										yuanPrice:item.original_price/100,
										integral:'',
										isTuan:tuan,//是否是团购
										isPing:ping,//是否是拼团活动
										isXian:xian,//是否是限时活动
										isIntegral:integral,//是否是积分
										grade:'',
										disease_name:item.disease_name,//病种名称
										reponseTime:res.header.Date,//接口响应时间
										activity_end_at:item.activity_end_at,//限时结束时间
										activity_group_cover:group_cover,//参团人的头像
										activity_group_num:item.activity_group_num,//已经参团人数
									}
									this.zanArr.push(obj)
								})
								this.zanArr.forEach((item,index)=>{
									if(item.activity_end_at!='') {
										let obj = {
											id:item.id, 
											reponseTime:item.reponseTime,
											time:item.activity_end_at,
											nIndex:index
										}
										this.timeList.push(obj);
									}
								})
								if(this.timeList!=0){
									this.$toolAll.tools.showToast('加载中...')
									this.timer = setInterval(()=>{//定时器
										if(this.timeList.length!=0){
											this.timeList.forEach((item,index)=>{
												if(item.id==this.zanArr[item.nIndex].id){
													let endTime = new Date(this.timeList[index].time).getTime();//把结束时间转时间戳
													this.timeList[index].reponseTime = new Date(this.timeList[index].reponseTime).getTime() + 1000;//请求接口的时间递增，即：开始时间
													if(this.timeList[index].reponseTime - endTime >=0) {//如果开始时间的时间戳 - 结束时间的时间戳 >= 0 活动结束
														this.zanArr[item.nIndex].activity_end_at = "活动已结束";
													} else {
														// 继续进行倒计时
														this.zanArr[item.nIndex].activity_end_at = this.$toolAll.tools.dayTime(this.timeList[index].time,this.timeList[index].reponseTime);
													}
												}
											})
										}
									},1000)
									setTimeout(()=>{
										this.dataList = this.zanArr;
										this.search_result = true;
									},1000)
								} else {
									this.dataList = this.zanArr;
								}
							} else {
								this.search_result = true;
							}
						}
					}
				})
			},
			goPage(id,index){//进入商品详情事件
				uni.navigateTo({
					url:`/pagesB/shopDetail/shopDetail?id=${id}&isIntegral=${this.dataList[index].isIntegral}`
				})
			},
			checkKey(){//查询热搜关键词事件
				this.$requst.get('index/hot-keywords',{type:'spu'}).then(res=>{
					// console.log('关键词列表：',res);
					if(res.code==0){
						if(res.data.length!=0){
							res.data.forEach(item=>{
								let reObj = {
									id:item.id,
									content:item.keyword
								}
								this.reSearchList[1].list.push(reObj)
							})
						}
					}
				},error=>{})
			},
			checkSearchHistory(){//查询历史搜索的搜索记录
				this.$requst.post('user/search-history',{page:1,size:100}).then(res=>{
					// console.log(res);
					if(res.code==0){
						if(res.data.list.length!=0){
							res.data.list.forEach(item=>{
								if(item.keyword!=null){
									let searchObj = {
										id:item.id,
										content:item.keyword
									}
									this.reSearchList[0].list.push(searchObj)
								}
							})
						}
					}
				},error=>{})
			},
			delev(){//删除事件
				this.isShowT = true
			},
			comfirmev(){//清空历史搜索确认事件
				this.isShowT = false
				this.$requst.post('user/clear-search').then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('已清空')
						this.reSearchList[0].list = []//清空搜索历史
					}
				},error=>{})
			},
			cancleev(){//取消事件
				this.isShowT = false
			},
			backTop(){//回到顶部事件
			    uni.pageScrollTo({
			        scrollTop: 0,
			        duration: 300
			    });
			},
		}
	}
</script>

<style>

</style>