<template>
	<view class="">
		<view class="shop-info-wrap">
				<view class="info-wrap flex-between">
					<view></view>
					<text class="shopName">{{ shopInfo.storeInfo.shopName }}</text>
					<view class="close" @click="showShopInfo = false">
						<u-icon name="close" color="#999999" size="28"></u-icon>
					</view>
				</view>
				<view class="info-wrap-title">商家信息</view>
				<view class="row" style="margin-bottom: 20rpx;">
					<view class="col">
						<text class="l">营业时间：</text>
						<text
							class="t">{{ (shopInfo.storeInfo.businessStartDay || '——') +'至'+ (shopInfo.storeInfo.businessEndDay || '——') +' '+ (shopInfo.storeInfo.businessTime || '')}}</text>
					</view>
					<view class="col">
						<text class="l">商家地址：</text>
						<text class="t">{{ shopInfo.storeInfo.address }}</text>
					</view>
					<view class="col" @click="makePhoneCall(shopInfo.storeInfo.phone)">
						<text class="l">商家电话：</text>
						<text class="t">{{ shopInfo.storeInfo.phone }}</text>
					</view>
				</view>
				<view class="info-wrap-title">商家公告</view>
				<view class="row">
					<view class="col">
						<text class="l">公告：</text>
						<text class="t">{{ shopInfo.storeInfo.detail }}</text>
					</view>
				</view>

			</view>
		
			<view class="shop_bottom ">
					<view class="flex-between">
						<view class="price">
							<text class="i">￥</text>
							<text class="num">{{salePrice}}</text>
							<text class="i">/{{specifications.unitSnap}}</text>
						</view>
						<view class="operation-wrap">

							<view class="btn">
								<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
								<view class="btnClick" @click="shopAdd(specifications,specifications.indexa,specifications.indexb,'-',specifications.tagSnap == null ? '单规格':'')"></view>
							</view>
							<text class="num">{{amountcartNumber}}</text>
							<view class="btn" >
								<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
								<view class="btnClick" @click="shopAdd(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')"></view>
							</view>
						</view>
					</view>
					<view class="shop_skuselect flex-start" v-if="specifications.tagSnap">
						<view class="shop_skuselectname">{{skuidname.toString()}}</view>
					</view>
					<view class="addShopping" :class="(amountcartNumber>0&&isSpec)?'active':''"
						@click="addShopping(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">
						{{skuBtnText}}
					</view>
				</view>
	</view>
</template>

<script>
	import videoList from '../../../components/videoList/videoList.vue'
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty,
			videoList
		},
		data() {
			return {
			
			}
		},
		onShow() {
			this.enable = true
			this.getCourseList()
		},
		onHide() {
			this.enable = false
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.title
			})
			this.getBannerList()
			if (option.sort) {
				this.sort = option.sort
			}
			if (option.isPrice) {
				this.isPrice = option.isPrice
			}

		},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			//点击回调
			posterSuccess(item) {
				uni.navigateTo({
					url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId
				})
			},
			//最新热播
			getCourseList() {
				let data = {
					limit: this.limit,
					page: this.page,
					sort: this.sort ? this.sort : '',
					title: this.keyword,
				}
				// #ifdef MP-WEIXIN
				data.wxShow = 1
				// #endif
				// #ifdef MP-TOUTIAO
				data.dyShow = 1
				// #endif
				if (this.isPrice) {
					data.isPrice = this.isPrice
				}
				this.$u.api.courseList(data).then(res => {
					if (res.code == 0) {
						this.pages = res.data.totalPage
						if (this.page < this.pages) {
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
						// res.data.list.forEach(ret => {
						// 	ret.courseLabel = ret.courseLabel ? ret.courseLabel.split(',') : []
						// })
						if (this.page == 1) {
							this.courseList = res.data.list
						} else {
							this.courseList = [...this.courseList, ...res.data.list]
						}
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
					uni.stopPullDownRefresh();

				})
			},
			// 获取轮播图列表
			getBannerList() {
				this.$u.api.bannerList({
					classify: '1'
				}).then(res => {
					if (res.code == 0) {
						res.data.forEach(d => {
							if (d.state == 1) {
								this.swiperList.push(d)
							}
						})

					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},

		},
		onReachBottom: function() {
			if (this.page < this.pages) {
				this.page += 1
				this.status = 'loading'
				this.getCourseList()

			} else {
				this.status = 'nomore'
			}

		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getCourseList()
		},
	}
</script>

<style lang="scss" scoped>
	.search-box {
		width: 100%;
		padding: 15upx 2.5%;
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
	}

	.vidoList {
		width: 100%;
		height: auto;
		margin-bottom: 20rpx;

		.vidoList-item {
			width: calc((100% - 40rpx) / 3);
			height: 356rpx;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			margin-bottom: 20rpx;
		}

		.vidoList-item-img {
			width: 100%;
			height: 280rpx;
			border-radius: 24rpx 24rpx 0 0;

			image {
				width: 100%;
				height: 100%;
				border-radius: 24rpx 24rpx 0 0;
			}
		}

		.vidoList-item-title {
			width: 100%;
			text-align: center;
			background-color: #FFFFFF;
			border-radius: 0 0 24rpx 24rpx;
			padding: 20rpx;
			overflow: hidden;
			text-overflow: ellipsis; //溢出用省略号显示
			white-space: nowrap; // 默认不换行；
		}
	}

	.swiper {
		width: 100%;
		height: auto;
		margin-bottom: 10rpx;
		margin-top: 10rpx;

		.swiper-box {
			width: 686rpx;
			height: 100%;
		}
	}

	.active {
		color: #5074FF;
	}

	.btn {
		width: 150upx;
		height: 60upx;
		background: #5074FF;
		border-radius: 30upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
		font-size: 26rpx;
	}
</style>