<template>
	<view>
		<!-- 店铺信息 -->
		<view class="storeInfo-wrap w-100 flex j-start a-center">
			<view class="logo mx-2"></view>
			<view class="introduct flex-1 flex j-between flex-column font-28">
				<view>店铺名称</view>
				<view class="intro-deatil">简介:店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介</view>
			</view>
		</view>
		
		<!-- content -->
		<template v-if="isOverdue">
			<view class="w-100 content-wrap flex flex-column j-center a-center">
				<view style="width: 300rpx;height:300rpx;background-color: red;"></view>
				<view class="font-32 font-bold my-3">店铺已打烊</view>
				<view class="mx-5 font-24">如需查看历史购买记录,请前往【我的】登录查看</view>
			</view>
		</template>
		<template v-else>
			<view class="w-100 content-wrap">
				<!-- search bar -->
				<search-bar />
				
				<view class="menu w-100 flex j-around a-center flex-nowrap">
					<view class="flex-1 font-28 flex-column flex j-center a-center" @click="handleMenu('contact')">
						<view style="width: 100rpx;height: 100rpx;">icon位</view>
						<view>联系老板</view>
					</view>
					<view class="flex-1 font-28 flex-column flex j-center a-center" @click="handleMenu('collect')">
						<view style="width: 100rpx;height: 100rpx;">icon位</view>
						<view>收藏历史</view>
					</view>
					<view class="flex-1 font-28 flex-column flex j-center a-center" @click="handleMenu('order')">
						<view style="width: 100rpx;height: 100rpx;">icon位</view>
						<view>我的订单</view>
					</view>
					<label for="share">
						<view class="flex-1 font-28 flex-column flex j-center a-center">
							<view style="width: 100rpx;height: 100rpx;">icon位</view>
							<view>分享</view>
						</view>
					</label>
				</view>
				
				<view>
					<goods-module title="热销111" :list="module1" />
				</view>
			</view>
		</template>
		<!-- <view class="test" @click="login">登录</view>
		<!-- <city-picker @confirmCity="confirmCity"></city-picker> -->
		<!-- <navigator url="/pages/goods/detail">详情页</navigator> -->
		
		<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 cityPicker from '@/components/city-picker/index.vue'
import { mapState } from 'vuex'
import { checkLogin } from '@/utils/common.js'

export default {
	data() {
		return {
			module1: [2,1,1]
		}
	},
	components: {
		searchBar,
		goodsModule,
		
		cityPicker
	},
	computed: {
		...mapState({
			isOverdue: state => state.user.isOverdue,
			token: state => state.user.token
		})
	},
	created() {
		// 获取店铺信息
		uni.setNavigationBarTitle({
			title: '测试店铺'
		})
	},
	
	onShareAppMessage() {
		return {
			title: '分享title'
		}
	},

	methods: {

		handleMenu(type) {
			checkLogin(() => {
				switch(type) {
					case 'contact':
						uni.showModal({
							content: ''
						})
						break;
					case 'collect':
						uni.navigateTo({
							url: '/pages/order/order-list'
						})
						break;
					case 'order':
						uni.navigateTo({
							url: '/pages/order/order-list'
						})
						break;
					default:
						this.$toast({title: '没有找到导航'})
						break;
				}
			})
		},
		login() {
			wx.navigateTo({
				url: '/pages/login/index'
			})
		},
		
		confirmCity(e) {
			console.log(e)
		}
	}
}
</script>

<style lang="scss" scoped>
.storeInfo-wrap {
	height: 240rpx;
	.logo {
		flex: 0 0 160rpx;
		width: 160rpx;
		height: 160rpx;
		background-color: yellow;
	}
	.introduct {
		height: 160rpx;
		.intro-deatil {
			@include  text-ellipsis(2);
		}
	}
}

.content-wrap {
	min-height: calc(100vh - 240rpx);
}

</style>