<template>
	<el-layout>
		<el-navbar v-model:scroll="scroll" :opacity="0" :border="false" :fixed="true" title="商品详情"></el-navbar>
		
		<view class="wrapper" v-if="!isEmpty(goods)">
			<view class="swiper">
				<view>
					<swiper class="swiper-box" :circular="true" :current="current" @change="onSwiperChange">
						<swiper-item class="swiper-item" v-for="(item, index) in goods.image" :key="index">
							<image :src="item" mode="scaleToFill"></image>
						</swiper-item>
					</swiper>
					<view class="swiper-indicator">
						<view v-for="(v,i) in goods.image.length" :key="i" :class="{ active: i == current }"></view>
					</view>
				</view>
			</view>
			
			<view class="goods-info">
				<view class="goods-price">
					<view class="price">
						￥<text>{{ goods.sell_price }}</text>
						<text>￥{{ goods.market_price }}</text>
					</view>
					<view class="share"><text @click="isShare = true" class="iconfont icon-share"></text></view>
				</view>
				<view class="goods-name">{{ goods.title }}</view>
				<view class="goods-store">
					<view>库存：{{ goods.store_nums }} {{ goods.unit || "件" }}</view>
					<view>销量：{{ goods.sale }}</view>
					<view>浏览：{{ goods.visit }} 次</view>
				</view>
				<view class="attribute" v-if="couponList.length >= 1" @click="isCoupon = !isCoupon">
					<view class="attribute-wrap">
						<view class="label"><text class="iconfont icon-coupon"></text></view>
						<view class="coupon-box">
							<view class="coupon-item" v-for="(item,index) in couponList.slice(0,2)" :key="index">{{ item.title }}</view>
						</view>
					</view>
					<view class="arrow">
						<uni-icons type="right" color="#888" size="30rpx"></uni-icons>
					</view>
				</view>
				<view class="attribute" v-if="attrList.length >= 1" @click="isAttr = !isAttr">
					<view class="attribute-wrap">
						<view class="label"><text class="iconfont icon-attribute"></text></view>
						<view class="attr-box">
							<scroll-view scroll-x style="white-space: nowrap; width:100%">
								<view class="attr-item" v-for="(item,index) in attrList" :key="index">
									<text>{{ item.name }}</text>
									<text v-if="attrList.length != index + 1">-</text>
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="arrow">
						<uni-icons type="right" color="#888" size="30rpx"></uni-icons>
					</view>
				</view>
			</view>
			
			<view class="comments">
				<view class="title">
					<text>商品评价</text>
					<text @click="navigateTo(`pages/comments/index?id=${goods.id}&type=0`)">更多</text>
				</view>
				
				<view class="comments-list">
					<view class="empty" v-if="isEmpty(commentsList)">该商品还没有评论哦！</view>
					<view v-else class="comments-box" v-for="(comment,idx) in commentsList" :key="idx">
						<view class="top">
							<view class="avatar">
								<view class="image"><image :src="comment.avatar"></image></view>
								<view class="username">
									<view>{{ comment.username }}</view>
									<view v-if="!isEmpty(comment.spec)">{{ comment.spec }}</view>
								</view>
							</view>
							<view class="time">{{ comment.comment_time }}</view>
						</view>
						<view class="comments-content">
							{{ comment.content }}
							<view v-if="!isEmpty(comment.image)">
								<image v-for="(img,j) in comment.image" :key="j" :src="img" @click="jumpPic(comment.image,j)"></image>
							</view>
						</view>
						<view class="comments-reply" v-if="!isEmpty(comment.reply_content)">
							<view class="reply">
								<view>商家回复：</view>
								<view>{{ comment.reply_content }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="goods-recommend" v-if="recommend.length > 0">
				<view class="title">商品推荐</view>
				<view class="recommend-wrap">
					<scroll-view scroll-x style="white-space: nowrap; width:100%">
						<view 
						class="recommend-box" 
						v-for="(value,index) in recommend" 
						:key="index"
						@click="navigateTo('pages/goods/view?id=' + value.id)">
							<view class="photo">
								<image :src="value.image"></image>
							</view>
							<view class="goods-name">{{ value.name }}</view>
							<view class="price">￥<text>{{ value.sell_price }}</text></view>
						</view>
					</scroll-view>
				</view>
			</view>
			
			<view class="goods-content">
				<view class="title">产品介绍</view>
				<view class="content">
					<mp-html :content="goods.content" />
				</view>
			</view>
			
		</view>
		
		<view class="footer">
			<uni-goods-nav :fill="true" :options="groupOptions" :buttonGroup="buttonGroup"  @click="onIconGroup" @buttonClick="onBuy" />
		</view>
		
		<spec v-model="isSpec" :goods="goods" @change="onGoodsSkuInfo" />
		<attribute v-model="isAttr" :list="attrList" />
		<coupon v-model="isCoupon" :list="couponList" @click="onCouponReceive" />
		<share v-model="isShare" :params="shareParams" @share="onShare" />
		<poster v-model="isPoster" v-model:data="posterData" />
		<el-loading v-model="isLoading"></el-loading>
	</el-layout>
</template>

<script setup>
	import { ref } from "vue";
	import { onLoad,onPageScroll,onShareAppMessage,onShareTimeline } from "@dcloudio/uni-app";
	import { useUserStore } from "@/store/user.js";
	import { useAppStore } from "@/store/app.js";
	import { isEmpty } from "@/el-ui/libs/check";
	import * as wechat from "@/el-ui/share/wechat";
	import { navigateTo } from "@/el-ui/libs/navigate";
	import cart from "@/api/cart";
	
	const site = useAppStore().getApp();
	const { user,isLogin } = useUserStore();
	
	const isLoading = ref(false);
	const goods   = ref({});
	const shareParams = ref({});
	onLoad(async (option)=>{
		isLoading.value = true;
		wechat.config("goods");
		uni.$http.get("goods.index/detail",{ id: option.id || 0 }).then(res=>{
			isLoading.value = false;
			if(res.code){
				goods.value = res.data;
				attrList.value = goods.value.attr;
				wechat.share({ title: goods.value.title, imgUrl: goods.value.photo });
				shareParams.value = {
					title: goods.value.title,
					text: goods.value.title,
					image: goods.value.photo,
					url: uni.$http.getDomain() + '/mobile/pages/goods/view?id=' + option.id
				};
			}
			
			getComments(option.id);
			getRecommend(option.id);
		});
		
		groupOptions.value[2].info = await cart.total();
		getCouponList();
	});
	
	const commentsList = ref([]);
	const getComments = (id)=>{
		uni.$http.get("goods.comments/index",{ goods_id: id }).then(res=>{
			if(res.code){
				commentsList.value = res.data.list;
			}
		});
	}
	
	// 购买
	const isSpec = ref(false);
	const goodsInfo = ref({});
	const onBuy = async (e)=>{
		if(isSpec.value == false){
			isSpec.value = true;
			return false;
		}
		
		let info = goodsInfo.value;
		if(!info.isSubmit){
			uni.$layer.showToast('请选择商品规格');
			return false;
		}
		
		if(info.num <= 0){
			uni.$layer.showToast("请输入需要购买的商品数量");
			return false;
		}
		
		let params = {};
		params.id = info.id;
		params.num = info.num;
		if(info.spec.id > 0){
			params.sku_id = info.spec.id;
		}
		
		// 购物车 
		if(e.index == 0){
			const { code, data, msg } = await uni.$http.post("cart/add",params);
			if(code){
				uni.$layer.showToast("添加商品成功");
				groupOptions.value[2].info = await cart.total();
			}else{
				uni.$layer.showToast(msg);
			}
			
			return false;
		}
		
		// 直接购买
		isSpec.value = false;
		navigateTo(`/pages/cart/confirm?type=buy&id=${params.id}&sku_id=${params.sku_id || 0}&num=${params.num}`);
		return true;
	}
	
	const onGoodsSkuInfo = (event)=>{
		goodsInfo.value = event;
	}
	
	// 分享
	const isShare      = ref(false);
	const isPoster 	   = ref(false);
	const posterData   = ref({});
	const onShare = (e)=>{
		if(!isLogin){
			navigateTo('pages/user/login');
			return ;
		}
		
		if(e.id == "poster"){
			posterData.value = {
				type: 'goods',
				title: goods.value.title,
				image: goods.value.photo,
				sell_price: goods.value.sell_price,
				market_price: goods.value.market_price,
				url: "pages/goods/view?id=" + goods.value.id
			};
			
			isPoster.value = true;
		}
		
		isShare.value = false;
	}
	
	// 优惠券
	const isCoupon   = ref(false);
	const couponList = ref([]);
	const getCouponList = ()=>{
		uni.$http.get("goods.index/coupon").then(res=>{
			if(res.code){
				couponList.value = res.data;
			}
		});
	}
	
	// 商品参数
	const isAttr   = ref(false);
	const attrList = ref([]);
	
	const onCouponReceive = (value)=>{
		uni.$http.post("coupon/receive",{ id: value.data.id }).then(res=>{
			if(res.code){
				couponList.value[value.index].status = 2;
				uni.$layer.showToast("领取成功");
			}else{
				uni.$layer.showToast(res.msg);
			}
		});
	}
	
	// 商品推荐
	const recommend = ref([]);
	const getRecommend = (value)=>{
		uni.$http.get("goods.index/recommend",{ id: value }).then(res=>{
			if(res.code){
				recommend.value = res.data;
			}
		})
	}
	
	const scroll = ref(0);
	onPageScroll((event)=>{
		scroll.value = event.scrollTop;
	});
	
	const groupOptions = ref([
		{
			icon: 'home',
			text: '首页'
		},
		{
			icon: 'heart',
			text: '收藏'
		},
		{
			icon: 'cart',
			text: '购物车',
			info: 0
		}
	]);
	
	const buttonGroup = ref([
		{
			text: '加入购物车',
			backgroundColor: '#ffa200',
			color: '#fff'
		},
		{
			text: '立即购买',
			backgroundColor: '#ff0000',
			color: '#fff'
		}
	]);
	
	const onIconGroup = (e)=>{
		switch(e.content.icon){
			case "home":
				navigateTo('/pages/index/index');
				break;
			case "heart":
			case "heart-filled":
				uni.$http.post("goods.index/collect",{ id: goods.value.id }).then(res=>{
					if(res.code){
						groupOptions.value[1].icon 		= res.data == 1 ? "heart-filled" : "heart";
						groupOptions.value[1].iconColor = res.data == 1 ? "red" : "#646566";
						groupOptions.value[1].textColor = res.data == 1 ? "red" : "#646566";
						uni.$layer.showToast(res.data == 1 ? "收藏成功" : "取消收藏成功");
					}else{
						uni.$layer.showToast(res.msg);
					}
				});
				break;
			case "cart":
				navigateTo('/pages/index/cart');
				break;
		}
	}
	
	const current = ref(0);
	const onSwiperChange = (event)=>{
		current.value = event.detail.current;
	}
	
	const jumpPic = (value,index)=>{
		uni.$storage.setJson("picList",value);
		uni.$storage.set("picIndex",index);
		navigateTo("pages/public/picture");
	}
	
	// #ifdef MP-WEIXIN
	onShareAppMessage(()=>{
		let desc = "";
		let path = "/pages/goods/view?id=" + goods.value.id;
		if(!isEmpty(user)){
		  path += `&u=${user.id}`
		  desc = users.nickname + "，为您推荐";
		}
		
		return {
		  title : this.products.title,
		  desc  : desc,
		  path  : path
		};
	});
	
	onShareTimeline(()=>{
		let query = "id=" + goods.value.id;
		if(!isEmpty(user)){
		  query += `&u=${user.id}`;
		}
		
		return {
		  title   : site.name,
		  query   : query,
		  imageUrl: ""
		};
	});
	// #endif
</script>

<style lang="scss" scoped>
	.wrapper{
		.swiper {
			width: 100%;
			height: 750rpx;
			position: relative;
			.swiper-box {
				width: 100%;
				height: 750rpx;
				.swiper-item {
					image {
						width: 100%;
						height: 750rpx;
					}
				}
			}
			.swiper-indicator {
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				bottom: 10px;
				text-align: center;
				white-space: nowrap;
				view {
					display: inline-block;
					width: 8px;
					height: 8px;
					cursor: pointer;
					transition-timing-function: ease;
					background: rgba(0, 0, 0, .3);
					border-radius: 50%;
					&.active {
						background: rgb(233,51,35);
					}
				}
			}
		}
		.goods-info {
			background-color: #fff;
			.goods-price {
				margin: 0 30rpx;
				padding-top: 26rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: flex-end;
				justify-content: space-between;
				.price {
					font-size: 28rpx;
					font-weight: 700;
					color: #e93323;
					text {
						&:nth-child(1){
							font-size: 48rpx;
						}
						&:nth-child(2){
							font-size: 30rpx;
							text-decoration: line-through;
							padding-left: 15rpx;
							color: #888;
						}
					}
				}
				.share {
					text {
						color: #888;
						font-size: 48rpx;
					}
				}
			}
			.goods-name {
				min-height: 45rpx;
				font-size: 32rpx;
				font-weight: 700;
				padding: 12rpx 30rpx;
				word-break: break-all;
			}
			.goods-store {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				padding: 12rpx 30rpx 15rpx 30rpx;
				view {
					width: 100%;
					font-size: 26rpx;
					color: #888;
					&:nth-child(1){ text-align: left; }
					&:nth-child(2){ text-align: center; }
					&:nth-child(3){ text-align: right; }
				}
			}
			.attribute {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 12rpx 30rpx 15rpx 30rpx;
				border-top: 1rpx solid #f5f5f5;
				.attribute-wrap {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.label {
						width: 70rpx;
						margin-top: 4rpx;
						text {
							font-size: 40rpx;
							color: #888;
						}
					}
					.attr-box {
						padding-left: 10rpx;
						.attr-item {
							display: inline-block;
							width: auto;
							height: 27rpx;
							line-height: 27rpx;
							text-align: center;
							text {
								padding: 0 5rpx;
								font-size: 26rpx;
								color: #555;
								&:nth-child(2){
									color: #bbb;
								}
							}
						}
					}
					.coupon-box {
						display: flex;
						.coupon-item {
							height: 40rpx;
							padding: 0 20rpx;
							border: 1rpx solid rgba(233,51,35,.5);
							color: rgb(233,51,35);
							font-size: 24rpx;
							line-height: 40rpx;
							position: relative;
							text-overflow: ellipsis;
							white-space: nowrap;
							z-index: 1;
							margin-right: 15rpx;
							&:before {
								content: ' ';
								position: absolute;
								width: 6rpx;
								height: 10rpx;
								border-radius: 0 6rpx 6rpx 0;
								border: 1rpx solid rgba(233,51,35,.5);
								background-color: #fff;
								bottom: 50%;
								left: -2rpx;
								margin-bottom: -6rpx;
								border-left-color: #fff;
								z-index: 1000;
							}
							&::after {
								content: ' ';
								position: absolute;
								width: 6rpx;
								height: 10rpx;
								border-radius: 6rpx 0 0 6rpx;
								border: 1rpx solid rgba(233,51,35,.5);
								background-color: #fff;
								right: -2rpx;
								bottom: 50%;
								margin-bottom: -6rpx;
								border-right-color: #fff;
							}
						}
					}
				}
			}
		}
		.comments {
			background-color: #fff;
			margin-top: 20rpx;
			font-size: 28rpx;
			.title {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #ddd;
				text {
					&:nth-child(2){
						font-size: 26rpx;
						color: #888;
					}
				}
			}
			.comments-list {
				padding: 0 30rpx;
				min-height: 200rpx;
				.empty {
					text-align: center;
					line-height: 200rpx;
				}
				.comments-box {
					border-bottom: 1px solid #ddd;
					padding-bottom: 20rpx;
					&:last-child{
						border-bottom: 0;
					}
					.top {
						color: #666;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 20rpx;
						.avatar {
							display: flex;
							justify-content: center;
							align-items: center;
							.image {
								display: inline-block;
								image {
									width: 90rpx;
									height: 90rpx;
									border-radius: 50%;
									overflow: hidden;
								}
							}
							.username {
								margin-left: 10rpx;
								view {
									&:nth-child(1){
										font-size: 28rpx;
									}
									&:nth-child(2){
										color: #888;
										font-size: 22rpx;
									}
								}
							}
						}
						.time {
							
						}
					}
					.comments-content {
						padding:10rpx 0;
						view {
							padding: 10rpx 0;
							image {
								width: 100rpx;
								height: 100rpx;
								margin-right: 15rpx;
								&:last-child {
									margin-right: 0;
								}
							}
						}
					}
					.comments-reply {
						background-color: #eee;
						border-radius: 8rpx;
						margin-bottom: 15rpx;
						.reply {
							padding: 20rpx;
							view {
								padding: 3rpx 0;
								&:nth-child(2){
									font-size: 28rpx;
									padding-top: 10rpx;
								}
							}
						}
					}
				}
			}
		}
		.goods-recommend {
			margin-top: 20rpx;
			background-color: #fff;
			overflow: hidden;
			.title {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: rgb(233,51,35);
			}
			.recommend-wrap {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				width: 100%;
				padding: 0 20rpx;
				margin-top: 10rpx;
				.recommend-box {
					width: 221rpx;
					margin: 0 22rpx 30rpx 0;
					font-size: 26rpx;
					display: inline-block;
					.photo {
						position: relative;
						width: 100%;
						height: 215rpx;
						image {
							width: 100%;
							height: 215rpx;
						}
					}
					.goods-name {
						color: #333;
						margin-top: 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 28rpx;
					}
					.price {
						font-size: 20rpx;
						color: rgb(233,51,35);
						text {
							font-size: 28rpx;
						}
					}
				}
			}
		}
		.goods-content {
			position: relative;
			margin-top: 20rpx;
			width: 100%;
			padding-bottom: 100rpx;
			overflow: hidden;
			background-color: #fff;
			.title {
				font-size: 30rpx;
				color: #333;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #fff;
				text-align: center;
			}
		}
	}
	.footer {
		position: fixed;
		bottom: -2px;
		left: 0;
		width: 100%;
		background-color: #fff;
		z-index: 277;
		border-top: 1px solid #f0f0f0;
	}
</style>