<template>
	<view class="container">
		<view class="searhtoppage flextwo">
			<view class="searchtopk flextwo">
				<image src="../../static/search.png" mode="" class="search"></image>
				<view class='searchleft'>

					<input type="text" placeholder="输入您搜索的内容" v-model="keyword" @blur="searchbtn" />
				</view>

			</view>
			<view class="cancelname" @click="cancel">取消</view>
		</view>
		<!-- 搜索 -->
		<view class="searchbox" v-if="search">
			<view>
				<view class="searchboxtop flextwo">
					<view class='searchboxleft flexone'>
						<view class="hotname">历史搜索</view>
					</view>
					<view class="qingkong flexone" @click="clear">
						<view class="qingkongname">清空</view>
						<image src="../../static/shanchu.png" mode="" class="delimg"></image>
					</view>


				</view>
				<view class="nodata" v-if="searchhis.length==0">暂无数据</view>
				<view class="lishibox flexone" v-else>
					<view class="lishoboxitme" v-for="(item,index) in searchhis" :key="index" @click="searchitem(item)">{{item}}</view>
				</view>
			</view>

			<view class="searchboxtop flextwo" @click="more">
				<view class='searchboxleft flexone'>
					<image src="../../static/hot.png" mode="" class="hot"></image>
					<view class="hotname">热门品类推荐</view>
				</view>
				<view class="more flexone">
					更多
					<img src="../../static/yourow.png" alt="" class="yourow">
				</view>
			</view>
			<goodkind :wantlist="wantlist"></goodkind>
		</view>
		<!-- 搜索列表 -->
		<view class="searchlist" v-else>
			<!--有搜搜结果 -->


			<view class="searchitem flextwo" v-if="anchor.length!=0">
				<view class="searchitemleft flexone" @click="enterpeople(anchor.id)">
					<image :src="anchor.avatar" mode="" class="headimg"></image>
					<view class="searchheadname">{{anchor.name}}</view>
				</view>
				<view class="dingyue" v-if="anchor.user_anchor==0" @click="dingyuepeople">订阅直播</view>
				<view class="canceltixing" v-else @click="dingyuepeople">取消订阅</view>

			</view>
			<view class="searchitem flextwo" v-if="cate.length!=0">
				<view class="searchitemleft flexone">
					<image :src="cate.image" mode="" class="headimg"></image>
					<view class="searchheadname">{{cate.name}}</view>
				</view>
				<view class="dingyue" v-if="cate.user_cate==0" @click="dingyuezhibo">订阅直播</view>
				<view class="canceltixing" v-else @click="dingyuezhibo">取消订阅</view>


			</view>

			<view class="want flextwo">
				<view class="wantleft flexone">
					<image src="../../static/zan.png" mode="" class="likeimg"></image>
					与“{{keyword}}”有关的直播
				</view>
				<view class="more flexone">
					更多
					<img src="../../static/yourow.png" alt="" class="yourow">
				</view>
			</view>
			<view>
				<view class="nodata" v-if="zhigoodlist.length==0">暂无数据</view>
				<view v-else>
					<!-- 商品列表 -->
					<goodlist :zhigoodlist="zhigoodlist"></goodlist>

				</view>

			</view>



			<view class="want flextwo" @click='more'>
				<view class='searchboxleft flexone'>
					<image src="../../static/hot.png" mode="" class="hot"></image>
					<view class="hotname">热门品类推荐</view>
				</view>
				<view class="more flexone">
					更多
					<img src="../../static/yourow.png" alt="" class="yourow">
				</view>
			</view>
			<goodkind :wantlist="wantlist"></goodkind>



		</view>
	</view>
