<template>
	<view class="container">
		<loadlogo v-if="!loadlogo" />
		<view class="page-search" v-if="loadlogo">
			<far-bottom></far-bottom>
			<view class="search-h" :style="{backgroundColor: searchA.serbgw}">
				<view class="search-h-t1">
					<view class="search-h-t1-r f-30" style="color: #999999;" @click="cancelBtn">
						<view class="search-h-t1-r-lk" style="padding-right: 20upx;height: 30px;line-height: 30px;margin-top: 4px;"><text class="iconfont icon-pullleft" style="font-size: 30upx;padding-right: 10upx;"></text>返回</view>
					</view>
					<view class="search-h-t1-l">
						<view class="search-h-t1-l-lab" :style="{backgroundColor: searchA.serbgn}">
							<view class="i icon iconfont icon-search"></view>
							<input type="text" focus='ture' class="search-txt" v-model="keywords" @confirm="search()" placeholder="商品/头条/店铺">
						</view>
					</view>
					<view class="search-h-t1-r f-34" @click="search()">
						<view class="search-h-t1-r-lk weui-grid">确定</view>
					</view>
				</view>
				<view class="search-h-t2" v-if="!ishotSearch">
					<view class="i" :class="{active: listAct == 0}" @click="listActDo(0,'1')">商品</view>
					<view class="i" :class="{active: listAct == 1}" @click="listActDo(1,'3')" v-if="is_headline===1">头条</view>
					<view class="i" :class="{active: listAct == 2}" @click="listActDo(2,'2')">店铺</view>
					<view class="i" :class="{active: listAct == 3}" @click="searchPost(3,'4')" v-if="is_pocket == 1">帖子</view>
				</view>
			</view>
			<view class="search-t1" v-if="ishotSearch">
				<view class="search-t1-t">热门搜索</view>
				<view class="search-t1-b">
					<view class="i f-24" v-for="(item,index) in hotSearchData" :key="index" @click="hotItemSearch(item)">{{item}}</view>
				</view>
			</view>
			<block v-if="!!searchList &&searchList.length>0 || citywideList.length > 0">
				<view class="search-content" style="padding: 20rpx 0;">
					<view class="search-goods"  v-if="searchType ==='1'">
						<block v-for="(listItem,index) in searchList" :key="index">
							<goods-style :goodsStyleType="listItem.goods_type" :goodslistData="listItem.info" :issearch="'1'"></goods-style>
							<!-- @remindSuccess="remindSuccess" -->
						</block>
					</view>
					<view class="search-top padding-box" v-if="searchType ==='3'">
						<toplist :topList="searchList" />
					</view>
					<view class="search-store padding-box" v-if="searchType ==='2'">
						<storelist :search="true" :storeList="searchList" />
					</view>
					<view class="search-post padding-box" v-if="searchType ==='4'">
						<view class="post-item" v-for="(item,index) in citywideList" :key="index">
							<post-list  :itemInfo="item" :indexNumber="index" :indexShow='indexShow' @getover="getover" @operationShow="operationShow" ></post-list>
						</view>
						
					</view>
				</view>
				<load-more :isMore="loadingMore"></load-more>
			</block>
			<block v-else>
				<none-mores></none-mores>
			</block>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js'
	import Goodslist from '@/components/template/goodslist.vue'
	import Toplist from '@/components/template/toplist.vue'
	import Storelist from '@/components/template/storelist.vue'
	import Loadlogo from '@/components/template/loadlogo'
	import goodsStyle from '@/components/page/pageComponents/goodsStyle.vue'
	import loadMore from '@/components/template/loadmore.vue'
	import noneMores from '@/components/template/nonemores.vue'
	import postList from '@/components/template/postList'
	// #ifdef H5
	import wxApi from "@/common/js/wxApi.js"
	// #endif
	export default {
		data() {
			return {
				loadlogo: false,
				listAct: 0,
				lng: null,
				lat: null,
				current_page: 1, //当前页数
				keywords: '', //搜索内容
				is_headline: null, //搜索内容详情
				is_pocket:null,
				searchList: [],
				total: null,
				searchType: '1', // 搜索内容类型
				hotSearchData: null, //热门搜索
				ishotSearch: true, //是否打开热门搜索
				loadingMore: true,
				searchA:{},
				postPage:1,
				citywideList:[],
				postTotal:1,
				indexShow: -1,
			}
		},
		computed: {

		},
		components: {
			Goodslist,
			Toplist,
			Storelist,
			Loadlogo,
			goodsStyle,
			loadMore,
			noneMores,
			postList
		},
		mounted() {
			this.hotSearch()
			// #ifdef H5
			wxApi.wxRegister(this.wxApiCallback);
			// #endif

			// #ifdef MP
			App.getLocation().then(res => {
				this.locationcb(res.latitude, res.longitude)
			})
			// #endif
		},
		onReachBottom() {
			console.log('Bottom')
			let _this = this,
				{
					current_page,
					total,
					searchType
				} = _this;
			if (current_page >= total) {
				_this.loadingMore = true;
				return false;
			}
			if(this.searchType != '4'){
				_this.searchDataInfo(++_this.current_page, searchType, true);
			}else{
				if(this.postPage == this.postTotal){
					_this.loadingMore = true;
					return
				}
				this.postPage++;
				this.searchPost(3,'4',true)
			}
			
		},
		methods: {
			operationShow(e) {
				let _this = this;
				_this.indexShow = e;
			},
			getover(id,bor){
				this.$emit('getaver',id,bor)
			},
			//热门搜索列表
			hotSearch() {
				let _this = this;
				App._post_form('&do=GetPlatformInfor&type=2', {}, res => {
					_this.setData({
						hotSearchData: res.data.data,
						searchA:res.data,
						ishotSearch: !!res.data ? true : false
					});
				}, false, () => {
					_this.loadlogo = true;
				})
				// App._post_form('&do=GetPlatformInfor', {
				// 	type: 2
				// }, res => {
					
				// 	_this.setData({
				// 		hotSearchData: res.data,
				// 		ishotSearch: !!res.data ? true : false
				// 	});
				// 	console.log(_this.hotSearchData)
				// }, false, () => {
				// 	_this.loadlogo = true;
				// })
			},
			// 热门搜索点击
			hotItemSearch(searchItem) {
				let _this = this;
				_this.setData({
					keywords: searchItem,
					ishotSearch: false
				})
				_this.search()
			},
			//导入定位
			wxApiCallback() {
				let _this = this;
				console.log(jWeixin);
				jWeixin.ready(() => {
					jWeixin.getLocation({
						type: 'gcj02',
						success: function(res) {
							_this.setData({
								lng: res.longitude,
								lat: res.latitude
							})
						}
					});
				});
			},
			locationcb(lat, lng) {
				let _this = this;
				_this.setData({
					lng,
					lat
				})
			},
			cancelBtn() {
				uni.navigateBack({
					delta: 1
				})
			},
			searchPost(index, type, isSearch = false){
				this.listAct = index;
				this.searchType = '4';
				let _this = this,
					requestData = {
						page:this.postPage,
						keyword: _this.keywords
					};
				App._post_form('&p=pocket&do=infoList', requestData, res => {
					console.log(res);
					if(isSearch){
						_this.citywideList = _this.citywideList.concat(res.data.list);
					}else{
						_this.citywideList = res.data.list;
						_this.postTotal = res.data.total;
					}
					_this.loadingMore = true;
				}, false, () => {
					uni.hideLoading()
				});
			},
			//tabbar
			listActDo(index, type, isSearch = false) {
				uni.showLoading()
				if (index > -1) {
					this.listAct = index
				};
				this.initData()
				this.searchDataInfo(1, type)
				this.searchType = isSearch ? '1' : type;
			},
			// 数据初始化
			initData() {
				let _this = this;
				//初始化数据
				_this.current_page = 1;
			},
			//搜索
			search() {
				uni.showLoading({});
				this.listActDo("", "1", true);
			},
			// 搜索详情数据
			searchDataInfo(page = 1, type = '1', isPage = false) {
				let _this = this,
					requestData = {
						page,
						type,
						search: _this.keywords,
						lng: _this.lng,
						lat: _this.lat
					};
				App._post_form('&do=Search', requestData, res => {
					let searchData = res.data;
					if (type === '1') {
						searchData.list = searchData.list.map((val) => {
							let listarr = [];
							listarr.push(val.info)
							val.info = listarr;
							return val
						})
					};
					if (isPage) {
						if (searchData.list.length > 0) {
							_this["searchList"].push(...searchData.list);
						} else {
							_this.loadingMore = true;
						}
					} else {
						_this.setData({
							searchList: searchData.list,
							loadingMore: searchData.list.length === 0 || _this.current_page === res.data.total,
							ishotSearch: false
						})
					}
					_this.setData({
						total: res.data.total,
						is_headline: res.data.is_headline,
						is_pocket:res.data.is_pocket
					})
				}, false, () => {
					uni.hideLoading()
				});
			}
		},

		onPullDownRefresh() {

		}
		
	}
