<template>
	<view class="mineCollection">
		<far-bottom></far-bottom>
		<view class="topNav">
			<view @click="type = 1" :style="{width: platformInfor.citycardflag == 1?'49%':'98%'}">
				<view :class="type == 1 ? 'check' : ''"><span>店铺</span></view>
			</view>
			<view class="line" ></view>
			<view @click="type = 2" >
				<view :class="type == 2 ? 'check' : ''"><span>帖子</span></view>
			</view>
			<view class="line" ></view>
			<view @click="type = 3" v-if="platformInfor.citycardflag == 1 ">
				<view :class="type == 3 ? 'check' : ''"><span>名片</span></view>
			</view>
		</view>

		<view class="topFull"></view>

		<!-- 列表区域 -->
		<scroll-view v-if="type == 1" class="scrollList" :style="{ height: scollHeight }" :scroll-y="true" @scrolltolower="scdpLoad">
			<!-- 收藏店铺循环模板 -->
			<view class="scdpMb">
				<view class="scdpMbPackage" v-for="(item, index) in storeCollectList" @click="goStoreIndex(item.store.id)">
					<view class="scdpMbImg"><image :src="item.store.logo" />
						<view class="sellOut" v-if="item.store.hourstatus == 0">
							休息中
						</view>
					</view>
					<view class="scdpMbInfo">
						<view class="dis-flex">
							<span>{{ item.store.storename }}</span>
							<view>
								<image :src="imgfixUrls + 'homePage/home_logo2.png'" class="image30" v-if="item.store['attestation']['attestation'] == 2" />
								<!-- <img s:rc="@imgfixUrls + 'merchant/qyrz.png"' /> -->
								<image :src="imgfixUrls + 'homePage/home_logo3.png'" class="image30" v-if="item.store['attestation']['bondflag'] == 1" />
							</view>
						</view>
						<view>
							<view class="stars">
								<image :src="imgfixUrls + 'merchant/yStar.png'" v-if="item.store.score > 1 || item.store.score == 1" />
								<image :src="imgfixUrls + 'merchant/nStar.png'" v-else />
								<image :src="imgfixUrls + 'merchant/yStar.png'" v-if="item.store.score > 2 || item.store.score == 2" />
								<image :src="imgfixUrls + 'merchant/nStar.png'" v-else />
								<image :src="imgfixUrls + 'merchant/yStar.png'" v-if="item.store.score > 3 || item.store.score == 3" />
								<image :src="imgfixUrls + 'merchant/nStar.png'" v-else />
								<image :src="imgfixUrls + 'merchant/yStar.png'" v-if="item.store.score > 4 || item.store.score == 4" />
								<image :src="imgfixUrls + 'merchant/nStar.png'" v-else />
								<image :src="imgfixUrls + 'merchant/yStar.png'" v-if="item.store.score > 5 || item.store.score == 5" />
								<image :src="imgfixUrls + 'merchant/nStar.png'" v-else />
								<span>{{ item.store.score }}分</span>
							</view>
							<view>
								<span>{{ item.store.distance }}</span>
							</view>
						</view>
						<view>
							<view>
								<view>
									<span>{{ item.store.storehours }}</span>
								</view>
							</view>
							<view @click.stop="collection(item.store.id)"><span>取消收藏</span></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 收藏店铺循环模板 -->
			<!-- <view class="tips">
				<span>{{ scdpText }}</span>
			</view> -->
			<view  v-if="storeCollectList.length==0">
				<load-more :isMore="storeCollectList.length==0" style="line-height: 80upx;"></load-more>
			</view>
		</scroll-view>
		<!-- 列表区域 -->
		
		<TabBars :tabBarAct="0" :pageType="''" />
		
		<!-- 列表	 -->
		<view  v-if="type == 3" :style="{ height: scollHeight }">
			<business-card  :is_Add="false" ref="businesscard" :businCard_list="cardlist" @chrbusinCard="chrbusinCard"  :is_have="is_have"></business-card>
			<view  v-if="loadingMore">
				<load-more :isMore="loadingMore" style="line-height: 80upx;"></load-more>
			</view>
		
		</view>
		
		
		<!-- 列表区域 -->
		<postManage :postList="postList" :scollHeight="scollHeight" @loadTips="loadTips" :postLoadText="postLoadText" :source="source" v-if="type == 2"></postManage>
		<!-- 列表区域 -->
	</view>
