<template>
	<view>

		<view class="m-activity-container" v-if="isPage">
			<view class="m-activity-info">
				<image :src="Info.activity_rule.activity_image" mode="aspectFill" class="m-activity-img" v-if="!isEventMainPic" />
				<view class="m-activity-name">{{Info.activity_name}}</view>
				<view class="m-activity-eventdesc">{{Info.activity_remark}}</view>
				<view class="m-cell m-cell-access">
					<view class="m-cell-hd highlight">
						<label class="iconfont icon-shijian "></label>
					</view>
					<view class="m-cell-bd m-cell-primary">
						<p> {{__('活动时间')}}：{{Info.activity_starttime}} ~ {{Info.activity_endtime}}</p>
					</view>
				</view>
				<view class="m-cell m-cell-access">
					<view class="m-cell-hd" style="color:#EB543D">
						<label class="iconfont icon-gerenziliao "></label>
					</view>
					<view class="m-cell-bd m-cell-primary">
						<p> {{__('报名截止时间')}}：{{Info.activity_rule.end_join_time}}</p>
					</view>
				</view>
				<view class="m-cell m-cell-access">
					<view class="m-cell-hd" style="color:#1BC2A6">
						<label class="iconfont icon-shouhuodizhi "></label>
					</view>
					<view class="m-cell-bd m-cell-primary">
						<p> {{__('活动地址')}}：{{Info.activity_rule.activity_address}}</p>
					</view>
				</view>

				<view class="m-activity-otherinfo" v-if="!isEventDetail">
					<view class="item-otherinfo">
						<view class="item-title">{{__('活动介绍')}}</view>
					</view>
					<u-parse :content="Info.activity_rule.activity_detail_intro + ' '" @navigate="navigate" @preview="preview" :imageProp="{lazyLoad:true}"></u-parse>
				</view>
				<view class="m-activity-otherinfo" v-if="!isVip1">
					<view class="item-otherinfo">
						<view class="item-title">{{__('嘉宾介绍')}}</view>
					</view>
					<image src="Info.VipGuestPic1" mode="widthFix" class="item-otherimg" v-if="!isVip1" />
					<image src="Info.VipGuestPic2" mode="widthFix" class="item-otherimg" v-if="!isVip2" />
					<image src="Info.VipGuestPic3" mode="widthFix" class="item-otherimg" v-if="!isVip3" />
					<image src="Info.VipGuestPic4" mode="widthFix" class="item-otherimg" v-if="!isVip4" />
					<image src="Info.VipGuestPic5" mode="widthFix" class="item-otherimg" v-if="!isVip5" />
				</view>
				<view class="m-activity-otherinfo" v-if="!isAgendaPlan">
					<view class="item-otherinfo">
						<view class="item-title">{{__('活动规则')}}</view>
					</view>
					<view style="padding:0 20rpx;">
						<u-parse :content="Info.activity_rule.activity_intro + ' '" @navigate="navigate" @preview="preview" :imageProp="{lazyLoad:true}"></u-parse>
					</view>
				</view>

				<view class="m-activity-otherinfo">
					<view class="item-otherinfo" style="margin-bottom:0rpx;">
						<view class="item-title">{{__('主办单位')}}</view>
					</view>
					<view class="m-cell m-cell-access borderNone">
						<view class="m-cell-hd" style="color:#1BC2A6">
							<label class="iconfont icon-icon1"></label>
						</view>
						<view class="m-cell-bd m-cell-primary">
							<p> {{__('主办方')}}：{{Info.activity_rule.activity_sponsor }}</p>
						</view>
					</view>
					<view class="m-cell m-cell-access">
						<view class="m-cell-hd" style="color:#1BC2A6">
							<label class="iconfont icon-icon "></label>
						</view>
						<view class="m-cell-bd m-cell-primary">
							<p> {{__('联系人')}}：{{Info.activity_rule.contact_organizer}}</p>
						</view>
					</view>
					<view class="m-cell m-cell-access">
						<view class="m-cell-hd" style="color:#1BC2A6">
							<label class="iconfont icon-mobilephone "></label>
						</view>
						<view class="m-cell-bd m-cell-primary">
							<p> {{__('联系电话')}}：{{Info.activity_rule.contact_phone}}</p>
						</view>
					</view>
				</view>
				<view class="u-cleanbox"></view>
			</view>
			<view class="bottombar g-flex">
				<view class="service" v-if="false">
					<label class="iconfont icon-more" style="line-height:40rpx"></label>
					<view class="text-kefu" style="line-height:30rpx">{{__('客服')}}</view>
				</view>
				<view :class="['signin', isGray ?'m-footer-desable':'']" @tap="signinnow">{{content}}</view>
			</view>
		</view>

		<view class="u-tap-btn">
			<navigator url="/pages/index/index" open-type="switchTab" class="u-go-home">
				<view class="iconfont icon-shouyeshouye" style="font-size:50rpx;"></view>
			</navigator>
		</view>

	</view>
</template>

