<template>
	<view class="service">
		<view class="service-content">
			<!-- 标题和轮播图 -->
			<view class="swipper-box">
				<!-- <u-swiper :list="banners" previousMargin="30" nextMargin="30" circular bgColor="#ffffff" height="190" /> -->
				<image src="@/static/icon_test.jpg" class="img"></image>
			</view>
			<view class="countdown-box">
				<view class="down-left">
					优惠推荐
				</view>
				<view class="down-right">
					<view class="right-t">距离结束还剩</view>
					<view class="right-l">
						<view class="l-box">12</view>
						<span class="colon">:</span>
						<view class="l-box">12</view>
						<span class="colon">:</span>
						<view class="l-box">12</view>
					</view>
				</view>
			</view>

			<!-- 价格 -->
			<view class="price-content">
				<view class="price1"> ￥{{ goods.specialPrice }} </view>
				<view class="price2">门市价:￥<span class="price2-text">{{ goods.originalPrice }}</span> </view>
			</view>
			<view class="goods-title">
				<view class="title-left">
					{{ goods.name }}
				</view>
				<view class="title-right" >
					<u-icon @click="handlerShare" name="share" color="#000000" size="22"></u-icon>
				</view>
			</view>
			<view class="explan-box">
				<view class="explan-item"> 预约：可预约/也可直接到门店使用 </view>
				<view class="explan-item"> 须知：周一至周日全天可用·购买后30天内有效 </view>
				<view class="explan-item"> 保障：随时退，过期退 </view>
			</view>
		</view>
		
		<u-gap height="8" bgColor="#F9F9F9"></u-gap>
		
		<view class="service-box">
			<view class="title">服务详情</view>
			<view class="service-detail">{{ goods.description }}</view>
		</view>
		
		<u-gap height="8" bgColor="#F9F9F9"></u-gap>
		
		<view class="goods-comment-box">
			<view class="comment-top">
				<view class="title">商品评价</view>
				<view class="title-leftrow">
					<u-icon name="arrow-right" color="#000" :bold='true' size="16"></u-icon>
				</view>
			</view>
			
			<view class="comment-box">
				<view class="comment-item" v-for="item of 3">
					<view class="item-top-box">
						<view class="item-left">
							<view class="img-box">
								<image src="@/static/QR57a.jpg" class="img"></image>
							</view>
							<view class="comment-name">
								<view class="name">测试名称</view>
								<view class="star">
									<u-rate :readonly='true' :gutter='0' count="5" value="2" activeColor='#F0D267'></u-rate>
								</view>
							</view>
						</view>
						<view class="item-right">2012.3.01</view>
					</view>
					<view class="item-content-box">
						<view class="content">
							这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价这里是评价
						</view>
						<view class="img-content" >
							<image v-for="item of 4" src="@/static/QR57a.jpg" class="content-img"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部 -->
		<view class="service-footer">
			<view class="footer-left">
				<view class="left-item" @click='collect(0)'>
					<view class="item-img">
						<image src="@/static/home/icon_home_detail_shop.png" class="img"></image>
					</view>
					<view class="item-text">店铺</view>
				</view>
				<view class="left-item" @click='collect(1)'>
					<view class="item-img">
						<image src="@/static/home/icon_home_detail_comment.png" class="img"></image>
					</view>
					<view class="item-text">咨询</view>
				</view>
			</view>
			<view class="footer-right">
				<view class="btn1" @click="handlerFavorite">
					<image :src="goods.favorites ? require('@/static/home/icon_home_detail_heart.png') : require('@/static/home/icon_home_detail_heart2.png')" class="img"></image>
					<view>收藏</view>
				</view>
				<view class="btn2" @click="handlerAddCart"> 添加购物车 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsDetailApi,
		addFavorite,
		addShoppingCart,
		addGoodsFavorite,
		cancelFavorite,
		accountToOrderGetComment,
	} from '@/api/client/business.js';
	import {
		accountTotIdGetConponList
	} from '@/api/client/mine.js';
	import couponComponent from './components/couponComponent.vue';
	import evaluateComponent from './components/evaluateComponent.vue';
	export default {
		components: {
			couponComponent,
			evaluateComponent,
		},
		data() {
			return {
				goods: [], //商品详情
				banners: [],
				coupons: [], //优惠券
				comments: [], // 评论
				id: '', //商品id
				shoopId: null, //店铺id
				show: false,
			};
		},
		onLoad(option) {
			// 获取商品详情接口
			this.shoopId = option.shopId;
			this.id = option.id;
			this.handlerInitList(this.id)
		},
		methods: {
			// closeCoupon(data) {
			//   this.show = data;
			//   this.handlerGetGoodsConcentList()
			// },
			handlerInitList(id) {
				getGoodsDetailApi(id).then(res => {
					this.goods = res.data.goods;
					this.comments = res.data.comments;
					res.data.goods.banners.map(rs => {
						this.banners.push(rs.url);
					});
					this.handlerGetGoodsConcentList();
				});
			},
			handlerGetGoodsConcentList() {
				// 获取商品评价列表
				let params = {
					// merchantId:this.shoopId,
					goodsId: this.goods.id,
				};
				accountToOrderGetComment(params).then(res => {
					console.log('@@@@res', res);
				});

				// 根据id获取优惠券列表
				// accountTotIdGetConponList(this.shoopId,{ paging:'1,10' }).then(res=>{
				//   this.coupons = res.data.records
				// })
			},

			// 点击分享
			handlerShare() {
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 1,
					summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
					success: function(res) {},
					fail: function(err) {},
				});
			},

			// 选择底部tab店铺收藏咨询
			collect(item, index) {
				switch (index) {
					case 0:
						uni.navigateBack(-1)
						break;
					case 1:
						uni.showToast({
							title: '暂无',
							icon: 'none',
						});
						break;
				}
			},
			// 点击收藏1
			handlerFavorite() {
				if (this.goods.favorites) {
					cancelFavorite(this.id).then(res => {
						if (res.code === 'OK') {
							this.handlerInitList(this.id);
							uni.showToast({
								title: '取消收藏',
								icon: 'none',
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							});
							return;
						}
					});
				} else {
					addGoodsFavorite(this.id).then(res => {
						if (res.code === 'OK') {
							this.handlerInitList(this.id);
							uni.showToast({
								title: '收藏成功',
								icon: 'none',
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							});
							return;
						}
					});
				}
			},

			// 加入购物车
			handlerAddCart() {
				let params = {
					merchantId: this.shoopId,
					goodsId: this.goods.id,
					quantity: 1,
					price: this.goods.specialPrice,
					goodsName: this.goods.name,
					goodsPic: this.goods.logo,
					originalPrice: this.goods.originalPrice,
				};
				addShoppingCart(params).then(res => {
					if (res.code === 'OK') {
						uni.showToast({
							title: '购物车添加成功',
							icon: 'none',
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
						});
						return;
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.service {
		background-color: #fff;
		font-size: 24rpx;
		padding-bottom: 160rpx;
		.service-content {
			padding: 16rpx 32rpx 24rpx;
			.swipper-box {
				.img {
					width: 100%;
					height: 400rpx;
					border-radius: 16rpx;
				}
			}

			.countdown-box {
				height: 80rpx;
				border-radius: 8rpx;
				background-color: #FDEBEE;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 20rpx;
				.down-left {
					width: 230rpx;
					height: 80rpx;
					background-image: url("@/static/home/icon_home_detail_countdownbg.png");
					background-size: 100% 100%;
					line-height: 80rpx;
					padding-left: 24rpx;
					color: #FFFFFF;
					font-size: 36rpx;
					margin-right:16rpx;
				}
				.down-right{
					color:#333333;
					display: flex;
					align-items: center;
					.right-t{
						margin-right: 16rpx;
					}
					.right-l{
						display: flex;
						.l-box{
							background-color: #F43F5E;
							border-radius: 4rpx;
							padding: 6rpx 8rpx;
							border-radius: 4rpx;
							text-align: center;
							align-items: center;
							color: #fff;
						}
						.colon{
							margin: 0 4rpx;
							color: #F43F5E;
							font-weight: bold;
						}
					}
				}
			}
		}

		.price-content {
			display: flex;
			align-items: center;
			margin-top: 32rpx;
			.price1 {
				font-size: 48rpx;
				color: #0C1223;
				font-weight: bold;
				margin-right: 16rpx;
			}
			.price2 {
				font-size: 24rpx;
				color: #616570;
				.price2-text{
					text-decoration: line-through;
				}
			}
		}
		.goods-title{
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;
			.title-left{
				width: 92%;
				font-size: #0C1223;
				font-weight: bold;
				font-size: 32rpx;
			}
			.title-right{
				width: 8%;
			}
		}
		.explan-box{
			margin-top: 24rpx;
			.explan-item{
				color: #616570;
				font-size:24rpx;
				margin-bottom: 8rpx;
			}
			.explan-item:last-child{
				margin: 0;
			}
		}
		.service-box,.goods-comment-box{
			padding: 16rpx 32rpx 24rpx;
			.title{
				color: #0C1223;
				font-size:32rpx;
				font-weight: bold;
			}
			.service-detail{
				color: #616570;
				font-weight: 28rpx;
				margin-top: 24rpx;
			}
		}
		.goods-comment-box{
			.comment-top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 32rpx;
				.title-leftrow{
					
				}
			}
			.comment-box{
				.comment-item{
					margin-bottom: 32rpx;
					.item-top-box{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.item-left{
							display: flex;
							.img-box{
								.img{
									width: 88rpx;
									height: 88rpx;
									border-radius: 50%;
								}
							}
							.comment-name{
								margin-left: 16rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-around;
								.name{
									color: #0C1223;
								}
								.star{
									
								}
							}
						}
					}
					.item-content-box{
						.content{
							
						}
						.img-content{
							display: grid;
							grid-template-columns: repeat(3 , 32%);
							grid-gap: 16rpx;
							.content-img{
								width: 218rpx;
								height: 218rpx;
								border-radius: 16rpx;
							}
						}
					}
				}
			}
		}
		
		
		

		.evaluate {
			height: 30rpx;
			margin: 30rpx 0 30rpx 20rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #f4f4f4;
		}

		.evaluate-context {
			.evaluate {
				border-bottom: none;
				padding-bottom: 10rpx;
			}
		}

		/* 占位 */
		.placeholder {
			height: 30rpx;
			background-color: #f4f4f4;
		}
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.text_title {
		font-size: 24rpx;
		color: #999;
	}

	// 底部
	// .service-footer {

	// 	padding: 20rpx 40rpx 80rpx 60rpx;
	// 	position: fixed;
	// 	left: 0;
	// 	bottom: 0;
	// 	right: 0;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	background-color: #fff;
	// 	border-top: 1px solid #eb8b8b;
	// 	box-sizing: border-box;

	// 	.u-icon {
	// 		justify-content: center !important;
	// 	}

	// 	.user-operate {
	// 		text-align: center;
	// 	}

	// 	.user-operate-text {
	// 		font-size: 24rpx;
	// 		font-weight: 600;
	// 	}

	// 	.buyNow {
	// 		width: 200px;
	// 		height: 40px;
	// 		display: flex;
	// 		justify-content: flex-end;
	// 		font-size: 26rpx;
	// 		color: #fff;
	// 		text-align: center;

	// 		.cart {
	// 			width: 150px;
	// 			line-height: 40px;
	// 			cursor: pointer;
	// 			background-color: #fe9f1e;
	// 			// border-radius: 40px 0px 0px 40px;
	// 			border-radius: 40px;
	// 		}

	// 		.buy {
	// 			width: 100px;
	// 			line-height: 40px;
	// 			cursor: pointer;
	// 			background-color: #fe7421;
	// 			border-radius: 0 40px 40px 0;
	// 		}
	// 	}
	// }
	
	.service-footer {
		padding: 20rpx 20rpx 40rpx 40rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background-color: #fff;
		.footer-left{
			display: flex;
			.left-item{
				margin-right: 32rpx;
				.item-img{
					.img{
						width: 44rpx;
						height: 44rpx;
					}
				}
				.item-text{
					color: #0C1223;
					font-size: 24rpx;
				}
			}
		}
		.footer-right{
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			.btn1{
				padding: 20rpx 54rpx;
				background-color: #0C1223;
				color: #fff;
				text-align: center;
				align-items: center;
				border-radius: 8rpx;
				display: flex;
				margin-right: 20rpx;
				vertical-align: middle;
				.img{
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
			.btn2{
				border-radius: 8rpx;
				padding: 20rpx 82rpx;
				background-color: #215EBE;
				color: #fff;
			}
		}
	}
</style>