<style>
	.activeDetails{font-family: pingfang;}
	.acdetailTop{
		width:100%;
		background-color: #FFF;
		padding:15px;
	}
	.acdetailImg{
		width:100%;
		height:190px;
		border-radius: 30rpx;
		overflow: hidden;
	}
	.acdetaiTitle{
		margin:15px auto;
		color:#1F1F1F;
		font-size:38rpx;
		text-align: center;
		font-weight: 600;
	}
	.acdetaiDate{
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		color:#999;
		
	}
	.acdetaiDate2{
		display: flex;
		
		justify-content: flex-end;
		font-size: 12px;
		color:#999;
		font-weight: bold;
	}
	.acdetaiWriter{
		display: flex;
		justify-content: space-between;
		color:#B9B9B9;
		font-size:12px;
		margin-top:10px;
		align-items: center;
	}
	.acdetailLittleBtn{
		width:55px;
		height:22px;
		text-align: center;
		line-height: 22px;
		background-color: #AFAFAF;
		color:#FFF;
		border-radius: 3px;
		font-size: 12px;
	}
	.acdetaiLine{
		width:100%;
		height:10px;
		background-color: #F3F5F7;
	}
	.acdetailBottom{
		width:100%;
		min-height:283px;
		padding:15px;
		background-color: #FFF;
	}
	.acdetail_Intro{
		color:#404040;
		font-size:14px;
		line-height: 25px;
		margin:20px 0 30px 0;
	}
	.acdetailBtn{
		position: fixed;
		bottom:0;
		width:100%;
		height:50px;
		line-height: 50px;
		font-size:30rpx;
		font-weight: 600;
		background-color: #AFAFAF;
		color:#FFF;
		text-align: center;
	}
