<template>
	<view class="page">
		<view class="content">
			<view class="title-box"></view>
			<view class="state-bar">
				<image src="../../static/images/ic_arrow_left.png" mode="aspectFill" @click="closePage()"></image>
			</view>
			<view class="box">
				<view class="title">
					<view class="title-status">{{bean.status}}</view>
					<text>{{bean.name}}</text>
				</view>
				<rich-text class="title-content" :nodes="bean.introduce"></rich-text>
				<view class="count-btn">
					<view>参加人数:{{bean.joinedCount}}/{{bean.joinCount}}</view>
					<view v-if="type==1" class="btn" @click="join()">立即参与</view>
					<view v-if="type==2" class="btn" @click="joinOut()">取消报名</view>
				</view>
				<view class="notice">
					<image src="../../static/images/ic_notice_gree_icon.png" mode="aspectFill"></image>
					<view class="notice-content">本次活动名额有限，抓紧时间参与哦！</view>
				</view>
				<view class="options">
					<view class="op-title">
						<view class="point"></view>
						<view class="op-content">活动时间</view>
					</view>
					<view>{{bean.startTime}}</view>
				</view>
				<view class="options">
					<view class="op-title">
						<view class="point"></view>
						<view class="op-content">项目建设内容</view>
					</view>
					<rich-text :nodes="bean.constructionContent"></rich-text>
				</view>
				<view class="options-box">
					<view class="options-title">(一)</view>
					<view class="options-content">活动时间:{{bean.startTime}}</view>
				</view>
				<view class="options-box">
					<view class="options-title">(二)</view>
					<view class="options-content">活动地点:{{bean.address}}</view>
				</view>
				<view class="options-box">
					<view class="options-title">(三)</view>
					<view class="options-content">活动类型:{{bean.activityType}}</view>
				</view>
				<view class="options-box">
					<view class="options-title">(四)</view>
					<view class="options-content">活动主题:{{bean.theme}}</view>
				</view>
				<view class="options-box-c">
					<view class="options-title-c">(五)要求</view>
					<view class="options-content-c">{{bean.ask}}</view>
				</view>
				<view class="options-box-c">
					<view>(六)活动声明</view>
					<rich-text :nodes="bean.statement"></rich-text>
				</view>
				<view class="options-box-c">
					<view>(七)宣传内容</view>
					<view class="img-box">
						<view v-if="bean.photo" v-for="(item,index) in bean.photoList" :key="index">
							<image :src="imgUrl+item" mode="aspectFill"></image>
						</view>
						<view v-if="bean.videos" v-for="(item,index) in bean.videoList" :key="index">
							<video :src="imgUrl+item"></video>
						</view>
					</view>
				</view>
			</view>
		</view>
		<pageLoading v-if="showPageLoading"></pageLoading>
	</view>
</template>