<script>
	import $ from "../../helpers/util";

	import dayCountdown from "../../components/day-countdown.vue";
	import uParse from '@/components/u-parse/u-parse.vue'

	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data: function() {
			return {
				Info: [],
				Id: 0,
				isVip1: true,
				isVip2: true,
				isVip3: true,
				isVip4: true,
				isVip5: true,
				isEventDetail: true,
				isEventMainPic: true,
				isAgendaPlan: true,
				isPage: false,
				isGray: true,
				content: "",
				activitydetail: [],
				activityagenda: []
			}
		},
		components: {
			dayCountdown,
			uParse
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: this.__('活动详情')
			});
			this.setData({
				Id: options.id
			});

			this.forceUserInfo(function(user) {});
		},
		onShareAppMessage: function() {
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			// #endif

			return {
				title: this.Info.Title,
				desc: this.Info.EventDesc,
				path: "/activity/market/detail?id=" + this.Id + "&uid=" + this.userInfo.user_id
			}
		},
		/**
		 * 用户点击右上角分享朋友圈
		 */
		onShareTimeline: function() {
			return {
				title: this.Info.Title,
				query: {
					uid: this.userInfo.user_id
				}
			}
		},

		onShow: function() {
			var e = this;
			$.isNull(this.userInfo) ? this.getUserInfo(function(user) {
				if (user) {
					e.initData()
				}
			}) : e.initData()
		},
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),

			initData: function() {
				var params = {
						activity_id: this.Id
					},
					that = this;
				that.$.request({
					url: that.Config.URL.user.getMarketing,
					data: params,
					success: function(data, status, msg, code) {
						if (200 == status) {
							that.setData({
								Info: data,
								isVip1: $.isNull(data.VipGuestPic1),
								isVip2: $.isNull(data.VipGuestPic2),
								isVip3: $.isNull(data.VipGuestPic3),
								isVip4: $.isNull(data.VipGuestPic4),
								isVip5: $.isNull(data.VipGuestPic5),
								isEventDetail: $.isNull(data.activity_rule.activity_detail_intro),
								isEventMainPic: $.isNull(data.activity_rule.activity_image),
								isAgendaPlan: $.isNull(data.activity_rule.activity_process),
								isPage: true,
								isSignIn: data.is_join,
								ifJoin: data.if_join,
							});

							if (data.if_join && !data.is_join) {
								// 可以报名且未报名
								that.setData({
									isGray: false,
									content: that.__("立即报名")
								});
							} else {
								// 不可报名
								if (data.is_join) {
									// 由于已报名不可报名
									that.setData({
										isGray: true,
										content: that.__("已报名")
									});
								} else {
									// 活动已截止报名，导致的不可报名
									that.setData({
										isGray: true,
										content: that.__("报名已截止")
									});
								}
							}
						} else {
							that.setData({
								isPage: false
							})
						}
					}
				});
			},
			// 参加报名
			signinnow: function() {
				if (this.isGray) {
					return;
				}
				var e = {
					img: this.Info.activity_rule.activity_image,
					title: this.Info.activity_name,
					time: this.Info.activity_rule.start_join_time,
					id: this.Info.activity_id
				};
				wx.navigateTo({
					url: "/activity/market/signin?val=" + JSON.stringify(e) + "&source=" + this.StateCode.MARKRTING_ACTIVITY_JOIN
				})
			}
		}
	};
</script>



<style lang="scss">
	@import "../../styles/_variables";

	.m-activity-container {
		background: white;
	}

	.m-activity-info {
		margin-bottom: 100rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.m-activity-img {
		width: 100%;
		height: 440rpx;
	}

	.m-activity-name {
		padding: 10rpx 28rpx;
		width: 100%;
		box-sizing: border-box;
		line-height: 60rpx;
		overflow: hidden;
	}

	.m-activity-eventdesc {
		padding: 0 30rpx 20rpx;
		font-size: 28rpx;
		text-justify: auto;
	}

	.m-cell-primary {
		font-size: 30rpx;
		margin-left: 10rpx;
		color: gray;
	}

	.iconfont {
		font-size: 40rpx;
		color: $default-skin-bg;
	}

	.separator {
		height: 20rpx;
	}

	.m-activity-otherinfo {
		border-top: 20rpx solid #eee;
		box-sizing: border-box;
	}

	.item-otherinfo {
		padding: 20rpx;
		border-bottom: 1px solid #eee;
		margin-bottom: 10rpx;
	}

	.item-title {
		border-left: 5px solid $default-skin-bg;
		font-size: 14px;
		padding-left: 10rpx;
	}

	.item-otherimg {
		width: 100%;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}

	.bottombar {
		height: 100rpx;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		text-align: center;
	}

	.service {
		flex: 1;
		background: white;
		color: gray;
		font-size: 22rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-top: 1rpx solid #eee;
	}

	.iconfont {
		color: gray;
	}

	.text-kefu {
		padding-top: 6rpx;
	}

	.signin {
		flex: 4;
		background: $default-skin-bg;
		color: white;
		font-size: 32rpx;
		line-height: 100rpx;
	}

	.m-footer-desable {
		background: #ccc;
	}

	.kefu {
		position: fixed;
		bottom: 30rpx;
		left: 50rpx;
		opacity: 0;
	}

	.borderNone::before {
		content: "";
		border: 0;
	}

	.u-tap-btn {
		position: fixed;
		right: 20rpx;
		bottom: 90rpx;
	}

	.u-go-home {
		border-radius: 100%;
		width: 80rpx;
		height: 80rpx;
		border: 1px solid #eee;
		font-size: 20rpx;
		text-align: center;
		background-color: #fff;
		box-shadow: 0px 4rpx 8rpx;
		z-index: 2;
		line-height: 80rpx;
		margin-bottom: 20rpx;
	}

	.u-go-home .iconfont {
		font-size: 36rpx;
	}
</style>