<!-- 商铺信息 -->
<template>
	<view class="container">
		<!-- 商铺详情3 -->
		<view class="shopInfo-3">
			<view class="shopInfo-tabbar dis-flex b-f">
				<view class="tabbar-item flex-box t-c p-r" v-for="(tabItem,index) in shopinfoData" @click="selectTabbar(tabItem)" :key="index">
					<text class="f-28" :class="currentTab===tabItem.order?'tabbar-item-active':''">{{tabItem['title']}}</text>
					<view class="tabbar-item-active-btm" v-if="currentTab===tabItem.order"></view>
				</view>
			</view>
			<view class="shop b-color-f8" style="padding: 20upx 30upx 60upx;">
				<view class="shangjia" style="padding-bottom: 80upx;">
					<view class="shangjia-i" :class="{shangjiaISty: item2.goods.length == 0}" v-for="(item2, key2) in shopInfoList"
					 :key="key2">
						<view class="a shangjia-i-t" @click="navigateTo(item2.shop_url,item2,shopInfoList)">
							<view class="shangjia-i-l">
								<image class="image" :src="item2.logo" mode="aspectFill"></image>
							</view>
							<view class="shangjia-i-r">
								<view class="shangjia-i-r-d">
									<view class="dis-flex flex-y-center flex-x-between">
										<view class="shop3-title-width shangjia-i-r-t1 over-omit onelist-hidden">{{ item2.storename }}</view>
										<view class="store-containerIcon dis-flex flex-y-center">
											<image :src="imgfixUrls + 'citydeliveryicon.png'" class="image30" v-if="item2.deliverystatus == 1" />
											<image :src="imgfixUrls + 'homePage/home_logo2.png'" class="image30" v-if="item2['attestation']['attestation'] == 2" />
											<image :src="imgfixUrls + 'homePage/home_logo3.png'" class="image30" v-if="item2['attestation']['bondflag'] == 1" />
											<image :src="imgfixUrls + 'diypage/720icon.png'" mode="" class="m-right10" v-if="item2.panorama===1"></image>
											<image :src="imgfixUrls + 'diypage/videoicon.png'" mode="" v-if="item2.videourl===1"></image>
										</view>
									</view>
									<view class="shangjia-i-r-t2 over-omit dis-flex flex-x-between flex-y-center">
										<view class="dis-flex flex-y-center">
											<view class="shangjia-i-r-t2-icon">
												<view class="star star-dark">
													<view class="i icon iconfont icon-shoucangxiao" v-for="(item3, key3) in 5" :key="key3"></view>
												</view>
												<view class="star star-light">
													<view class="star-width" :style="'width:'+(item2.score / 5) * 100+'%;'">
														<view class="i icon iconfont icon-shoucangxiao" v-for="(item3, key3) in 5" :key="key3"></view>
													</view>
												</view>
											</view>
											<view class="f-28 col-6 star-grade">{{item2.score}}分</view>
										</view>
										<view class="shop3-distance f-24 col-6" v-if="!!item2.distance">{{item2.distance}}</view>
									</view>
									<view class="shangjia-i-r-t3 over-omit">
										<view class="p" v-html="item2.storehours"></view>
									</view>
									<view class="shangjia-i-r-t3 over-omit" v-if="item2.catename">
										<view class="p">{{item2.catename}}</view>
									</view>
									<view class="shangjia-i-r-t4 over-omit">
										<view v-for="(item3,index3) in item2.tags" class="tags_view" :key="index3">{{item3}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="shangjia-i-b" style="margin-top: 20upx;" v-if="((shopFold && shopFoldIndex == key2) || (shopFoldIndex !== key2)) && item2.goods.length > 0">
							<view class="shangjia-i-b-t1" v-if="item2.goods.length <= 2">
								<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 == 0">
									<view class="em" :class="tag.css">{{ tag.tag }}</view>
									<view class="span">{{ tag.name }}</view>
								</view>
							</view>
							<view class="shangjia-i-b-t1" @click="shangjiaFold(key2)" v-if="item2.goods.length > 2">
								<view class="i icon iconfont icon-unfold"></view>
								<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 == 0">
									<view class="em" :class="tag.css">{{ tag.tag }}</view>
									<view class="span">{{ tag.name }}</view>
								</view>
							</view>
							<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="item2.goods.length == 2 && key3 == 1">
								<view class="em" :class="tag.css">{{ tag.tag }}</view>
								<view class="span">{{ tag.name }}</view>
							</view>
							<view class="shangjia-i-b-t2" v-if="item2.goods.length > 2">
								<view class="em" :class="tag.css" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 > 0">{{ tag.tag }}</view>
							</view>
						</view>
						<view class="shangjia-i-b" style="margin-top: 20upx;" v-if="!shopFold && shopFoldIndex == key2 &&  item2.goods.length > 2">
							<view class="shangjia-i-b-t1" @click="shangjiaUpFold(key2)">
								<view class="i icon iconfont icon-fold"></view>
								<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3">
									<view class="em" :class="tag.css">{{ tag.tag }}</view>
									<view class="span">{{ tag.name }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style=" background-color: #F8F8F8;">
					<load-more :isMore="loadingMore"></load-more>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js'
	import loadMore from '@/components/template/loadmore.vue'
	export default {
		data() {
			return {
				currentTab: null,
				shopFold: true,
				shopFoldIndex: -1,
				shopInfoList: null,
				pageTotal: null,
				current_page: 1,
				tabItemInfo: {},
				scrollTop: 0,
				loadingMore: false,
				mobileHeight: 0,
				img:''
			}
		},
		components: {
			loadMore
		},
		props: {
			shopinfoData: {
				type: Object,
				default: function() {
					return {}
				}
			},
			shopinfoStyle: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		onShow() {

		},
		computed:{
			curLoction(){
				return uni.getStorageSync('curLoction')
			}
		},
		mounted() {
			this.img = this.imgfixUrl;
			uni.$on('isBottomMore',this.shopInfomore);
		},
		destroyed() {
			uni.$off('isBottomMore',this.shopInfomore);
		},
		watch: {
			'shopinfoData': {
				handler(newData, oldData) {
					if (!!newData && Object.keys(newData)['length'] > 0) {
						let tabItem = Object.keys(newData)[0];
						this.selectTabbar(newData[tabItem])
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			selectTabbar(tabItem, page = 1, isPage = false) {
				let _this = this,
					requestData = {
						order: tabItem.order,
						is_total: "1",
						page,
						lat: !!_this.curLoction ? _this.curLoction.latitude : '',
						lng: !!_this.curLoction ? _this.curLoction.longitude : ''
					};
				App._post_form('&p=store&do=homeList', requestData, res => {
					let storeList = res.data.list;
					for (let i = 0; i < storeList.length; i++) {
						let goodsList = [];
						for (let j in storeList[i].goods) {
							let goodsData = storeList[i].goods[j];
							if (goodsData !== '') {
								if (j == 'active') {
									goodsData.css = 'qiang'
									goodsData.tag = '抢'
								} else if (j == 'coupon') {
									goodsData.css = 'hui'
									goodsData.tag = '券'
								} else if (j == 'fightgroup') {
									goodsData.css = 'pin'
									goodsData.tag = '拼'
								} else if (j == 'groupon') {
									goodsData.css = 'tuan'
									goodsData.tag = '团'
								} else if (j == 'halfcard') {
									goodsData.css = 'ka'
									goodsData.tag = '卡'
								} else if (j == 'packages') {
									goodsData.css = 'li'
									goodsData.tag = '礼'
								}else if (j == 'bargain') {
									goodsData.css = 'kan'
									goodsData.tag = '砍'
								}
								goodsList.push(goodsData);
							}
						}
						storeList[i].goods = goodsList;
					}
					if (isPage) {
						if (storeList.length > 0) {
							_this["shopInfoList"].push(...storeList);
						} else {
							_this.loadingMore = true;
						}
					} else {
						_this.setData({
							current_page: 1,
							shopInfoList: storeList,
							currentTab: tabItem.order,
							pageTotal: res.data.total,
							tabItemInfo: tabItem,
							loadingMore: storeList.length === 0 || _this.current_page === res.data.total,
							scrollTop: 0
						})
					}
				}, false, () => {})
			},
			navigateTo(url,aa,bb) {
				
				let isHttpUrl = url.indexOf('https') !== -1;
				if (isHttpUrl) {
					location.href = url;
				} else {
					App.navigationTo({
						url: url
					})
				}
				console.log(url,isHttpUrl);
			},
			shangjiaFold(key2) {
				this.shopFold = false
				this.shopFoldIndex = key2
			},
			shangjiaUpFold(key2) {
				this.shopFold = true
				this.shopFoldIndex = key2
			},
			shopInfomore() {
				if (this.current_page >= this.pageTotal) {
					this.loadingMore = true;
					return false;
				}
				console.log(this.current_page,this.pageTotal)
				this.selectTabbar(this.tabItemInfo, ++this.current_page, true);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../common/css/old_diyPages";
	
	// 商铺3
	.shopInfo-3 {
		.shopInfo-tabbar {
			.tabbar-item-active {
				color: #FF4444;
			}

			.tabbar-item {
				padding-bottom: 20upx;
				&>text {
					display: inline-block;
					height: 70upx;
					line-height: 60upx;
				}
			}

			.tabbar-item-active-btm {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
				width: 56upx;
				height: 8upx;
				background: rgba(255, 68, 68, 1);
				border-radius: 8upx 8upx 0 0;
			}
		}
	}
</style>
