<template>
	<view class="fight-group-detail" v-if="!loadding">
		<!--产品-->
		<view class="product-info p30 d-s-c bg-white">
			<view class="product-cover">
				<image :src="productData.product.image[0].file_path" mode="aspectFit"></image>
			</view>
			<view class="info flex-1 ml30 f30">
				<text>{{productData.product.product_name}}</text>
				<view class="mt20">
					<text>{{productData.assemble_num}}人团：</text>
					<text class="ml30 red">￥</text>
					<text class="fb red f34">{{productData.assembleSku[0].assemble_price}}</text>
				</view>
			</view>
		</view>
		
		<!--拼团人-->
		<view class="fight-users mt20 bg-white">
			<!--成员列表-->
			<view class="user-list d-c-c">
				<view class="user-box pr" v-for="(item,index) in billData.billUser" :key="index">
					<text class="leader" v-if="index==0">团长</text>
					<image :src="item.user.avatarUrl" mode="aspectFit"></image>
				</view>
				<view class="user-box user-who d-c-c">
					?
				</view>
			</view>
			<view class="d-c-c mt30 gray3">
				还差<text class="fb">{{dif_people}}</text>人成团
			</view>
			<view class="mt20 d-c-c gray6 f34">
				<Countdown :config="countdownConfig" @returnVal="returnValFunc"></Countdown>
			</view>
		</view>
		
		<view class="leader-info d-b-c p30">
			<view class="photo d-s-c">
				<image :src="billData.user.avatarUrl" mode="aspectFit"></image>
				<text class="ml20">{{billData.user.nickName}}</text>
			</view>
			<view class="gray9">
				<text>{{billData.create_time}}</text>
				<text class="ml10">开团</text>
			</view>
		</view>
		
		<!--底部按钮-->
		<view class="fight-group-btns">
			<button v-if="!reallyAssemble" type="default" class="btn-red" @click="gotoAssemble(billData)">去拼团</button>
			<button v-else type="default" class="btn-red" open-type="share" @click="shareFunc">分享拼团</button>
		</view>
		
		<!--分享-->
		<share :isMpShare="isMpShare" :product_id="product_id" @close="closeShare"></share>
		<!--app分享-->
		<AppShare :isAppShare="isAppShare" :appParams="appParams" @close="closeAppShare"></AppShare>
	</view>
</template>

