<template>
	<view>
		<!-- 顶部图片 -->
		<image class="top-bg" src="/static/images/common/home-bg.png" mode="widthFix"></image>
		
		<!-- 导航栏 -->
		<c-nav_bar
			:color="navColor"
			:title="storeInfo.shop_name"
			:bg="navBg"
		/>
		
		<view :style="{height: systemInfo.menuButtonInfo.bottom + 15 + 'px'}"></view>
		<!-- 店铺信息 -->
		<view class="store-wrap">
			<navigator
				url="/subPages/storeInfo/index"
				hover-class="none"
				class="storeInfo-wrap w-100 flex j-start a-center"
			>
				<view class="logo">
					<image
						v-if="storeInfo.shop_img"
						class="img"
						:src="baseUrl + '/' + storeInfo.shop_img"
						mode="aspectFit"
					/>
				</view>
				<view class="introduct flex-1 ml-3">
					<view class="shop-name mb-2">{{storeInfo.shop_name || ''}}</view>
			
					<view class="intro-deatil font-24">简介: {{storeInfo.shop_intro || ''}}</view>
				</view>
			</navigator>
			
			<view class="w-100">
				<view class="menu pb-3 mb-1 w-100 flex j-around a-center flex-nowrap">
					<view 
						class="flex-1 font-24 flex-column flex j-center a-center"
						@click="handleMenu('contact')"
					>
						<image 
							class="menu-icon" 
							src="../../static/images/common/icon-call.png" 
							mode="aspectFit" 
						/>
						<view>联系老板</view>
					</view>
					<view 
						class="flex-1 font-24 flex-column flex j-center a-center"
						@click="handleMenu('collect')"
					>
						<image
							class="menu-icon" 
							src="../../static/images/common/icon-collect.png" 
							mode="aspectFit" 
						/>
						<view>收藏历史</view>
					</view>
					<view 
						class="flex-1 font-24 flex-column flex j-center a-center"
						@click="handleMenu('order')"
					>
						<image
							class="menu-icon" 
							src="../../static/images/common/icon-order.png" 
							mode="aspectFit" 
						/>
						<view>我的订单</view>
					</view>
					<label 
						class="flex-1 font-24 flex-column flex j-center a-center" 
						for="share"
					>
						<image
							class="menu-icon" 
							src="../../static/images/common/icon-share.png" 
							mode="aspectFit" 
						/>
						<view>分享</view>
					</label>
				</view>
			
			</view>
		</view>
	
		<!-- content -->
		<template v-if="isOverdue">
			<over-due />
		</template>
		<template v-else>
			<!-- search bar -->
			<search-bar bg="#f2f2f2" innerBg="#fff" />
			
			<view class="w-100 content-wrap">
				
				<block v-if="cate_data.xplist.length || cate_data.cxlist.length || cate_data.bklist.length && !searchList.length">
					<template v-if="cate_data">
						<goods-module
							v-if="cate_data.xplist.length > 0"
							title="新品推荐" 
							:list="cate_data.xplist" 
							@purchase="purchase"
						/>
						
						<goods-module
							v-if="cate_data.cxlist.length > 0"
							title="热销商品"
							:list="cate_data.cxlist"
							@purchase="purchase"
						/>
						
						<goods-module
							v-if="cate_data.bklist.length > 0"
							title="爆款商品"
							:list="cate_data.bklist"
							@purchase="purchase"
						/>
					</template>
				</block>
				
				<block v-else>
					<!-- 综合商品 -->
					<template v-if="searchList.length > 0">
						<view class="w-100">
							<view class="list-wrap w-100 flex j-start a-center flex-wrap">
								<block
									v-for="(item, index) in searchList"
									:key="index"
								>
									<template
										v-for="(search, searchidx) in item"
									>
										<navigator
											class="list-item mb-3 ml-3"
											hover-class="none"
											v-for="good in item"
											:key="good.goods_id"
											:url="'/pages/goods/detail?goods_id=' + good.goods_id"
										>
											<image
												lazy-load
												class="goods_cover w-100" 
												:src="baseUrl + '/' + good.goods_thumb" 
												mode="aspectFit"
											/>
											<view class="goods-info flex flex-column j-between">
												<view class="title font-28 my-1">{{good.goods_name}}</view>
												<view class="flex j-between a-center mt-1 mb-2">
													<price
														:is_inquiry="good.is_inquiry"
														:price="good.shop_price"
													/>
													<image 
														class="cart-btn"
														@click.stop="handlePop(good)"
														src="/static/images/common/icon-cart.png" 
														mode="aspectFit"
													/>
												</view>
											</view>
										</navigator>
									</template>
								</block>
							</view>
						</view>
					</template>
					<empty-view
						v-else
						iconSrc="/static/images/common/noGoods.png"
						text="店铺尚未上架商品"
					/>
				</block>
	
			</view>
		</template>

		<!-- 购物弹窗 -->
		<goods-popup ref="popup" :fitIphoneX="false" />
		<button type="default" open-type="share" id="share"></button>
	</view>
</template>

<script>
import searchBar from '@/components/search-bar/index.vue'
import goodsModule from './components/goods-module.vue'
import goodsPopup from '@/components/goods-popup/index.vue'
import price from '@/components/price/index.vue'
import overDue from '@/components/overDue-view/index.vue'
import cNavBar from '@/components/c-nav_bar/index.vue'