</style>
<template>
	<view class="activeDetails" style="height:100vh;">
		<view class="acdetailTop">
			<view class="acdetailImg">
				<img :src="dataList.CoverImg" mode='aspectFill' alt="" style="width:100%;height:100%;"/>
			</view>
			<view class="acdetaiTitle">{{dataList.ActivityName}}</view>
			<view class="acdetaiDate">
				<view>开始日期：<text v-if="dataList.StartTimeStr">{{dataList.StartTimeStr}}</text></view>
				<view>结束日期：<text v-if="dataList.EndTimeStr">{{dataList.EndTimeStr}}</text></view>
			</view>
			<view class="acdetaiDate" style="margin-top:10px;">
				<view>报名日期：<text v-if="dataList.SignStartTimeStr&&dataList.SignStartTimeStr!='0001-01-01 00:00:00'">{{dataList.SignStartTimeStr.split(' ')[0]}}</text></view>
				<view v-if="IsOpenMiAi==0">截止日期：<text v-if="dataList.SignEndTimeStr&&dataList.SignEndTimeStr!='0001-01-01 00:00:00'">{{dataList.SignEndTimeStr.split(' ')[0]}}</text></view>
			</view>
			<view class="acdetaiDate" style="margin-top:10px;"  v-if="IsOpenMiAi==1">
				<view>截止日期：<text v-if="dataList.SignEndTimeStr&&dataList.SignEndTimeStr!='0001-01-01 00:00:00'">{{dataList.SignEndTimeStr}}</text></view>
			</view>
			<view class="acdetaiDate2" v-if="IsOpenMiAi==1" :style="{'margin-top':'10px','color':mainColor}">
				<view v-if='dataList.IsFree==1'>免费</view>
				<view v-if='dataList.IsFree==2'>需要星星：{{dataList.Price}}</view>
			</view>
			<view class="acdetaiWriter">
				<view class="acdetailLittleBtn" v-if="dataList.ActivityStatus==0 && IsOpenMiAi==1" :style="{'background-color':IsOpenMiAi==1?mainColor:'#000450'}">{{dataList.ActivityStatusStr}}</view>
				<view class="acdetailLittleBtn" v-if="dataList.ActivityStatus==1 && IsOpenMiAi==1" :style="{'background-color':IsOpenMiAi==1?mainColor:'#000450'}">{{dataList.ActivityStatusStr}}</view>
				<view class="acdetailLittleBtn" v-if="dataList.ActivityStatus==2 && IsOpenMiAi==1">{{dataList.ActivityStatusStr}}</view>
			</view>
		</view>
		<!-- <view class="acdetaiLine"></view> -->
		<view class="acdetailBottom">
			<!-- <u-divider color="#0B0B0B;" half-width="50" border-color="#0B0B0B" fontSize="35">活动详情</u-divider> -->
			<view class="acdetail_Intro" v-html="richtext"></view>
		</view>
		<template v-if="isShowBtn">
			<view class="acdetailBtn" v-if="dataList.ActivityStatus==2">报名活动（已结束）</view>
			<view class="acdetailBtn" @click="IsOpenMiAi==1?gosignUp():showModal=true" :style="{'background-color':IsOpenMiAi==1?mainColor:'#1F1F1F'}" v-if="dataList.ActivityStatus==1&&dataList.IsSignUp==1">马上报名</view>
			<view class="acdetailBtn" :style="{'background-color':IsOpenMiAi==1?mainColor:'#80808A'}" v-if="dataList.ActivityStatus==0">未开始</view>
			<view class="acdetailBtn" v-if="dataList.IsJoinActivity==1">已报名</view>
		</template>
		<u-popup v-model="showModal" mode="center" length="80%">
			<view style='display: flex;flex-direction: column;align-items: center;background: #FFF;'>
				<view style="display: flex;width: 100%;margin-top:30px;padding-left:20px;">
					<Text style='display:inline-block;width:80px;text-align: right;margin-top: 6px;'>姓名：</Text>
					<input class="uni-input inputM" style='margin-left: 10px;margin-top: 5px;' v-model="signMsg.LinkMan" placeholder="请输入姓名" />
				</view>
				<view style="display: flex;width: 100%;margin:30px;padding-left:20px;">
					<Text style='display:inline-block;width:80px;text-align: right;margin-top: 6px'>联系电话：</Text>
					<input class="uni-input inputM" type="number" style='margin-left: 10px;margin-top: 5px;' v-model="signMsg.LinkTel" placeholder="请输入电话" />
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;height: 50px;border-top: 1px solid #F5F5F5;width: 100%;">
					<view style="width: 50%;display: flex;align-items: center;justify-content: center" @click="showModal=false">
						<Text>取消</Text>
					</view>
					<view style="width: 50%;color: #a0cfff;display: flex;align-items: center;justify-content: center" @click="signUp">
						<Text>确定</Text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: '活动详情',
				msg: {
					Id:0
				},
				dataList:{},
				showModal:false,
				signMsg:{
					ActivityId:0,
					LinkMan:"",
					LinkTel:""
				},
				isShowBtn:true,
				IsOpenMiAi:0,//1开始 0 没开启
				mainColor:'',
				richtext:""
			}
		},
		created() {},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			this.IsOpenMiAi = uni.getStorageSync("basedata")?uni.getStorageSync("basedata").mall.setting.is_show_miai:0;//是否开启相亲模式
			this.mainColor = this.$uiConfig.mainColor;
		},
		onLoad(option) {
			this.msg.Id = option.Id;
			this.signMsg.ActivityId = option.Id;
			if(option.isFromActive==1){
				this.isShowBtn = false;
			}
			this.getList();
		},
		methods: {
			getList(){
				this.request2({
						url: "/api/AppletTrade/GetCommerceActivity",
						data: this.msg,
					},
					(res) => {
						if (res.resultCode == 1) {
							this.dataList = res.data;
							let tempRichtext=""
							tempRichtext = this.dataList.ActivityInfo.replace(/<img[^>]*>/gi, function(match, capture) {
								var match = match.replace(/style=\"(.*)\"/gi,
									'style="width:100% !important"');
								return match;
							});
							// let regex = new RegExp('<section', 'gi');  
							// tempRichtext = tempRichtext.replace(regex, `<div`); //图片超出的处理
							// regex = new RegExp('</section>', 'gi');
							// tempRichtext = tempRichtext.replace(regex, `</div>`);
							this.richtext=tempRichtext
						}
					}
				);
			},
			//报名
			signUp(){
				if(this.signMsg.LinkMan==''){
					uni.showToast({
					  title: "请输入姓名",
					  icon:'none'
					});
					return;
				}
				if(this.signMsg.LinkTel==''){
					uni.showToast({
					  title: "请输入联系电话",
					  icon:'none'
					});
					return;
				}
				this.request2({
						url: "/api/AppletTrade/SetCommerceConsult",
						data: this.signMsg,
					},
					(res) => {
						if (res.resultCode == 1) {
							uni.showToast({
							  title: "报名成功，请到个人中心我的活动查看"
							});
							this.getList();
							this.showModal=false;
						}
					}
				);
			},
			gosignUp(){
				let dataList =  encodeURIComponent(JSON.stringify(this.dataList))
				uni.navigateTo({
					url: '/pages/kotra/activitysignUp?details=' +  dataList
				})
			}
			
		}
	}
</script>