<script>
	import Countdown from '@/components/countdown/countdown.vue';
	import share from '@/components/mp-share.vue';
	import AppShare from '@/components/app-share.vue';
	export default {
		components:{
			Countdown,
			share,
			AppShare
		},
		data() {
			return {
				/*是否正在加载*/
				loadding:true,
				/*拼团组ID*/
				assemble_bill_id:null,
				/*拼团组对象*/
				billData:{},
				/*商品对象*/
				productData:{},
				/*倒计时配置*/
				countdownConfig: {
					type:'text',
					/*开始时间*/
					startstamp: 0,
					/*结束时间*/
					endstamp: 0
				},
				/*是否分享*/
				isMpShare:false,
				/*还差几人*/
				dif_people: 0,
				/*是否已经参团*/
				reallyAssemble:false,
				/*app分享*/
				isAppShare: false,
				appParams: {
					title: '',
					summary: '',
					path: ''
				}
			}
		},
		onLoad(e) {
			this.assemble_bill_id = e.assemble_bill_id;
			//#ifdef H5
			if (this.isWeixin()) {
				this.url = window.location.href;
			}
			//#endif
		},
		mounted() {
			/*获取产品详情*/
			this.getData();
		},
		methods: {
			
			/*获取数据*/
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get(
					'plus.assemble.bill/detail',
					{
						assemble_bill_id: self.assemble_bill_id,
						url: self.url
					},
					function(res) {
						self.billData=res.data.bill;
						self.productData=res.data.product
						self.countdownConfig.startstamp=0;
						self.countdownConfig.endstamp=self.billData.end_time;
						self.dif_people = self.productData.assemble_num-self.billData.billUser.length<0?0:self.productData.assemble_num-self.billData.billUser.length
						// 配置微信分享参数
						//#ifdef H5
						if (self.url != '') {
							let params = {
								assemble_bill_id: self.assemble_bill_id
							};
							self.configWx(res.data.share.signPackage, res.data.share.shareParams, params);
						}
						//#endif
						console.log(self.billData.billUser);
						self.reallyAssemble=self.hasAssemble(self.billData.billUser);
						
						self.loadding = false;
						uni.hideLoading();
					}
				);
			},
			
			/*查看是否已经拼团*/
			hasAssemble(list){
				let flag=false;
				let user_id = this.getUserId();
				for(let i=0;i<list.length;i++){
					if(user_id==list[i].user_id){
						flag=true;
						break;
					}
				}
				return flag;
			},
			
			/*分享*/
			shareFunc(){
				let self = this;
				//#ifndef APP-PLUS
				self.isMpShare = true;
				//#endif
				//#ifdef APP-PLUS
				self.appParams.title = '【仅限' + self.dif_people + '个名额】，快来参与拼团吧';
				self.appParams.summary = self.productData.product.product_name;
				// 构建页面参数
				let params = self.getShareUrlParams({
					assemble_bill_id: self.assemble_bill_id
				});
				self.appParams.path = '/pages/plus/assemble/fight-group-detail/fight-group-detail?' + params;
				self.appParams.image = self.productData.product.image[0].file_path;
				self.isAppShare = true;
				//#endif
			},
			/*关闭分享*/
			closeShare(){
				this.isMpShare=false;
			},
			//关闭分享
			closeAppShare(data) {
				this.isAppShare = false;
			},
			/*返回状态*/
			returnValFunc(){},
			/*小程序分享*/
			onShareAppMessage() {
				let self = this;
				// 构建页面参数
				let params = self.getShareUrlParams({
					assemble_bill_id: self.assemble_bill_id
				});
				return {
					title: '【仅限'+self.dif_people+'个名额】，快来参与拼团吧',
					path: '/pages/plus/assemble/fight-group-detail/fight-group-detail?' + params
				};
			},
			
			/*去拼团*/
			gotoAssemble(e){
				let url='pages/plus/assemble/detail/detail?assemble_product_id=' + e.assemble_product_id+'&assemble_bill_id='+e.assemble_bill_id
				this.gotoPage(url);
			}
		}
	}
</script>

<style>
.fight-group-detail{ padding-bottom: 100rpx;}
.fight-group-detail .product-cover image{ width: 200rpx; height: 200rpx;}
.fight-group-detail .fight-users .user-box{ width: 80rpx; height: 80rpx; margin: 10rpx; border-radius: 50%; border: 1px dashed #CCCCCC;}
.fight-group-detail .fight-users{ padding: 30rpx;}
.fight-group-detail .fight-users .user-box image{width: 80rpx; height: 80rpx;border-radius: 50%;}
.fight-group-detail .fight-users .user-box .leader{ position: absolute; top: -20rpx; left: 50%; margin-left: -30rpx; width: 60rpx; height: 30rpx; line-height: 30rpx; text-align: center; color: #FFFFFF; border-radius: 30rpx; border: 1px solid #FFFFFF; background: red;}
.fight-group-detail .fight-users .user-box.user-who{ font-size: 50rpx; color: #999999;}
.fight-group-detail .leader-info .photo image{ width: 60rpx; height: 60rpx; border-radius: 50%; }
.fight-group-btns{ position: fixed; right: 0; bottom: 0; left: 0; padding: 0 30rpx; box-sizing: border-box;}
.fight-group-btns button.btn-red{ margin-bottom: 20rpx; height: 80rpx; line-height: 80rpx; border-radius: 40rpx;}
</style>