</script>

<style scoped>
	.container {
		background-color: #fff;
	}

	.page-search {
		background-color: #fff;
	}

	.search-h {
		padding: 10upx 30upx 0 30upx;
		background-color: #FFD93F;
	}

	.search-h-t1 {
		height: 80upx;
		line-height: 80upx;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
	}

	.search-h-t1-l {
		-webkit-flex: 1;
		flex: 1;
		padding-right: 20upx;
	}

	.search-h-t1-l-lab {
		height: 60upx;
		line-height: 60upx;
		border-radius: 60upx;
		margin-top: 8upx;
		padding-left: 80upx;
		padding-right: 20upx;
		background-color: #FFF4C4;
		display: block;
		position: relative;
	}

	.search-h-t1-l-lab .i {
		width: 80upx;
		height: 60upx;
		line-height: 60upx;
		font-size: 32upx;
		text-align: center;
		font-style: normal;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}

	.search-txt {
		height: 60upx;
		font-size: 28upx;
	}

	.search-h-t1-r {
		text-align: center;
	}

	.search-h-t1-r-lk {
		height: 60upx;
		line-height: 60upx;
		margin-top: 8upx;
		padding: 0 20upx;
		border-radius: 100upx;
	}

	.search-h-t2 {
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
	}

	.search-h-t2 .i {
		font-style: normal;
		padding: 30upx 0;
	}

	.search-h-t2 .active {
		border-bottom: 6upx solid #353535;
	}

	.search-t1 {
		padding: 40upx 30upx;
	}

	.search-t1-t {
		color: #808080;
		font-size: 26upx;
	}

	.search-t1-b:after {
		content: "";
		display: block;
		clear: both;
	}

	.search-t1-b .i {
		height: 56upx;
		line-height: 56upx;
		font-size: 24upx;
		font-style: normal;
		margin: 20upx 20upx 0 0;
		padding: 0 30upx;
		background-color: #EDEDED;
		border-radius: 60upx;
		float: left;
	}

	.search-t2 {
		padding: 40upx 30upx;
	}

	.search-nothing {
		margin-top: 260upx;
	}

	.search-nothing .h1 {
		width: 140upx;
		height: 140upx;
		margin: 0 auto;
	}

	.search-nothing .h1 .image {
		width: 100%;
		height: 100%;
	}

	.search-nothing .p {
		color: #999;
		font-size: 32upx;
		text-align: center;
		margin-top: 20upx;
	}

	.search-top {
		padding: 30upx;
	}
	.search-post{
		
	}
	.post-item{
		box-shadow: 0px 8px 24px rgba(221, 221, 221, 0.5);
	}
</style>