import LoadMore from '@/utils/load-more.js'
import { checkLogin } from '@/utils/modules/login.js'
import indexModule from './index.js'
import { baseUrl } from '@/config/index.js'
import { makePhoneCall, throttle, debounce } from '@/utils/common.js'
import { goodsSku } from '@/apis/goods.js'
import { mapState, mapActions } from 'vuex'
import common_share from '@/mixins/setting_share.js'

export default {
	data() {
		return {
			rateValue: 0,
			
			baseUrl,
			cate_data: {},
			searchList: [],
			navBg: "rgba(255, 255, 255, 0)",
			navColor: '#fff',
		}
	},
	
	components: {
		searchBar,
		goodsModule,
		goodsPopup,
		price,
		overDue,
		cNavBar
	},
	
	computed: {
		...mapState(['systemInfo']),
		...mapState({
			isOverdue: state => state.user.isOverdue,
			token: state => state.user.token
		})
	},
	
	mixins: [common_share],

	created() {
		// 实例化分页方法
		this.loadmore = new LoadMore()
		this.getHomeCate()
	},
	
	onShow() {
		// 实时更新店铺信息
		this.getStoreInfo()
		if(this.token) {
			this.setCount()
		}
	},
	
	// mounted() {
	// 	const storeInfo = this.storeInfo
	// 	if(storeInfo.shop_name) {
	// 		// 获取店铺信息
	// 		// uni.setNavigationBarTitle({
	// 		// 	title: storeInfo.shop_name
	// 		// })
	// 	}
	// },
	
	// 下拉刷新
	onPullDownRefresh() {
		uni.showLoading({
			title: '加载中...'
		})
		this.getStoreInfo()
		this.getHomeCate()
		let timer = setTimeout(() => {
			clearTimeout(timer)
			timer = null
			uni.hideLoading()
			uni.stopPullDownRefresh()
		}, 800)
	},
	
	onPageScroll: throttle(function(e) {
		const scrollTop = e.scrollTop
		if(scrollTop > 100) {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff',
				animation: true
			})
			this.navColor = '#333'
			this.navBg = 'rgba(255, 255, 255, 1)'
		} else {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#ffffff',
				animation: true,
				fail: e=> console.log(e)
			})
			this.navColor = '#fff'
			this.navBg = 'rgba(255, 255, 255, 0)'
		}
	}, 300),
	
	onReachBottom() {
		console.log('触底')
		const cate_data = this.cate_data
		if(this.checkShowAll(cate_data)) {
			console.log('pass')
			this.searchData()
		}
	},
	
	methods: {
		...mapActions('cart', ['setCount']),
		...mapActions('user', ['getStoreInfo']),
		...indexModule,
		
		purchase(e) {
			this.$refs.popup.show(e)
		},
		
		// 点击菜单
		handleMenu(type) {
			checkLogin(() => {
				switch(type) {
					case 'contact':
						makePhoneCall()
						break;
					case 'collect':
						uni.navigateTo({
							url: '/subPages/collection/index'
						})
						break;
					case 'order':
						uni.navigateTo({
							url: '/pages/order/order-list'
						})
						break;
					default:
						this.$toast({title: '没有找到导航'})
						break;
				}
			})
		},
		
		// 点击拉起弹窗
		handlePop: debounce(async function(goods) {
			try{
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				const { status, data } = await goodsSku(goods.goods_id)
				if(status) {
					const params = {
						goodsInfo: {
							cover: `${this.baseUrl}/${goods.goods_thumb}`,
							title: goods.goods_name,
							is_inquiry: goods.is_inquiry,
							unit: goods.goods_unit
						},
						skuData: data
					}
					this.$refs.popup.show(params)
				}
				uni.hideLoading()
			}catch(e){
				console.log(e)
				uni.hideLoading()
				//TODO handle the exception
			}
		}, 800)
	}
}
</script>

<style lang="scss" scoped>
.top-bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 500rpx;
}
.store-wrap {
	width: 690rpx;
	margin: 0 auto;
	border-radius: 16rpx;
	background-color: #fff;
	.storeInfo-wrap {
		@include borderBox(30rpx, 30rpx);
		.logo {
			flex: 0 0 140rpx;
			width: 140rpx;
			height: 140rpx;
			border-radius: 8rpx;
			overflow: hidden;
			.img {
				width: 100%;
				height: 100%;
			}
		}
		.introduct {
			height: 140rpx;
			.shop-name {
				line-height: 42rpx;
				font-size: 30rpx;
			}
			.intro-deatil {
				line-height: 40rpx;
				color: #7F7F7F;
				@include  text-ellipsis(2);
			}
		}
	}
}

.menu {
	.menu-icon {
		width: 66rpx;
		height: 66rpx;
		margin-bottom: 20rpx;
	}
}

.content-wrap {
	margin-top: 10rpx;
	
	.list-wrap {
		.list-item {
			box-sizing: border-box;
			width: 330rpx;
			height: 500rpx;
			background-color: $white;
			border-radius: 8rpx;
			.goods_cover {
				height: 330rpx;
			}
			.goods-info {
				@include borderBox(0, 20rpx);
				height: 180rpx;
				
				.title {
					@include text-ellipsis(2)
				}
				.cart-btn {
					width: 34rpx;
					height: 32rpx;
				}
			}
		}
	}
}

</style>