</template>
<script>
	import app from "../../App.vue";
	import goodkind from "../../compontent/goodkind.vue"
	import goodlist from "../../compontent/goodlist.vue"
	import {
		Toast
	} from "../../utils/toast.js"
	var that
	export default {
		components: {
			goodkind,
			goodlist
		},
		data() {
			return {
				search: true,
				havesou: false,
				goodshow: false,
				wantlist: [],
				keyword: '',
				zhigoodlist: [],
				showpull: true,
				page: 1,
				searchhis: [],
				anchor: '',
				cate: ''
			}
		},
		onReachBottom() {
			that = this
			let newpage = that.page;
			newpage++
			that.page = newpage;
			if (that.showpull == true) {
				console.log(38493409)
				Toast('没有更多了~')
			} else {
				that.getsearchresult()
			}
		},
		onLoad() {
			// 获取热门品类
			this.getwant()
			// 获取搜索列表
			this.getsoulist()
		},
		methods: {
			cancel() {
				this.search = true;
				this.keyword = ''
				this.getsoulist()
			},
			// 获取搜索列表
			getsoulist() {
				let that = this;
				var url = "keyword_log/getKeyword"
				let param = {

				}
				app.post(url, param, "post").then(res => {
					console.log('搜索列表', res)
					that.searchhis = res
				}).catch(err => {
					console.log(err)
				})
			},
			// 热门品类
			getwant() {
				let that = this;
				var url = "category/getRandCategory"
				let param = {
					type: 2,
					limit: 8
				}
				app.post(url, param, "post").then(res => {
					console.log('我想要的', res)
					that.wantlist = res

				}).catch(err => {
					console.log(err)
				})
			},
			// 清空搜素记录
			clear() {
				let that = this;
				uni.showModal({
					title: '',
					content: '是否清空搜索记录',
					success: function(res) {
						if (res.confirm) {

							var url = "keyword_log/delKeyword"
							let param = {

							}
							app.post(url, param, "post").then(res => {
								Toast("删除成功");
								that.searchhis = []

							}).catch(err => {
								console.log(err)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 获取搜索
			searchbtn() {
				this.search = false;
				this.page=1;
				this.zhigoodlist=[];
				this.getsearchresult();
			},
			// 获取搜索结果
			getsearchresult() {
				let that = this;
				var url = "goods/search"
				let param = {
					keyword: that.keyword,
					page: that.page,
					per_apge: 20
				}
				app.post(url, param, "post").then(res => {
					console.log('搜索结果', res)
					that.anchor = res.anchor;
					that.cate = res.cate
					that.zhigoodlist = that.zhigoodlist.concat(res.list.data);
					if (that.page > 1) {
						if (res.list.data == 0) {
							that.showpull = false
						}
					}

				}).catch(err => {
					console.log(err)
				})
			},
			// 热门推荐更多
			more() {
				uni.navigateTo({
					url: '/pages/xinyuan/zhiboknow'
				})
			},
			// 订阅人
			dingyuepeople() {
				let that = this;
				var url = "anchor/addUserAnchor"
				let param = {
					anchor_id: that.anchor.id
				}
				app.post(url, param, "post").then(res => {
					console.log('搜索结果', res)
					if (that.anchor.user_anchor == 0) {
						that.anchor.user_anchor = 1;
						Toast("订阅成功")
					} else {
						that.anchor.user_anchor = 0;
						Toast("取消订阅成功")
					}
					that.anchor = that.anchor;
					that.$forceUpdate()



				}).catch(err => {
					console.log(err)
				})
			},

			// 订阅品类
			dingyuezhibo() {
				let that = this;
				var url = "category/addUserCate"
				let param = {
					cate_id: that.cate.id
				}
				app.post(url, param, "post").then(res => {
					console.log('搜索结果', res)
					if (that.cate.user_cate == 0) {
						that.anchor.user_cate = 1;
						Toast("订阅成功")
					} else {
						that.anchor.user_cate = 0;
						Toast("取消订阅成功")
					}
					that.cate = that.cate;
					that.$forceUpdate()

				}).catch(err => {
					console.log(err)
				})
			},
			searchitem(item) {
				this.keyword = item;
				this.getsearchresult();
				this.search = false
			},
			// 进入主播详情
			enterpeople(id){
				console.log(id)
				uni.navigateTo({
					url:'/pages/xinyuan/zhibodetail?id='+id
				})
				
			}
		}

	}
</script>

<style>
	@import url('../../style/xinyuan');

	page {
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.searhtoppage {
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.fuzhi {
		margin-top: 92rpx
	}

	.copybtn {
		margin: 64rpx auto 32rpx
	}

	.fuzhitext {
		text-align: center;
	}

	.lishibox {
		margin-top: 24rpx;
		flex-wrap: wrap;
	}

	.lishoboxitme {
		background: #f7f8fa;
		border-radius: 8rpx;
		padding: 8rpx 16rpx;
		box-sizing: border-box;
		color: #252F3E;
		font-size: 24rpx;
		margin-bottom: 20rpx;
		margin-right: 10rpx;
	}

	.canceltixing {
		width: 144rpx;
		height: 48rpx;
		background: #bbbbbb;
		border-radius: 10rpx;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		line-height: 48rpx;
	}
</style>