<style lang="scss" scoped>
	.Jiaheactivitydetails{
		width: 100%;
		height: 100vh;
		background: #FFF;
		font-family: aa;
		.box{
			width: 100%;
			position: relative;
		}
		.details-box-top-z{
			width: 100%;
			height: 3px;
		}
		.details-box-top-f{
			width: 100%;
			height: 3px;
			background: #e2e2e2;
		}
		.details-box-t-positions{
			height: 40rpx;
			font-size: 20rpx;
			color: #FFF;
			background: #B7A264;
			display: flex;
			align-items: center;
			padding: 0 26rpx;
			border-top-right-radius: 6px;
			border-bottom-left-radius: 6px;
			position: absolute;
			right: 0;
			top: 0;
		}
		.details-b-center{
			width: 100%;
			display: flex;
			margin-top: 40rpx;
		}
		.details-b-center-l{
			width: 120rpx;
			height: 120rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
		}
		.details-b-center-r{
			width: 1px;
			flex:1;
			padding: 0 15px;
		}
		.details-b-title{
			width: 100%;
			font-size: 28rpx;
			color: #111111;
			font-weight: bold;
			font-family: PingFang SC;
		}
		.details-b-time{
			font-size: 22rpx;
			color: #999999;
			margin-top: 18rpx;
		}
		.addressStyle{
			width: 690rpx;
			height: 45px;
			background: #FFFFFF;
			box-shadow: 0px 3px 6px 0px rgba(139, 115, 64, 0.16);
			border-radius: 6px;
			font-size: 12px;
			color: #999999;
			display: flex;
			padding: 0 15px;
			align-items: center;
			margin-top: 20px;
			margin-left: 30rpx;
		}
		.addressStyle-r{
			width: 1px;
			flex:1;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
		.positionb{
			width: 100%;
			height: 120rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:  0 15px;
			background: #FFF;
		}
		.btnc{
			width: 220rpx;
			height: 80rpx;
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			color: #FFFFFF;
			background: #CCCCCC;
		}
	}
	.title-pic{
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #111111;
			// text-align: center;
			margin-top: 40rpx;
			margin-bottom: 30rpx;
			position: relative;
			
			
	}
	.title-pic .line-bottom{
		width: 71rpx;
		height: 12rpx;
		background-color: #40766E;
		border-radius: 4rpx;
		position: absolute;
		left: 0;
		bottom:-5rpx;
		opacity: 0.8;
	}
	.pic-name{
		margin-bottom: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
	}
	.video-box{
		display: flex;
		flex-wrap: wrap;
		& .pic-box:nth-child(3n){
			margin-right: 0 !important;
		}
		.pic-box{
			width: 222rpx;
			height: 300rpx;
			border-radius: 12rpx;
			margin: 0 10rpx 30rpx 0;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			
			
			.oneimg{
				width: 222rpx;
				height: 222rpx;
				border-radius: 12rpx;
				background-color: #D7D7D7;
				border: 1rpx solid #EEEEEE;
			}
			.fourimg-box{
				width: 222rpx;
				height: 222rpx;
				border-radius: 12rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-content: space-between;
				border: 1rpx solid #EEEEEE;
				.fourimg{
					width: 105rpx;
					height:105rpx;
					border-radius: 11rpx;
					// background-color: #000000;
				}
			}
			.item-name{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #111111;
			}
			.item-num{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}
	}
	.jz_TripMain {
		position: relative;
		overflow: hidden;
		margin-bottom: 50px;
	}
	
	.jz_TripTitle {
		width: 100%;
		min-height: 90rpx;
		border-radius: 20rpx;;
		background-color: #40766E;
		color: #fff;
		display: flex;
		// justify-content: space-between;
		// align-items: center;
		padding: 28rpx;
	}
	
	.jz_TripLeft {
		width: 80rpx;
		white-space: nowrap;
		font-size: 30rpx;
		font-weight: 500;
		margin-right: 20rpx;
	}
	
	.jz_TripRight {
		font-size: 30rpx;
		font-weight: 500;
		// color: #111111;
		// font-size: 22rpx;
	}
	
	.jz_TripLine {
		position: absolute;
		width: 4rpx;
		height: 100%;
		background-color: #40766E;
		left: 24rpx;
		top: 90rpx;
	}
	
	.jz_RightInner {
		margin-left: 50rpx;
	}
	
	.jz_Place {
		position: relative;
		color: #111111;
		font-size: 24rpx;
		margin: 30rpx 0;
		font-weight: bold;
		display: flex;
	}
	
	.jz_ComDian {
		width: 18rpx;
		height: 18rpx;
		background-color: #DFBE6E;
		border-radius: 50%;
		position: absolute;
		left: -17.6px;
		top: 4px;
	}
	.Jiaheactivitydetails .con{
		width: 622rpx;
		// height: 444rpx;
		background-color: #F1F1F1;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}
	.Jiaheactivitydetails .active-img-box{
		height: 200rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.Jiaheactivitydetails .img-box{
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
	}
	.Jiaheactivitydetails .active-img{
		width: 100%;
		height: 100%;
		
	}
	.Jiaheactivitydetails .img-box2{
		position: relative;
	}
	.Jiaheactivitydetails .img-box2 .layer{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		background-color: #5F5B5D;
		opacity: 0.5;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
	.Jiaheactivitydetails .addr{
		margin: 30rpx 0;
	}
		
</style>
<template>
	<view class="Jiaheactivitydetails" v-if="!loading">
		<view style="width: 100%;height: 450rpx;" @click="previewImage(detial.CoverImg)">
			<image :src="detial.CoverImg" style="width: 100%;height: 100%;" mode="aspectFill"></image>
		</view>
		
		<view class="box">
			<view v-if="detial.IsJoinActivity==0">
				<view class="details-box-top-z" v-if="(detial.TotalMan- detial.JoinNum)>0" :style="{background:mainColor}"></view>
				<view class="details-box-top-f"  v-if="(detial.TotalMan- detial.JoinNum)==0" ></view>
				<view class="details-box-t-positions"  v-if="(detial.TotalMan- detial.JoinNum)>0 && detial.IsSignUp==1" :style="{background:mainColor}">
					<text>{{(detial.TotalMan- detial.JoinNum)>=6?'可预约':(detial.TotalMan- detial.JoinNum)<6?'剩余'+(detial.TotalMan- detial.JoinNum)+'个空位':''}}</text>
				</view>
				<view class="details-box-t-positions"  v-if="(detial.TotalMan- detial.JoinNum)==0" style="background:#e2e2e2;color: #999999;">
					爆满
				</view>
			</view>
			<view v-if="detial.IsJoinActivity==1">
				<view class="details-box-top-f" style="background: #40766E;"   ></view>
				<view class="details-box-t-positions"   :style="{background:'#40766E'}">
					已报名
				</view>
			</view>
			
			<view class="details-b-center">
				<view class="details-b-center-l">
					<view style="font-size: 28rpx;color: #999999;font-weight: 500;font-family: PingFang SC;">
						{{detial.MonthStr}}月
					</view>
					<view style="font-size: 50rpx;color: #1B1D1E;font-weight: 800;font-family: PingFang SC;">
						{{detial.DayStr}}
					</view>
					<view style="font-size: 28rpx;color: #999999;font-weight: 500;font-family: PingFang SC;">
						{{detial.WeekStr}}
					</view>
				</view>
				<view style="width: 1px;background: #E2E2E2;height: 86px;"></view>
				<view class="details-b-center-r">
					<view class="details-b-title">
						{{detial.ActivityName}}
					</view>
					<view class="details-b-time">
						报名时间:{{detial.BMStart}}-{{detial.BMEnd}}
					</view>
					<view class="details-b-time">
						活动时间:{{detial.HDStart}}-{{detial.HDEnd}}
					</view>
					<view class="details-b-time">
						活动席位:{{detial.TotalMan}}人
					</view>
					<view class="details-b-time" >
						<text v-if="detial.Distinguish==1">已报入:{{detial.JoinNum}}人</text>
						<text v-if="detial.Distinguish==0">已报入:男性{{detial.ManNum}}人 <text style="margin-left: 10px;">女性{{detial.WoManNum}}人</text> </text>
					</view>
					<view class="details-b-time" v-if="detial.AgeLimit==0">
						<text >年龄范围:{{detial.StartAge}}岁 ~ {{detial.EndAge}}岁</text>
					</view>
					<view class="details-b-time" v-if="detial.LnsideLimit==1">
						<text>只针对甲鹤学员</text>
					</view>
					
				</view>
			</view>
			<view class="addressStyle" @click="goopenlocation(detial)">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/jiaheaddress.png" style="width: 12px;height: 15px;margin-right: 15px;"></image>
				<view class="addressStyle-r">
					{{detial.LocationName}}
				</view>
			</view>
			
			
			<view style="width: 100%;padding: 15px;margin-bottom: 150rpx;">
				<view class="title-pic" v-if="richtext">
					活动特色
					<view class="line-bottom"></view>
				</view>
				<view class="acdetail_Intro" v-html="richtext"></view>
				<view class="title-pic" v-if="detial.ActivityTitleList.length>0">
					活动内容
					<view class="line-bottom"></view>
				</view>
				<view class="jz_TripMain">
					<view class="jz_TripLine"></view>
					<view v-for="(item,index) in detial.ActivityTitleList" :key="index">
						<view class="jz_TripTitle" :style="{'margin-top':index===0 ? '10rpx':'40rpx'}">
							<view class="jz_TripLeft">第{{index+1}}天</view>
							<view class="jz_TripRight">{{item.Title}}</view>
						</view>
						<view class="jz_RightInner">
							<template v-for="(item2,index2) in item.ActivityPlanList" v-if="item.ActivityPlanList.length>0">
								<view class="jz_Place">
									<view class="jz_ComDian"></view>
									<text style="margin-right: 10rpx;">{{item2.StartTime}}</text>&nbsp;
									<text style="margin-right: 10rpx;" v-if="item2.ActivityDuration">{{item2.ActivityDuration}}分钟</text>
									<text style="margin-right: 10rpx;">{{item2.TripTitle}}</text>
								</view>
								<view class="con" v-if="item2.TripContent">
									<rich-text :nodes="item2.TripContent"></rich-text>
								</view>
								<view class="active-img-box" v-if="item2.TripPicList.length>0">
									<view v-for="(item3,index3) in item2.TripPicList"  :key="index3">
										<view class="img-box" v-if="index3<2" @click="previewImage2(index3,item2.TripPicList)">
											<image class="active-img" :src="item3" mode="aspectFill"></image>
										</view>
										<view class="img-box img-box2" v-if="index3==2" @click="previewImage2(index3,item2.TripPicList)">
											<image class="active-img" :src="item3" mode="aspectFill"></image>
											<view class="layer" v-if="item2.TripPicList.length>3">
												+{{item2.TripPicList.length-3}}
											</view>
										</view>
									</view>
								</view>
								<view class="addr" v-if="item2.LocationName">
									<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/jiaheaddress.png" style="width: 12px;height: 15px;margin-right: 15px;"></image>{{item2.LocationName}}
								</view>
							</template>
						</view>
					</view>
				</view>
				<view class="title-pic" v-if="detial.Summary">
					活动总结
					<view class="line-bottom"></view>
				</view>
				<view class="acdetail_Intro" v-html="detial.Summary" v-if="detial.Summary"></view>
				<view class="title-pic" v-if="detial.FileGroup[0].groupList.length>0||detial.FileGroup[1].groupList.length>0">
					活动相册
					<view class="line-bottom"></view>
				</view>
				<view class="pic-name" v-if="detial.FileGroup[0].groupList.length>0">
					视频
				</view>
				<view class="video-box">
					<view v-for="(item,index) in detial.FileGroup[0].groupList" :key="index"  class="pic-box" @click="goPicDetail(item.FileList)" v-if="item.FileList.length>0">
							<image class="oneimg"  src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/videologo.png" mode="aspectFill"></image>
							<!-- <image class="oneimg" :src="item.FileList[0].Image" mode="aspectFill" v-if="item.FileList.length<4" ></image> -->
							<!-- <view class="fourimg-box" v-if="item.FileList.length>=4" >
								<div v-for="(_item,_index) in item.FileList" :key="_item.id" class="subpic-box" v-if="_index<=3">
									
									<image class="fourimg" :src="_item.Path" mode="aspectFill"  ></image>
								</div>
							</view> -->
							<view class="item-name">
								{{item.Name}}
							</view>
							<view class="item-num">
								{{item.FileList.length}}
							</view>
					</view>
				</view>
				<view class="pic-name" v-if="detial.FileGroup[1].groupList.length>0">
					图片
				</view>
				<view class="video-box">
					<view v-for="(item,index) in detial.FileGroup[1].groupList" :key="index"  class="pic-box" @click="goPicDetail(item.FileList)" v-if="item.FileList.length>0">
							<image class="oneimg" :src="item.FileList[0].Path" mode="aspectFill" v-if="item.FileList.length<4" ></image>
							<view class="fourimg-box" v-if="item.FileList.length>=4" >
								<div v-for="(_item,_index) in item.FileList" :key="_item.id" class="subpic-box" v-if="_index<=3">
									<image class="fourimg" :src="_item.Path" mode="aspectFill"  ></image>
								</div>
							</view>
							<view class="item-name">
								{{item.Name}}
							</view>
							<view class="item-num">
								{{item.FileList.length}}
							</view>
						
					</view>
				</view>
			</view>
			
			<view class="positionb">
				<view :style="{color:pricecolor,'font-size':'40rpx'}">
					<text v-if="detial.IsFree==1">免费</text>
					
					<view v-if="detial.IsFree==2 && (detial.Price>0 || detial.PointNum>0)"  style="display: flex;align-items: center;" >
						<view style="display: flex;align-items: flex-end;">
							<text v-if="detial.Price>0" style="font-size: 22rpx;margin-bottom: 6rpx;">￥</text>
							<text v-if="detial.Price>0">{{detial.Price}}</text>
							<text v-if="detial.Price>0" style="font-size: 22rpx;margin-bottom: 6rpx;">元</text>
						</view>
						<text v-if="detial.Price>0 && detial.PointNum>0" style="font-size: 12px;margin: 0 5px;">或</text>
						<view style="display: flex;align-items: flex-end;">
							<text v-if="detial.PointNum>0">{{detial.PointNum}}</text>
							<text v-if="detial.PointNum>0" style="font-size: 22rpx;margin-bottom: 6rpx;">点</text>
						</view>
						
					</view>
					<!-- <view v-if="detial.IsFree==2 && detial.Price==0 && detial.PointNum>0"  style="display: flex;align-items: flex-end;" >
						<text>{{detial.PointNum}}</text>
						<text style="font-size: 22rpx;">点</text>
					</view> -->
				</view>
				<view class="btnc" :style="{background:mainColor}" v-if="IsShowRollCall==1" @click="goRollCall">点名</view>
				<view v-if="detial.IsJoinActivity==0">
					<view class="btnc" v-if="detial.IsSignUp==1 && (detial.TotalMan- detial.JoinNum)>0" :style="{background:mainColor}" @click="gosignUp()">立即预约</view>
					<view class="btnc" v-if="detial.IsSignUp==0 || (detial.TotalMan- detial.JoinNum)==0">不可预约</view>
						
				</view>
				<view v-if="detial.IsJoinActivity==1">
					<view class="btnc" v-if="detial.IsSignUp==1">已报名</view>
				</view>
				
			</view>
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='gbAuth'></auth>
	</view>
</template>

<script>
	import auth from "@/components/auth/index.vue";
	export default{
		components: {
		  auth
		},
		data(){
			return{
				loading:true,
				 pageTitle: "活动详情",
				 showAuth:false,
				 mainColor:'',
				 pricecolor:'',
				 Id:0,
				 detial:{},
				 richtext:"",
				 Up:0,
				 IsShowRollCall:0,//是否显示点名按钮
			}
		},
		onShareTimeline() {
			// setTimeout(() => {
			//   console.log("分享朋友圈调用");
			//   this.getReceive();
			// }, 2500);
			let uid = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserId : 0;
			if (uid == 0) {
				uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0
			}
			let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").SmallShopId :
				0;
			if (SmallShopId == 0) { //如果微店id为0 去找所属微店id
				SmallShopId = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").UserSmallShopId : 0;
			}
			let title = this.detial.ActivityName ? this.detial.ActivityName : '活动详情';
			let imageUrl = this.detial.CoverImg ? this.detial.CoverImg:'';
			this.Up = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo").UserPageType:0;
			return {
				title: title,
				query: "Id=" + this.Id + "&user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" + this.Up,
				imageUrl: imageUrl,
			};
		},
		onShareAppMessage(res) {
			// setTimeout(() => {
			//   console.log("分享好友调用");
			//   this.getReceive();
			// }, 2500);
			let u = uni.getStorageSync("mall_UserInfo");
			let uid = u.UserId ? u.UserId : 0;
			if (uid == 0) {
				uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0
			}
			let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
			if (SmallShopId == 0) { //如果微店id为0 去找所属微店id
				SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0
			}
			return {
				title:  this.detial.ActivityName ? this.detial.ActivityName : '活动详情',
				path: "/pages/index/index?id=" + this.Id + "&user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" +
					this.Up + '&JumpType=18',
				imageUrl: this.detial.CoverImg ? this.detial.CoverImg:''
			};
		},
		onLoad(options) {
			if(options && options.Id){
				this.Id = options.Id
			}
			this.GetActivityDetial()
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.pricecolor = this.$uiConfig.pricecolor;
			uni.setNavigationBarTitle({
			  title: this.pageTitle,
			});
			this.GetEduRollCallAction();
		},
		methods:{
			goPicDetail(arr){
				uni.navigateTo({
					url:"/pages/school/picDetail?data=" + encodeURIComponent(JSON.stringify({data:arr}))
				})
			},
			GetActivityDetial(){
				console.log(this.Id)
				this.request2({
						url: '/api/AppletEducation/GetActivityDetial',
						data: {Id:this.Id}
					},
					res => {
						this.loading = false;
						this.detial = res.data;
						let tempRichtext=""
						tempRichtext = this.detial.ActivityInfo.replace(/<img[^>]*>/gi, function(match, capture) {
							var match = match.replace(/style=\"(.*)\"/gi,
								'style="width:100% !important"');
							return match;
						});
						this.richtext=tempRichtext
					}
				);
			},
			goopenlocation(x){
				 uni.openLocation({
						address:x.LocationName,
						latitude: Number(x.LonLat.split(',')[0]) ,
						longitude: Number(x.LonLat.split(',')[1]),
						success: function () {
							console.log('success');
						},
						fail:function(err){
							console.log(err)
						}
					});
			},
			gosignUp(){
				let u = uni.getStorageSync("mall_UserInfo");
				if (!u) {
					u = {
						nickName: "未登录",
						avatarUrl: ""
					};
					this.showAuth = true;
				} else {
					let dataList =  encodeURIComponent(JSON.stringify(this.detial))
					uni.navigateTo({
						url: '/pages/school/jieheactivityBM?details=' +  dataList
					})
				}
				
			},
			previewImage(x){
				uni.previewImage({
					urls: [x],
					current: 0,
				});
			},
			previewImage2(i,arr) {
				uni.previewImage({
					urls: arr,
					current: i,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},
			reloadUserinfo() {
			  this.u = uni.getStorageSync("mall_UserInfo");
			  // this.showAuth=false;
				this.GetActivityDetial()
			},
			//关闭登录窗口
			gbAuth(){
				this.showAuth=false
			},
			goRollCall(){
				uni.navigateTo({
					url:"/pages/school/RollCall?ActivityId="+this.Id
				})
			},
			GetEduRollCallAction(){
				this.u = uni.getStorageSync("mall_UserInfo");
				if (!this.u) {
					uni.showToast({
						title:"请登录",
						icon:"error"
					})
				} else {
					this.request2({
							url: '/api/AppletEducation/GetEduRollCallAction',
							data: {}
						},
						res => {
							this.IsShowRollCall=res.data.IsEduRollCallAction
						}
					);
				}
				
			},
		}
	}
</script>


