<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;
		}
	}
</style>
<template>
	<view class="Jiaheactivitydetails">
		<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" :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" >
						<text v-if="detial.Distinguish==1">报名人数:{{detial.TotalMan}}人</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: 120rpx;">
				<view class="acdetail_Intro" v-html="richtext"></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 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>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				 pageTitle: "活动详情",
				 mainColor:'',
				 pricecolor:'',
				 Id:0,
				 detial:{},
				 richtext:""
			}
		},
		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,
			});
		},
		methods:{
			GetActivityDetial(){
				this.request2({
						url: '/api/AppletEducation/GetActivityDetial',
						data: {Id:this.Id}
					},
					res => {
						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 dataList =  encodeURIComponent(JSON.stringify(this.detial))
				uni.navigateTo({
					url: '/pages/school/jieheactivityBM?details=' +  dataList
				})
			},
			previewImage(x){
				uni.previewImage({
					urls: [x],
					current: 0,
				});
			}
		}
	}
</script>