<script>
	import pageLoading from '@/components/loading/pageLoading.vue';
	export default {
		components: {
			pageLoading
		},
		data() {
			return {
				activityId: "",
				showPageLoading: true,
				bean: {},
				imgUrl: this.$api.common.imgUrl,
				type: 1,
				itemId: ""
			}
		},
		onLoad(res) {
			this.activityId = res.id
			this.type = res.type
			this.itemId = res.itemId
			if (this.activityId == "") {
				uni.navigateBack()
			}
			this.getActivityDetail()
		},
		methods: {
			closePage() {
				uni.navigateBack()
			},
			getActivityDetail() {
				this.$app.request({
					url: this.$api.duty.getActivityDetail + this.activityId,
					method: 'GET',
					dataType: 'json',
					success: res => {
						if (res != undefined) {
							this.bean = res;
							if (this.bean.photo.length > 0) {
								this.bean.photoList = this.bean.photo.split(",")
							} else {
								this.bean.photoList = []
							}
							if (this.bean.videos.length > 0) {
								this.bean.videoList = this.bean.videos.split(",")
							} else {
								this.bean.videoList = []
							}
							this.bean = this.bean
						}
						console.log(this.bean)
					},
					fail: res => {
						this.showPageLoading = false
					},
					complete: res => {
						this.showPageLoading = false
					}
				});
			},
			join() {
				if (getApp().globalData.token == "") {
					uni.setStorageSync("loginOriginUrl", "/pages/duty/activitydetail?id=" + this.activityId)
					uni.navigateTo({
						url: "/pages/user/login"
					})
				} else {
					uni.navigateTo({
						url: "/pages/duty/activitysign?id=" + this.activityId
					})
				}
			},
			joinOut() {
				uni.showLoading({
					title: "取消中..."
				})
				this.$app.request({
					url: this.$api.duty.delMineActivity + this.itemId,
					method: 'DELETE',
					dataType: 'json',
					success: res => {
						if (res.status) {
							uni.hideLoading()
							uni.showToast({
								icon: 'error',
								title: "系统错误"
							})
						} else {
							uni.hideLoading()
							uni.showToast({
								icon: 'success',
								title: "取消成功"
							})
							uni.navigateBack()
						}
					},
					fail: res => {},
					complete: res => {
						uni.hideLoading()
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;

	}

	.page {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: auto;
		height: 100%;
	}

	.content-scroller {
		flex: 1;
		width: 100%;
		height: 100rpx;
	}

	.content {
		width: 100%;
		position: relative;
		height: 100%;
	}

	.box {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 300rpx;
		background: #FFF;
		left: 50%;
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		box-shadow: 0rpx 7rpx 33rpx 16rpx rgba(188, 226, 204, 0.15);
		border-radius: 30rpx;

		.title-img {
			width: 443rpx;
			height: 203rpx;
			align-self: center;
		}

		.title {
			display: flex;
			flex-direction: row;
			font-size: 30rpx;
			font-weight: 400;
			align-items: center;
			margin-top: 50rpx;

			.title-status {
				text-align: center;
				margin-left: 20rpx;
				width: 100rpx;
				color: white;
				background: #00821E;
				border-radius: 10rpx;
			}

		}

		.title-content {
			margin: 20rpx;
		}


		.count-btn {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 20rpx;

			.btn {
				margin-right: 20rpx;
				background: #00821E;
				color: white;
				padding: 5rpx 20rpx;
				border-radius: 10rpx;
			}
		}

		.notice {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 20rpx;
			padding: 20rpx;
			background-color: #F6F8FC;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			.notice-content {
				margin-left: 20rpx;
			}
		}

		.options-box {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding: 10rpx 20rpx;
			font-size: 25rpx;

			.options-title {}

			.options-content {}
		}

		.options-box-c {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			padding: 10rpx 20rpx;
			font-size: 25rpx;

			.options-title-c {}

			.options-content-c {}

			.img-box {
				display: flex;
				flex-direction: column;
				width: 100%;

				image {
					width: 100%;
				}

				video {
					width: 90%;
				}
			}
		}

		.options {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			padding: 20rpx;

			.op-title {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				.point {
					background: #FFF;
					border-width: 5rpx;
					border-color: #00821E;
					border-style: solid;
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
				}

				.op-content {
					margin-left: 15rpx;
					font-size: 30rpx;
				}

			}
		}
	}

	.tab-bar {
		width: 100%;
		display: flex;
		flex-direction: row;

		padding-top: 15rpx;

		.tab-active {
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			color: #00821E;
		}

		.tab-default {
			text-align: center;
			font-size: 40rpx;
			font-weight: 200;
			color: #00821E;
		}
	}

	.title-box {
		width: 100%;
		height: 400rpx;
		background-image: url('../../static/images/ic_activitydetail_bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.state-bar {
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		margin: 45rpx 0rpx;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-left: 20rpx;
		}

		.tab {
			display: flex;
			flex-direction: row;
			color: white;
			justify-content: center;
			font-size: 40rpx;
			align-self: center;
			text-align: center;
			width: 100%;
			margin-left: -70rpx;

			:last-child {
				margin-left: 40rpx;
			}

			.tab-1 {
				border-bottom-width: 8rpx;
				border-bottom-style: solid;
				border-bottom-color: white;
			}
		}
	}

	.container-box {
		display: flex;
		flex-direction: column;
		background-color: white;
		justify-content: center;
		align-items: flex-start;
		margin: 20rpx;
		padding: 30rpx 0rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		height: 100%;

		.area-box {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			margin: 30rpx;

			.area-title {
				font-size: 30rpx;
				color: #747474;
			}

			.area-picker {
				background-color: #E8F6EE;
				margin-left: 20rpx;
				color: #b3b3b3;
				padding: 10rpx 30rpx;
			}
		}
	}

	/*搜索*/
	.search {
		padding: 10rpx 24rpx 10rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		align-self: center;

		.search-content {
			background: #f2f2f2;
			border-radius: 15px;
			padding: 10rpx 24rpx 10rpx 24rpx;
			margin-right: 15rpx;
			flex: 1;
			display: flex;
			align-items: center;
		}

		/deep/.input {
			color: #8cc7b5;
		}

		.icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 15rpx;
		}

		.btn {
			color: #b3b3b3;
		}
	}
</style>