</template>

<script>
import App from '@/common/js/app.js';
import TabBars from '@/components/template/tabBar';
// #ifdef H5
import wxApi from '@/common/js/wxApi.js';
// #endif
import postManage from '@/components/template/postManage';
import loadMore from '@/components/template/loadmore.vue'
import businessCard from "@/components/page/pageComponents/businessCard.vue"

export default {
	components: {
		postManage,
		TabBars,
		businessCard,
		loadMore
	},
	data() {
		return {
			source: 2,
			type: 1,
			storeCollectList: [],
			page: 1,
			lat: null,
			lng: null,
			loadingMore:false,
			cardPage:1,
			pagetotal: null,
			list: [],
			scdpText: '',
			scollHeight: 0,
			postList: [],
			postPage: 1,
			postTotal: null,
			postLoadText: '',
			cardlist:null,
			agencyData:{},
			is_have:1,
			cradTotal:1,
			citycardflag:0,
			platformInfor:{}
		};
	},
	onLoad: function() {
		let _this = this;
		let client = App.getClientType();
		_this.curLoction = uni.getStorageSync('curLoction');
		_this.agencyData = uni.getStorageSync('agencyData');
		_this.platformInfor = uni.getStorageSync('platformInfor')
		_this.storeCollect(_this.curLoction.latitude, _this.curLoction.longitude);
		_this.init()
		// if (client === '1' || client === '3') {
			
		// 	// // #ifdef H5
		// 	// wxApi.wxRegister(() => {
		// 	// 	jWeixin.ready(() => {
		// 	// 		jWeixin.getLocation({
		// 	// 			type: 'gcj02',
		// 	// 			success: function(res) {
							
		// 	// 			}
		// 	// 		});
		// 	// 	});
		// 	// });
		// 	// // #endif
		// 	// // #ifndef H5
		// 	// wx.getLocation({
		// 	// 	type: 'gcj02',
		// 	// 	success(res) {
		// 	// 		_this.storeCollect(res.latitude, res.longitude);
		// 	// 	},
		// 	// 	fail(res) {}
		// 	// });
		// 	// // #endif
		// } else {
		// 	uni.showLoading({
		// 		title:'正在获取定位信息'
		// 	})
		// 	uni.getLocation({
		// 		type: 'wgs84',
		// 		success: function(res) {
		// 			uni.hideLoading()
		// 			_this.storeCollect(res.latitude, res.longitude);
		// 		},
		// 		fail: function(res) {
		// 			_this.storeCollect();
		// 			uni.hideLoading()
		// 			uni.showToast({
		// 				icon: 'none',
		// 				title: '定位失败',
		// 				duration: 2000
		// 			});
		// 		}
		// 	});
		// }
		
	},
	onReachBottom() {
		if(this.cardPage == this.cradTotal) return
		this.getCardList(this.cardPage++,true);
	},
	watch:{
		type(news,old){
			if(news == 3){
				this.getCardList();
			}
		}
	},
	mounted() {
		let _this = this;
		uni.getSystemInfo({
			success(res) {
				_this.phoneHight = res.windowHeight;
			}
		});
		uni.createSelectorQuery()
			.select('.topFull')
			.boundingClientRect(data => {
				_this.scollHeight = _this.phoneHight - data.height - 4 + 'px';
			})
			.exec();
	},
	methods: {
		chrbusinCard(Newdata) {
			this.setData({
				cardList: Newdata
			})
		},
		getCardList(page = 1, isPage = false) {
			let _this = this,
				agencyData = _this.agencyData,
				requestData = {
					page,
					lat: agencyData.lat,
					lng: agencyData.lng,
					city_id: agencyData.areaid,
					is_collect: '1'
				};
			App._post_form('&p=citycard&do=homeList', requestData, res => {
		
				let cardList = res.data.list;
				_this.is_have = res.data.is_have;
				if (isPage) {
					_this["cardList"].push(...cardList);
				} else {
					_this.cardList = cardList;
					setTimeout(()=>{
						_this.$refs.businesscard.businCard_list = cardList;
					})
					// debugger
					_this.cradTotal = res.data.total;
					// console.log(this.$refs.businesscard.businCard_list,111111111111111111);
					// debugger
					
				}
				if(_this.cardList.length == 0){
					_this.loadingMore = true;
				}
			}, false, () => {
				_this.loadlogo = true;
			})
		},
		init() {
			let _this = this;
			_this.getCollectionList();
			
		},
		goStoreIndex(sid) {
			App.navigationTo({
				url: 'pages/mainPages/store/index?sid=' + sid
			});
		},
		// 收藏店铺
		loadTips() {
			let _this = this;
			if (_this.postPage == _this.postTotal) {
				_this.postLoadText = '已无更多数据';
			} else {
				_this.postPage++;
				_this.getCollectionList();
			}
		},
		// 获取当前用户收藏的帖子的列表
		getCollectionList() {
			let _this = this;
			_this.postLoadText = '加载中';
			let data = {
				page: _this.postPage,
				page_index: 5
			};
			App._post_form('&p=pocket&do=getCollectionList', data, res => {
				_this.postTotal = res.data.total;
				_this.postList = [..._this.postList, ...res.data.list];
				if (res.data.total == 0) {
					_this.postLoadText = '已无更多数据';
				} else {
					_this.postLoadText = '';
				}
			});
		},
		// 收藏商户
		collection(sid) {
			let _this = this;
			let data = {
				sid: sid
			};
			App._post_form('&p=store&do=collection', data, res => {
				for (let i = 0; i < _this.storeCollectList.length; i++) {
					if (_this.storeCollectList[i].store.id == sid) {
						_this.storeCollectList.splice(i, 1);
					}
				}
				uni.showToast({
					icon: 'none',
					title: '取消收藏成功',
					duration: 2000
				});
			});
		},
		// 收藏店铺列表
		storeCollect(lat = '', lng = '') {
			let _this = this;
			_this.scdpText = '... ...加载中';
			let data = {
				page: _this.page,
				lat: lat,
				lng: lng
			};
			App._post_form('&p=member&do=storeCollect', data, res => {
				_this.storeCollectList = [..._this.storeCollectList, ...res.data.list];
				for (let i = 0; i < _this.storeCollectList.length; i++) {
					_this.list.push(_this.storeCollectList[i].store);
				}
				_this.pagetotal = res.data.pagetotal;
				_this.scdpText = '';
				_this.citycardflag = res.data.citycardflag;
				// if(res.data.pocketflag == 1){
				// 	this.init();
				// }
			});
		},
		// 搜藏店铺加载
		scdpLoad() {
			let _this = this;
			if (_this.page == _this.pagetotal) {
				_this.scdpText = '没有更多数据了';
			} else {
				_this.page++;
				_this.storeCollect();
			}
		}
	}
};
</script>

