<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>
					<block v-if="canJoin">
						<view v-if="type==-1" class="btn" @click="join()">立即参与</view>
						<!-- <view v-if="type==2" class="btn" @click="joinOut()">取消报名</view> -->
					</block>
				</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" v-if="type != -1">
					<view class="options-title-content">
						<view class="op-title">
							<view class="point"></view>
							<view class="op-content">报名信息</view>
						</view>
						<block v-if="type==1">
							<view class="options-status">
								<block v-if="mineSignInfo.isCheck==0">审批中</block>
								<block v-if="mineSignInfo.isCheck==1">
									<block v-if="mineSignInfo.isCertificate==0">未制证</block>
									<block v-if="mineSignInfo.isCertificate==1">已制证</block>
								</block>
								<block v-if="mineSignInfo.isCheck==-1">未通过</block>
							</view>
						</block>
						<block v-else>
							<view class="options-status">
								<block v-if="uniSignInfo.isCheck==0">审批中</block>
								<block v-if="uniSignInfo.isCheck==1">
									<block v-if="uniSignInfo.isCertificate==0">未制证</block>
									<block v-if="uniSignInfo.isCertificate==1">已制证</block>
								</block>
								<block v-if="uniSignInfo.isCheck==-1">未通过</block>
							</view>
						</block>
					</view>
					<view class="sign-box" v-if="type==1">
						<view class="unit-item">
							<view class="unit-title">姓名</view>
							<view class="unit-content">{{mineSignInfo.name}}</view>
						</view>
						<view class="unit-item">
							<view class="unit-title">联系电话</view>
							<view class="unit-content">{{mineSignInfo.phone}}</view>
						</view>
						<view class="unit-item">
							<view class="unit-title">人员类型</view>
							<view class="unit-content">{{mineSignInfo.userType}}</view>
						</view>
						<!-- 	<block v-for="(item,index) in mineSignInfo.list">
							<view>
								<view>姓名</view>
								<view>{{mineSignInfo.name}}</view>
							</view>
							<view>
								<view>联系电话</view>
								<view>{{mineSignInfo.phone}}</view>
							</view>
						</block> -->
					</view>
					<view class="sign-box" v-else>
						<view class="unit-item">
							<view class="unit-title">姓名</view>
							<view class="unit-content">{{uniSignInfo.userName}}</view>
						</view>
						<view class="unit-item">
							<view class="unit-title">联系电话</view>
							<view class="unit-content">{{uniSignInfo.phone}}</view>
						</view>
						<view class="unit-item">
							<view class="unit-title">单位名称</view>
							<view class="unit-content">{{uniSignInfo.companyName}}</view>
						</view>
					</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>
				<map class="map-location" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
				<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,
				joinId: "",
				latitude: 41.008201,
				longitude: 113.173603,
				covers: [],
				canJoin: false,
				token: '',
				mineSignInfo: {},
				uniSignInfo: {}
			}
		},
		onLoad(res) {
			this.activityId = res.id
			this.type = res.type
			this.joinId = res.itemId
			if (this.activityId == "") {
				uni.navigateBack()
			}
			this.getActivityDetail()
			this.token = getApp().globalData.token;
			if (this.token != '') {
				if (this.joinId != '') {
					if (this.type == 1) {
						//获取个人报名信息
						this.getMineSign();
					} else {
						//获取单位报名信息
						this.getUnitSign();
					}
				}
			}

		},
		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
							var mark = {
								latitude: this.bean.latitude,
								longitude: this.bean.longitude,
								iconPath: '/static/images/ic_location_mark.png'
							};
							this.canJoin = '已发布' == this.bean.status || '报名中' == this.bean.status;
							this.covers.push(mark);
							this.covers = this.covers;
						}
						console.log(this.bean)
					},
					fail: res => {
						this.showPageLoading = false
					},
					complete: res => {
						this.showPageLoading = false
					}
				});
			},
			//获取个人报名信息
			getMineSign() {
				this.$app.request({
					url: this.$api.duty.getMineSignInfo + this.joinId,
					method: 'GET',
					dataType: 'json',
					header: {
						token: this.token
					},
					success: res => {
						if (res) {
							this.mineSignInfo = res;
						}
					},
					fail: res => {},
					complete: res => {}
				});
			},
			//获取单位报名信息
			getUnitSign() {
				this.$app.request({
					url: this.$api.duty.getUnitSignInfo + this.joinId,
					method: 'GET',
					dataType: 'json',
					header: {
						token: this.token
					},
					success: res => {
						if (res) {
							this.uniSignInfo = res;
						}
					},
					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.joinId,
					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: max-content;
				min-width: max-content;
				color: white;
				background-image: url('/static//images/ic_status_bg.png');
				background-size: 100% 100%;
				padding-left: 10rpx;
				padding-right: 10rpx;
				font-size: 20rpx;

			}

		}

		.title-content {
			margin-left: 40rpx;
			margin-right: 40rpx;
			margin-top: 20rpx;
			font-size: 24rpx;
		}



		.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: 95%;
				align-self: center;

				image {
					width: 100%;
				}

				video {
					width: 90%;
				}
			}
		}

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

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

				.options-status {
					text-align: center;
					margin-left: 20rpx;
					width: max-content;
					min-width: max-content;
					color: white;
					background-image: url('/static//images/ic_status_bg.png');
					background-size: 100% 100%;
					padding-left: 10rpx;
					padding-right: 10rpx;
					font-size: 20rpx;
				}
			}

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

				.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;
		}
	}

	.map-location {
		width: 90%;
		height: 400rpx;
		min-height: 400rpx;
		align-self: center;
	}

	.sign-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 80%;



		.unit-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 10rpx;

			.unit-title {
				border-right: 1rpx solid #f2f2f2;
				flex: 0.5;
			}

			.unit-content {
				flex: 1.5;
				padding-left: 10rpx;
			}
		}

		.unit-item:first-child {
			border-top: 1rpx solid #f2f2f2;
			border-left: 1rpx solid #f2f2f2;
			border-right: 1rpx solid #f2f2f2;
		}

		.unit-item:nth-of-type(n+2) {
			border: 1rpx solid #f2f2f2;
		}
	}
</style>
