<template>
	<view class="assemble">
		<far-bottom></far-bottom>
		<view class="assembleImg" :style="{'background-image':'url('+ imageSrc+')',height:phoneHight}">
			<view class="assemblePackage">
				<!-- 组团状态 -->
				<view class="assembleStatus" v-if="groupDetail.status !== 1">
					<view v-if="groupDetail.status == 2">
						<image :src="imgfixUrls + 'merchant/zty.png'" />
						<span>拼团成功</span>
					</view>
					<view v-if="groupDetail.status == 3">
						<image :src="imgfixUrls + 'merchant/ztn.png'" />
						<span>拼团失败</span>
					</view>
				</view>
				<!-- 组团状态 -->

				<!-- 商品信息 -->
				<view class="storeInfo" @click="goGoods">
					<view class="storeInfoPackage">
						<view class="storeInfoImg">
							<image :src="groupDetail.goods.logo" />
						</view>
						<view class="ptStoreInfo">
							<view class="ptStoreInfoTitle">
								<view>
									<view>
										<image :src="imgfixUrls + 'merchant/ptt.png'" />
									</view>
									<view>
										<span>{{ groupDetail.goods.peoplenum }}人团</span>
									</view>
								</view>
								<span>{{ groupDetail.goods.name }}</span>
							</view>
							<view class="ptStoreInfoBody">
								<span>¥{{ groupDetail.goods.price }}</span>
							</view>
							<view class="ptStoreInfoFoot">
								<span>¥{{ groupDetail.goods.aloneprice }}</span>
								<span>已拼{{ groupDetail.goods.realsalenum }}件</span>
							</view>
						</view>
					</view>
				</view>
				<!-- 商品信息 -->

				<!-- 拼团成员 -->
				<view class="members">
					<view class="membersPackage">
						<view class="membersTitle">
							<!-- 成员头像循环模板 -->
							<view class="membersImgMb" v-for="(item,index) in groupDetail.user">
								<view>
									<image :src="item.avatar" />
									<image class="huangguan" v-if="item.kingimg == 1" style="height: 40upx;width: 40upx;" :src="imgfixUrls + 'huangguan.png'" mode=""></image>
								</view>
							</view>
							<view class="membersImgMb1" v-if="groupDetail.status!=2">
								<view>
									<image :src="imgfixUrls + 'merchant/wh.png'" />
								</view>
							</view>
							<!-- 成员头像循环模板 -->
						</view>

						<view class="membersBody" v-if="groupDetail.status == 1">
							<span>
								<span>{{ groupDetail.neednum }}</span>
								人成团，还差
								<span>{{ groupDetail.lacknum }}</span>
								人！
							</span>
							<view>
								<view class="line"></view>
								<span>剩余：{{ days }} 天 {{ hours }} 时 {{ minutes }} 分 {{ seconds }} 秒</span>
								<view class="line"></view>
							</view>
						</view>

						<!-- 参团按钮 -->
						<view class="joinSubmit" @click="showImg" v-if="groupDetail.is_participate==1 && groupDetail.status == 1"><span>邀请好友拼团</span></view>
						<view class="joinSubmit" @click="onToggleTrade" v-if="groupDetail.is_participate==0 && groupDetail.status == 1"><span>我要参团</span></view>
						<view class="joinSubmit" @click="goOrder" v-if="(groupDetail.status == 3 || groupDetail.status == 2) && groupDetail.is_participate==1"><span>查看我的订单</span></view>
						<!-- 参团按钮 -->

						<view class="membersFoot">
							<span :class="[groupDetail.status <= 3 ? 'successStatus' : '']">下单开团/参团</span>
							<span :class="[groupDetail.status <= 3 ? 'successStatus' : '']">></span>
							<span :class="[groupDetail.status <= 3 ? 'successStatus' : '']">邀请好友参加</span>
							<span :class="[groupDetail.status <= 3 ? 'successStatus' : '']">></span>
							<span :class="[groupDetail.status == 2 ? 'successStatus' : '']">人满拼团成功</span>
						</view>
					</view>
				</view>
				<!-- 拼团成员 -->

				<!-- 拼团记录 -->
				<view class="joinRecord">
					<view class="joinRecordPackage">
						<view class="joinRecordTitle">
							<view>
								<view class="smallLine"></view>
								<view class="bigLine"></view>
							</view>
							<span>拼团记录</span>
							<view>
								<view class="smallLine"></view>
								<view class="bigLine"></view>
							</view>
						</view>
						<view class="joinRecordBody">
							<!-- 参团记录循环模板 -->
							<view class="jlMb" v-for="(item, index) in groupDetail.user">
								<view class="jlMbLeft">
									<view>
										<image :src="item.avatar" />
										<image v-if="item.kingimg == 1" class="huangguan" style="height: 30upx;width: 30upx;right: 40upx;top: -20upx;" :src="imgfixUrls + 'huangguan.png'" mode=""></image>
									</view>
									<span>{{ item.nickname }}</span>
								</view>
								<view class="jlMbRight">
									<span>{{ item.createtime }}</span>
								</view>
							</view>
							<!-- 参团记录循环模板 -->
						</view>
					</view>
				</view>
				<!-- 拼团记录 -->

				<!-- 填充层 -->
				<view class="full"></view>
				<!-- 填充层 -->

				<!-- 分享弹窗 -->
				<view @click='show=false'>
					<PopManager :show="show" :type="top">
						<!-- #ifdef H5 -->
						<image :src="imageRoot+'share.png'" class="H5popImg" />
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image :src="imageRoot+'share.png'" class="popImg" />
						<!-- #endif -->
					</PopManager>
				</view>
				<!-- 分享弹窗 -->

				<!-- 参团弹窗 -->
				<GoodsBuyMenu ref="goodsBuyMenu" @submit="goodsSubmit" :goodsDetail="dataInfo" :goodsSpec="specData" :groupBuyType="group_buy_type"></GoodsBuyMenu>
				<!-- 参团弹窗 -->
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';

	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif
	import PopManager from '@/components/template/PopManager';
	import GoodsBuyMenu from '@/components/template/GoodsBuyMenu';

	export default {
		components: {
			PopManager,
			GoodsBuyMenu,
		},
		computed: {
			imageSrc() {
				return this.imageRoot + 'assemBack.png'
			}
		},
		data() {
			return {
				phoneHight: null,
				group_id: '',
				id: null,
				orderid: null,
				groupDetail: {},
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0,
				show: false,
				top: 'top',
				bottom: 'bottom',
				show1: false,
				goodsDetail: {},
				goods_id: null, //商品id
				goodsType: null, //商品类型
				goods_num: 1, // 商品数量
				goods_sku_id: "", // 规格id
				dataInfo: {}, //商品详情信息
				specData: [], //规格
				group_buy_type: null, //是否购买拼团商品
			};
		},
		onLoad: function(option) {
			this.id = option.id
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					_this.phoneHight = res.windowHeight + 'px';
				}
			});
			if (option.orderid !== undefined) {
				this.orderid = option.orderid
			}
			if (option.orderid == undefined) {
				this.orderid = ''
			}
			if (option.group_id !== undefined) {
				this.group_id = option.group_id
			}
			if (option.group_id == undefined) {
				this.group_id = ''
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			goGoods() {
				let _this = this
				App.navigationTo({
					url: 'pages/subPages/goods/index?type=3&id=' + _this.id
				})
			},
			init() {
				let _this = this;
				_this.getGroupDetail1();
				_this.getGoodsDetail();
			},
			/**
			 * 商品确认购买
			 * @param {Object} buyData 用户选择商品信息
			 */
			goodsSubmit(buyData) {
				let _this = this
				let {
					btnType,
					goods_num,
					goods_sku_id
				} = buyData;
				_this.goods_num = goods_num;
				_this.goods_sku_id = goods_sku_id;
				if (btnType === "confirm") {
					_this.submit();
				}
			},
			// 初始化商品数据
			initGoodsDetailData(data) {
				let _this = this;
				if (!!data['comment'] && !!data['comment']['length'] > 0) {
					data.comment.map((val) => {
						val.createtime = _this.$util.formatTime(val.createtime, 'rule', '-');
						val.star = Number(val.star);
						return val
					})
				};
				data.is_vip = Number(data.is_vip);
				return data
			},
			onToggleTrade() {
				//关闭后重置规格数据
				// this.groupsBuyMeuns(!this.showBuyMenu);
				// this.showBuyMenu = !this.showBuyMenu;
				this.$refs.goodsBuyMenu.onToggleTrade();
			},
			showM() {
				let _this = this
				_this.getGoodsDetail();
				_this.show1 = true
			},
			// 分享弹框
			showImg() {
				let _this = this;
				_this.show = true;
			},
			// 商品详情信息获取
			getGoodsDetail(goods_id, goodsType) {
				let _this = this,
					requestData = {
						id: _this.id,
						type: 3
					};
				App._post_form('&p=goods&do=getGoodsDetail', requestData, (result) => {
					let data = _this.initGoodsDetailData(result.data),

						specData = !!data.spec ? data.spec.list : null;

					_this.setData({
						dataInfo: data,
						specData: specData
					});
					console.info(_this.dataInfo)
					console.info(_this.specData)
				}, false, () => {
					_this.loadlogo = false;
				})
			},
			/**
			 * 加入购物车and立即购买
			 */
			submit() {
				console.info(333333333)
				let _this = this,
					dataInfo = _this.dataInfo,
					buy_limit = Number(dataInfo.buy_limit) || "",
					user_limit_num = dataInfo.user_limit_num || "";
				// group_buy_type = _this.group_buy_type;

				if (buy_limit > 0 && user_limit_num <= 0) {
					console.info(555555555)
					App.showError("购买数量已达上限");
					return;
				}
				// 
				// 				if (!_this.isSpecSignid) {
				// 					App.showError("请选择有效的规格选项后提交订单");
				// 					return;
				// 				}
				// 
				// 				if (detail.effect === 10 && detail.validity === 30) {
				// 					let nowTime = new Date().getTime();
				// 					if (nowTime > Number(detail.validity_starttime[1])) {
				// 						App.showError("当前商品已过期");
				// 						return;
				// 					}
				// 				}
				// 
				// 立即购买
				console.info(_this.dataInfo)
				console.info(_this.goods_id)
				console.info(_this.goods_num)
				console.info(_this.goods_sku_id)
				App.navigationTo({
					url: 'pages/subPages/submitOrder/submitOrder?goods_id=' + _this.dataInfo.id + '&goods_num=' + _this.goods_num +
						'&specid=' + (_this.goods_sku_id || "") + '&plugin=' + _this.dataInfo.type + '&buystatus=1&group_id=' + _this.group_id,
					success() {
						// 关闭弹窗
						_this.onToggleTrade();
					}
				});
			},
			// 获取组团详细信息
			getGroupDetail1() {
				let _this = this;
				let data = {
					order_id: _this.orderid,
					group_id: _this.group_id
				};
				App._post_form('&p=wlfightgroup&do=groupDetail', data, res => {
					if (res.data.goods.name.length > 22) {
						res.data.goods.name = res.data.goods.name.slice(0, 22) + '...'
					}
					_this.groupDetail = res.data;
					_this.group_id = res.data.group_id
					let nowTime = new Date().getTime(),
						endTime = Number(res.data.failtime) * 1000,
						leftTime = parseInt((endTime - nowTime) / 1000);
					let timeClock = setInterval(function() {
						leftTime--;
						_this.days = parseInt(leftTime / (60 * 60 * 24));
						_this.hours = parseInt((leftTime % (60 * 60 * 24)) / (60 * 60));
						_this.minutes = parseInt((leftTime % (60 * 60)) / (60));
						_this.seconds = parseInt((leftTime % (60)));
						if (leftTime == 0 || leftTime < 0) {
							clearInterval(timeClock);
							_this.days = '00'
							_this.hours = '00'
							_this.minutes = '00'
							_this.seconds = '00'
						}
					}, 1000);
				});
			},
			goOrder() {
				App.navigationTo({
					url: 'pages/subPages/orderList/orderList'
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.successStatus {
		color: rgba(250, 63, 43, 1) !important;
	}

	.assemble {
		overflow-y: scroll;
		overflow-x: hidden;
	}

	page {
		background: #f8f8f8;
	}

	.assembleImg {
		background-color: #f8f8f8;
		width: 750upx;
		background-size: 750upx auto;
		background-repeat: no-repeat;
	}

	.storeInfo {
		z-index: 2;
		margin: 45upx auto 0 auto;
		width: 690upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

	.assemblePackage {
		width: 750upx;
		border: 1px solid rgba(0, 0, 0, 0);
	}

	.storeInfoPackage {
		padding: 30upx;

		>view {
			display: inline-block;
			vertical-align: top;
		}
	}

	.storeInfoImg {
		width: 170upx;
		height: 170upx;
		border-radius: 10upx;
		overflow: hidden;

		>image {
			width: 170upx;
			height: 170upx;
		}
	}

	.ptStoreInfo {
		margin-left: 30upx;
		width: 425upx;
	}

	.ptStoreInfoTitle {
		height: 76upx;

		>span {
			vertical-align: middle;
			font-size: 28upx;
			color: rgba(0, 0, 0, 1);
		}

		>view {
			font-size: 0;
			display: inline-block;
			vertical-align: middle;
			width: 122upx;
			height: 30upx;
			border: 1upx solid rgba(255, 68, 68, 1);
			border-radius: 4upx;
			overflow: hidden;

			>view:nth-child(1) {
				width: 30upx;
				height: 30upx;
				background: rgba(255, 68, 68, 1);

				>image {
					width: 30upx;
					height: 30upx;
				}
			}

			>view:nth-child(2) {
				width: 82upx;
				height: 30upx;
				text-align: center;

				>span {
					line-height: 30upx;
					font-size: 18upx;
					color: rgba(255, 68, 68, 1);
				}
			}

			>view {
				display: inline-block;
				vertical-align: middle;
			}
		}
	}

	.ptStoreInfoBody {
		margin-top: 20upx;

		>span {
			font-size: 24upx;

			font-weight: bold;
			color: rgba(254, 80, 79, 1);
		}
	}

	.ptStoreInfoFoot {
		margin-top: 10upx;
		display: flex;
		justify-content: space-between;

		>span {
			font-size: 24upx;

			font-weight: bold;
			color: rgba(153, 153, 153, 1);
		}
	}

	.members {
		margin: 20upx auto 0 auto;
		width: 690upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

	.membersImgMb {
		display: inline-block;
		margin-top: 20upx;
		width: 20%;
		text-align: center;
		position: relative;

		>view {
			margin: auto;
			width: 77upx;
			height: 77upx;
			border-radius: 50%;
			overflow: hidden;

			>image {
				width: 77upx;
				height: 77upx;
			}
		}
	}
	
	.huangguan{
		width: 40upx;
		height: 40upx;
		position: absolute;
		top: -24upx;
		right: 20upx;
		
	}
	
	.membersImgMb1 {
		display: inline-block;
		margin-top: 20upx;
		width: 20%;
		text-align: center;

		>view {
			border: 1upx dashed rgba(204, 204, 204, 1);
			margin: auto;
			width: 77upx;
			height: 77upx;
			border-radius: 50%;
			overflow: hidden;

			>image {
				width: 77upx;
				height: 77upx;
			}
		}
	}

	.membersTitle {
		padding: 0 30upx;
		margin-top: 30upx;
		flex-wrap: wrap;
	}

	.membersPackage {
		border: 1px solid rgba(0, 0, 0, 0);
	}

	.membersBody {
		margin-top: 50upx;
		text-align: center;

		>span {
			font-size: 28upx;

			font-weight: 800;
			color: #333333;

			>span {
				font-size: 36upx;
				color: rgba(255, 68, 68, 1);
			}
		}

		>view {
			margin-top: 50upx;
			margin: 50upx 0 0 0;
			display: flex;
			justify-content: space-between;

			>span {
				vertical-align: top;
				font-size: 24upx;


				color: rgba(51, 51, 51, 1);
			}
		}
	}

	.line {
		margin-top: 17upx;
		vertical-align: top;
		width: 153upx;
		height: 1upx;
		background: rgba(238, 238, 238, 1);
	}

	.joinSubmit {
		margin: 50upx auto 0 auto;
		width: 630upx;
		height: 80upx;
		background: rgba(250, 63, 43, 1);
		border-radius: 40upx;
		text-align: center;

		>span {
			line-height: 80upx;
			font-size: 28upx;


			color: rgba(255, 255, 255, 1);
		}
	}

	.membersFoot {
		display: flex;
		justify-content: space-between;
		padding: 40upx 50upx;

		>span {
			font-size: 24upx;


			color: rgba(153, 153, 153, 1);
		}
	}

	.joinRecord {
		margin: 20upx auto 0 auto;
		width: 688upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

	.joinRecordPackage {
		padding: 20upx 30upx;
	}

	.joinRecordTitle {
		text-align: center;

		>span {
			vertical-align: middle;
			font-size: 30upx;

			font-weight: bold;
			color: rgba(250, 63, 43, 1);
		}

		>view {
			margin: 0 20upx;
			display: inline-block;
			vertical-align: middle;

			>view {
				display: inline-block;
				vertical-align: middle;
			}
		}
	}

	.smallLine {
		margin-right: 5upx;
		width: 5upx;
		height: 11upx;
		background: rgba(250, 63, 43, 0.5);
		border-radius: 2upx;
		transform: rotate(30deg);
	}

	.bigLine {
		margin-top: 3upx;
		width: 7upx;
		height: 16upx;
		background: rgba(250, 63, 43, 1);
		border-radius: 2upx;
		transform: rotate(30deg);
	}

	.joinRecordBody {
		margin-top: 40upx;
	}

	.jlMb {
		margin-top: 30upx;
		padding: 0 30upx;
		display: flex;
		justify-content: space-between;

		>view {
			vertical-align: middle;
			display: inline-block;
		}
	}

	.jlMbLeft {
		vertical-align: middle;
		position: relative;

		>view {
			display: inline-block;
			vertical-align: middle;
			width: 60upx;
			height: 60upx;
			border-radius: 50%;
			overflow: hidden;

			>image {
				width: 60upx;
				height: 60upx;
			}
		}

		>span {
			vertical-align: middle;
			margin-left: 15upx;
			font-size: 28upx;

			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}

	.jlMbRight {
		vertical-align: middle;

		>span {
			line-height: 60upx;
			font-size: 24upx;

			font-weight: bold;
			color: rgba(153, 153, 153, 1);
		}
	}

	.assembleStatus {
		z-index: 2;
		margin-top: 115upx;
		text-align: center;

		>view {
			>image {
				vertical-align: middle;
				width: 45upx;
				height: 45upx;
			}

			>span {
				font-size: 36upx;
				vertical-align: middle;
				font-weight: bold;
				color: white;
			}
		}
	}

	.full {
		width: 750upx;
		height: 80upx;
	}

	.popImg {
		width: 675upx;
		margin-right: 120upx;
	}
	.H5popImg {
		width: 760upx;
		// margin-right: 120upx;
	}
</style>