<style lang="less" scoped>
.dis-flex {
	display: flex;
	justify-content: space-between;
	> view {
		display: inline-block;
	}
}
.image30 {
	width: 40upx;
	height: 40upx;
}
.tips {
	height: 80upx;
	text-align: center;
	> span {
		line-height: 80upx;
		font-size: 28upx;

		color: black;
	}
}
page {
	overflow-x: hidden;
	background-color: #F8F8F8;
}
.mineCollection {
	overflow-x: hidden;
	background: #f8f8f8;
	font-size: 0;
	border: 1upx solid rgba(0, 0, 0, 0);
}
.topNav {
	z-index: 2;
	position: fixed;
	top: 0upx;
	width: 750upx;
	height: 85upx;
	background: rgba(255, 255, 255, 1);
	display: flex;
	justify-content: space-between;
	> view {
		text-align: center;
		width: 49%;
		display: inline-block;
		> view {
			height: 81upx;
			width: 60upx;
			margin: auto;
			border-bottom: 4upx solid rgba(0, 0, 0, 0);
			> span {
				line-height: 85upx;
				font-size: 24upx;

				color: rgba(51, 51, 51, 1);
			}
		}
	}
	> .line {
		margin-top: 30upx;
		display: inline-block;
		width: 1upx;
		height: 26upx;
		background: rgba(238, 238, 238, 1);
	}
}

.check {
	border-bottom: 4upx solid #ff4444 !important;
	> span {
		font-size: 28upx !important;

		font-weight: 500 !important;
		color: rgba(255, 68, 68, 1) !important;
	}
}
.scrollList {
	width: 690upx;
	margin: auto;
	border-radius: 10px;
}
.topFull {
	width: 750upx;
	height: 108upx;
}
.scdpMb {
	background: rgba(255, 255, 255, 1);
}
.scdpMbPackage {
	padding: 30upx;
	border-bottom: 1upx solid rgba(238, 238, 238, 1);
	> view {
		display: inline-block;
		vertical-align: top;
	}
}
.scdpMbImg {
	width: 159upx;
	height: 159upx;
	border-radius: 10upx;
	overflow: hidden;
	position: relative;
	> image {
		width: 159upx;
		height: 159upx;
	}
	.sellOut{
		width: 159upx;
		height: 40upx;
		line-height: 40upx;
		background-color: rgba(0,0,0,0.3);
		color: #FFFFFF;
		font-weight: 700;
		font-size: 28upx;
		text-align: center;
		position: absolute;
		bottom: 0;
		left: 0;
	}
}
.scdpMbInfo {
	margin-left: 20upx;
	width: 440upx;
	> view:nth-child(1) {
		> span {
			font-size: 30upx;
			color: rgba(0, 0, 0, 1);
		}
	}
	> view:nth-child(2) {
		margin-top: 10upx;
		display: flex;
		justify-content: space-between;
		> view:nth-child(1) {
			vertical-align: middle;
			> image {
				margin-right: 10upx;
				vertical-align: middle;
				width: 25upx;
				height: 24upx;
			}
			> span {
				vertical-align: middle;
				font-size: 24upx;

				color: rgba(153, 153, 153, 1);
			}
		}
		> view:nth-child(2) {
			vertical-align: middle;
			> span {
				font-size: 24upx;

				color: rgba(153, 153, 153, 1);
			}
		}
		> view {
			display: inline-block;
		}
	}
	> view:nth-child(3) {
		display: flex;
		justify-content: space-between;
		> view:nth-child(1) {
			margin-top: 10upx;
			> view:nth-child(1) {
				> span {
					font-size: 24upx;

					color: rgba(153, 153, 153, 1);
				}
			}
			> view:nth-child(2) {
				margin-top: 5upx;
				> span {
					font-size: 24upx;

					color: rgba(153, 153, 153, 1);
				}
			}
		}
		> view:nth-child(2) {
			margin-top: 25upx;
			width: 126upx;
			height: 48upx;
			border: 1upx solid rgba(255, 68, 68, 1);
			border-radius: 8upx;
			text-align: center;
			> span {
				line-height: 48upx;
				font-size: 24upx;

				color: rgba(255, 68, 68, 1);
			}
		}
		> view {
			display: inline-block;
			vertical-align: middle;
		}
	}
}
</style>
