<template>
	<view class="page">
		<view class="content">
			<!-- <scroll-view scroll-y="true" style="height: 95%;padding-bottom: 150rpx;"> -->
			<view class="base-person">
				<view class="thick-divider"></view>

				<view class="item-box">
					<view class="item-title">
						<text>活动名称</text>
						<text style="color: red;">*</text>
					</view>
					<input @input="inputName" :value="name" placeholder="请输入活动名称" class="item-content"
						placeholder-class="item-input" style="text-align: right;" />
				</view>

				<view class="thick-divider"></view>
				<view class="item-box">
					<view class="item-title">
						<text>开始时间</text>
						<text style="color: red;">*</text>
					</view>
					<picker mode="date" :value="startTime" @change="bindStartChange">
						<view class="item-content">{{startTime}}</view>
					</picker>
				</view>
				<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
				<view class="item-box">
					<view class="item-title">
						<text>结束时间</text>
						<text style="color: red;">*</text>
					</view>
					<picker mode="date" :value="endTime" @change="bindEndChange">
						<view class="item-content">{{endTime}}</view>
					</picker>
				</view>
				<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
				<view class="item-box" style="margin-top: 0px;">
					<view class="item-title">
						<text>参与人数</text>
						<text style="color: red;">*</text>
					</view>
					<input placeholder-class="item-input" type="number" @input="inputJoinCount" :value="joinCount"
						placeholder="请输入参与人数" class="item-content" style="text-align: right;" />
				</view>
				<view class="thick-divider"></view>
				<view class="item-box-v">
					<view class="title-icon" @click="chooseLoc">
						<view>
							<text>活动地址</text>
							<text style="color: red;">*</text>
						</view>

						<image src="/static/images//ic_arrow_right.png" mode="scaleToFill" class="icon"></image>
					</view>
					<view class="item-content-bg" style="height: 400rpx;padding: 0rpx;">
						<map :markers="covers" style="width: 100%;height:400rpx;" :latitude="lat"
							:longitude="lng"></map>
					</view>
				</view>
				<view class="item-box">
					<view class="item-title">
						<text>活动地址</text>
						<text style="color: red;">*</text>
					</view>
					<input @input="inputAddress" :value="address" placeholder="请输入地址" class="item-content"
						placeholder-class="item-input" style="text-align: right;" />
				</view>
				<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
				<view class="item-box" style="margin-top: 0px;">
					<view class="item-title">
						<text>详细地址</text>
						<text style="color: red;">*</text>
					</view>
					<input placeholder-class="item-input" @input="inputDetailAddress" :value="detailAddress"
						placeholder="请输入详细地址" class="item-content" style="text-align: right;" />
				</view>
				<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
				<view class="item-box">
					<view class="item-title">
						<text>活动地区</text>
						<text style="color: red;">*</text>
					</view>
					<picker mode="selector" :value="areaName" @change="bindChangeArea" :range="areaList"
						range-key="areaName">
						<view class="item-content">{{areaName}}</view>
					</picker>
				</view>
				<view class="thick-divider"></view>
				<view class="item-box" style="margin-top: 0px;">
					<view class="item-title">
						<text>活动主题</text>
					</view>
					<input placeholder-class="item-input" @input="inputTheme" :value="activityTheme"
						placeholder="请输入活动主题" class="item-content" style="text-align: right;" />
				</view>
				<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
				<view class="item-box-v">
					<view class="item-title">
						<text>活动内容</text>
						<text style="color: red;">*</text>
					</view>
					<view class="item-content-bg">
						<textarea maxlength="300" @input="inputContent" :value="content" placeholder="请输入活动内容">
								</textarea>
						<text class="hint-num">{{content.length}}/300</text>
					</view>
				</view>
				<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
				<view class="item-box-v">
					<view class="item-title">
						<text>宣传图片</text>
						<text style="color: red;">*</text>
					</view>
					<view class="item-content-img" style="background: #ffffff;">
						<block v-for="(item,index) in photoList">
							<image :src="item.src" @click="choseImg(item,index)" mode="scaleToFill" class="item-img">
							</image>
							<image src="/static/images/ic_del_icon.png" mode="scaleToFill" class="item-del"
								v-if="item.id != '' " @click="delImg(item,index)"></image>
						</block>
					</view>
				</view>
				<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
				<view class="item-box-v">
					<view class="item-title">宣传视频</view>
					<view class="item-content-bg" style="background: #ffffff;">
						<image class="video-add" src="../../static/images/ic_add_video.png" @click="chooseVideo"
							mode="scaleToFill" v-if="videoId==''"></image>
						<view class="video-box" v-else >
							<image @click="preV()" src="/static/images/ic_video_default.png" mode="center" class="video-default">
							</image>
							<image src="/static/images/ic_del_icon.png" mode="scaleToFill" @click="delVideo()"
								class="del-video">
							</image>
						</view>
					</view>
				</view>
			</view>
			<!-- </scroll-view> -->
			<view class="btn-box">
				<view class="save-btn" @click="doSave">确认提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "", //活动名称
				joinCount: '', //参与人数
				address: '', //活动地址
				token: "",
				id: '',
				address: '', //活动地址
				detailAddress: '', //详细地址
				content: '', //活动内容
				lat: 40.994496,
				lng: 113.132171,
				covers: [{
					latitude: 40.994496,
					longitude: 113.132171,
					iconPath: '/static/images/ic_location_marker.png'
				}],
				photoList: [],
				maxPhoto: 3,
				imgUrl: this.$api.common.imgUrl,
				tempPhoto: {
					id: '',
					src: '/static/images/ic_add_photo.png'
				},
				videoSrc: '',
				videoId: '',
				videoTempSrc: '',
				activityTypeId: '', //活动类型
				activityTypeName: '', //活动类型
				startTime: '请选择开始时间',
				endTime: '请选择结束时间',
				area: {},
				areaList: [],
				areaName: '请选择活动地区',
				activityTheme: '', //活动主题
			}
		},
		onLoad(res) {
			this.activityId = res.id;
			this.activityTypeId = res.typeId;
			this.activityTypeName = res.typeName;
			this.token = getApp().globalData.token;
			this.photoList.push(this.tempPhoto)
			this.getAreaList()
		},
		methods: {
			bindStartChange(e) {
				this.startTime = e.detail.value;
			},
			bindEndChange(e) {
				this.endTime = e.detail.value
			},
			bindChangeArea(e) {
				var index = e.detail.value
				this.area = this.areaList[index]
				this.areaName = this.areaList[index].areaName
			},
			//活动名称
			inputName(event) {
				this.name = event.target.value
			},
			//参与人数
			inputJoinCount(e) {
				this.joinCount = e.target.value
			},
			//活动地址
			inputAddress(e) {
				this.address = e.target.value;
			},
			//详细地址
			inputDetailAddress(e) {
				this.detailAddress = e.target.value
			},
			//活动内容
			inputContent(e) {
				this.content = e.target.value;
			},
			//活动主题
			inputTheme(e) {
				this.activityTheme = e.target.value
			},
			//预览视频
			preV() {
				uni.navigateTo({
					url: '/pages/duty/prevideo/prevideo?src=' + this.videoSrc
				})
			},
			chooseLoc() {
				var _self = this;
				uni.chooseLocation({
					latitude: _self.lat,
					longitude: _self.lng,
					success(res) {
						console.log(res)
						_self.address = res.name
						_self.lat = res.latitude
						_self.lng = res.longitude
						_self.covers[0].latitude = res.latitude
						_self.covers[0].longitude = res.longitude
					}
				})
			},
			getAreaList() {
				var _self = this
				_self.$app.request({
					url: _self.$api.common.getAreaByPid + '110889',
					method: 'GET',
					dataType: 'json',
					success: res => {
						this.areaList = res
					},
					fail: res => {
						uni.showToast({
							icon: 'error',
							title: "系统错误"
						})
					},
					complete: res => {
						uni.hideLoading()
					}
				});
			},
			delImg(item, index) {
				var _self = this;
				_self.photoList.splice(index, 1)
				_self.photoList = _self.photoList
				var isAdd = true;
				for (var i = 0; i < _self.photoList.length; i++) {
					if (_self.photoList[i].id == '') {
						isAdd = false;
						break;
					}
				}
				if (isAdd) {
					var temp = {
						id: '',
						src: '/static/images/ic_add_photo.png'
					};

					_self.photoList.push(temp);
				}
				_self.photoList = _self.photoList
			},
			delVideo() {
				this.videoId = ''
				this.videoSrc = ''
			},
			choseImg(item, index) {
				var _self = this
				if ('' == item.id) {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function(res) {
							console.log(res)
							uni.showLoading({
								title: "图片上传中...",
							})
							var startIndex = res.tempFilePaths[0].lastIndexOf("/");
							var fileName = res.tempFilePaths[0].substring(startIndex + 1, res.tempFilePaths[0]
								.length);
							uni.uploadFile({
								url: _self.$api.common.doUploadImg,
								filePath: res.tempFilePaths[0],
								name: 'image',
								formData: {
									"image": fileName
								},
								header: {
									"token": _self.token
								},
								success: res => {
									if (res.statusCode == 200) {
										uni.hideLoading()
										var imgData = res.data;
										var imgIdObj = JSON.parse(imgData);
										var tempItem = {
											id: imgIdObj.data,
											src: _self.imgUrl + imgIdObj.data
										}
										//判断数量
										if (_self.photoList.length == _self.maxPhoto) {
											_self.photoList[_self.photoList.length - 1].id =
												imgIdObj.data
											_self.photoList[_self.photoList.length - 1].src = _self
												.imgUrl + imgIdObj.data
										} else {
											_self.photoList.splice(0, 0, tempItem)
										}


									} else {
										uni.hideLoading()
										uni.showToast({
											title: "上传失败,请重试",
											duration: 1000
										})
									}
								},

								fail: (error) => {
									uni.hideLoading()
									uni.showToast({
										title: "上传失败,请重试",
										duration: 1000
									})
								}
							});
						}
					});
				}
			},
			chooseVideo() {
				var _self = this
				uni.chooseVideo({
					count: 1, //默认9
					sourceType: ['album'], //从相册选择
					success(res) {
						console.log(res)
						uni.showLoading({
							title: "视频上传中...",
						})
						var startIndex = res.tempFilePath.lastIndexOf("/");
						var fileName = res.tempFilePath.substring(startIndex + 1, res.tempFilePath.length);
						var tempPath = res.tempFilePath
						uni.uploadFile({
							url: _self.$api.common.doUploadVideo,
							filePath: res.tempFilePath,
							name: 'video',
							formData: {
								"video": fileName
							},
							header: {
								"token": _self.token
							},
							success: res => {
								if (res.statusCode == 200) {
									uni.hideLoading()
									var imgData = res.data;
									var imgIdObj = JSON.parse(imgData);
									_self.videoId = imgIdObj.data
									_self.videoSrc = _self
										.imgUrl + imgIdObj.data
									_self.videoTempSrc = tempPath

								} else {
									uni.hideLoading()
									uni.showToast({
										title: "上传失败,请重试",
										duration: 1000
									})
								}
							},

							fail: (error) => {
								uni.hideLoading()
								uni.showToast({
									title: "上传失败,请重试",
									duration: 1000
								})
							}
						});
					}
				})
			},
			//校验参数
			checkParams() {
				if (this.name == "") {
					uni.showToast({
						icon: 'error',
						title: "请输入活动名称"
					})
					return false;
				}
				if (this.startTime == '请选择开始时间') {
					uni.showToast({
						icon: 'error',
						title: "请选择开始时间"
					})
					return false;
				}
				if (this.endTime == '请选择结束时间') {
					uni.showToast({
						icon: 'error',
						title: "请选择结束时间"
					})
					return false;
				}
				if (this.joinCount == '') {
					uni.showToast({
						icon: 'error',
						title: "请输入参与人数"
					})
					return false;
				}
				if (this.address == '') {
					uni.showToast({
						icon: 'error',
						title: "请输入活动地址"
					})
					return false;
				}
				if (this.detailAddress == '') {
					uni.showToast({
						icon: 'error',
						title: "请输入活动详细地址"
					})
					return false;
				}
				if (this.areaName == '请选择活动地区') {
					uni.showToast({
						icon: 'error',
						title: "请选择活动地区"
					})
					return false;
				}
				if (this.content == '') {
					uni.showToast({
						icon: 'error',
						title: "请输入活动内容"
					})
					return false;
				}
				if (this.photoList.length < 2) {
					uni.showToast({
						icon: 'error',
						title: "请上传宣传图片"
					})
					return false;
				}
				return true;

			},
			doSave() {
				var _self = this;
				if (_self.checkParams()) {
					uni.showLoading({
						title: "提交中..."
					})
					var id = "";
					if (_self.photoList.length >= 2) {
						for (var i = 0; i < _self.photoList.length; i++) {
							if (_self.photoList[i].id != '') {
								id += _self.photoList[i].id + ","
							}
						}
					}
					//判断Id
					if (id.lastIndexOf(',') == id.length - 1) {
						var temp = id.substring(0, id.length - 1)
						id = temp;
						console.log(id)
					}
					var bean = {
						activityType: _self.activityTypeName,
						activityTypeId: _self.activityTypeId,
						address: _self.address,
						areaCode: _self.area.areaCode,
						areaName: _self.area.areaName,
						content: _self.content,
						endTime: _self.endTime,
						startTime: _self.startTime,
						joinCount: _self.joinCount,
						latitude: _self.lat,
						longitude: _self.lng,
						name: _self.name,
						theme: _self.activityTheme,
						videos: _self.videoId,
						photo: id,
					}
					_self.$app.request({
						url: _self.$api.duty.doSaveActivity,
						method: 'POST',
						dataType: 'json',
						header: {
							token: _self.token
						},
						data: bean,
						success: res => {
							console.log(res)
							if (res.status) {
								uni.hideLoading()
								uni.showToast({
									icon: 'error',
									title: "系统错误"
								})
							} else {
								if (res.msg) {
									uni.showToast({
										icon: 'error',
										title: res.msg
									})
								} else {
									uni.hideLoading()
									uni.showToast({
										icon: 'success',
										title: "发布成功",
										success() {
											setTimeout(function() {
												let pages = getCurrentPages(); // 当前页面
												let beforePage = pages[pages.length -
													2]; // 前一个页面
												beforePage.$vm.isRefresh = true;
												uni.navigateBack()
											}, 1000)
										}
									})

								}
							}
						},
						fail: res => {
							uni.showToast({
								icon: 'error',
								title: "系统错误"
							})
						},
						complete: res => {
							uni.hideLoading()
						}
					});
				}
			}
		}
	}
</script>

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

	}

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

	.content {
		flex: 1;
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: column;
	}

	.base-person {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		font-size: 20rpx;
		padding-bottom: 180rpx;

		.thick-divider {
			height: 15rpx;
			background: #f2f2f2;
			width: 100%;
		}

		.hint-txt {
			padding: 10rpx 40rpx;
			color: darkred;
			font-size: 20rpx;
			background: #f2f2f2;
		}

		.item-box-v {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-top: 10rpx;
			background: white;
			align-items: flex-start;
			width: 100%;
			padding-bottom: 50rpx;

			.item-title {
				font-size: 28rpx;
				padding: 10rpx 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.xing {
					color: red;
				}

			}

			.item-content {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				padding: 10rpx 30rpx;
				font-size: 28rpx;
				line-height: 28rpx;
			}

			.item-content-bg {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				padding: 20rpx;
				width: 85%;
				background: #f3f3f3;
				border-radius: 10rpx;
				align-self: center;
				height: 340rpx;

				.video-add {
					width: 100%;
					height: 340rpx;
				}


				textarea {
					font-size: 28rpx;
					text-align: left;
					width: 100%;
				}

				.hint-num {
					align-self: flex-end;
				}
			}

			.item-content-img {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-start;
				flex-wrap: wrap;
				padding: 20rpx;
				width: 85%;
				background: #f3f3f3;
				border-radius: 10rpx;
				align-self: center;

				.item-img {
					width: 25%;
					height: 140rpx;
					padding: 10rpx 4rpx;
				}

				.item-del {
					width: 40rpx;
					height: 40rpx;
					position: relative;
					right: 25rpx;
					top: 0rpx;
				}

				// .item-img:nth-of-type(n+2) {
				// 	margin-left: 10rpx;
				// }

				textarea {
					font-size: 28rpx;
					text-align: left;
					width: 100%;
				}

				.hint-num {
					align-self: flex-end;
				}
			}

		}

		.item-box {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 10rpx;
			background: white;
			align-items: center;
			width: 100%;
			font-size: 28rpx;

			.item-input {
				font-size: 28rpx;
			}

			.item-title {
				font-size: 28rpx;
				flex: 0.5;
				padding: 15rpx 30rpx;
			}

			.item-content {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				flex: 1.5;
				padding: 15rpx 30rpx;
				font-size: 28rpx;
				line-height: 28rpx;
			}
		}

		.item {
			display: flex;
			flex-direction: row;
			margin: 20rpx;
			justify-content: flex-start;
			align-items: center;
			width: 95%;

			.item-title {
				font-size: 25rpx;
				width: 100%;
				background: #e4f3f2;
				padding: 10rpx;
			}

			.item-title-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				background: #f2f2f2;
				padding: 10rpx;
				width: 100%;

				.item-title-name {
					font-size: 20rpx;
				}

				.item-title-del {
					color: darkgreen;
				}

			}

			input {
				margin-top: 20rpx;
				padding: 10rpx;
				width: 95%;
				font-size: 25rpx;
				border: 1rpx #d3d3d3 solid;
			}
		}
	}

	.video-box {
		width: 90%;
		height: 350rpx;
		position: relative;
		top: 0rpx;
		left: 0rpx;

		.del-video {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: -16rpx;
			top: -13rpx;
			z-index: 9999;
		}

		.video-default {
			width: 100%;
			height: 350rpx;
		}
	}

	.add-person {
		color: green;
		border: 1rpx #c28127 solid;
		border-radius: 10rpx;
		text-align: center;
		align-self: flex-start;
		margin-top: 10rpx;
		border-radius: 10rpx;
		width: 25%;
		padding: 10rpx;
	}

	.btn-box {
		width: 100%;
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background: white;
		bottom: 0;
		position: fixed;

		.save-btn {
			color: white;
			background-color: #8cc7b5;
			width: 95%;
			border-radius: 10rpx;
			text-align: center;
			align-self: center;
			margin-top: 5rpx;
			border-radius: 10rpx;
			padding: 10rpx;
		}
	}


	.type-change-box {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.title-icon {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		font-size: 28rpx;
		align-items: center;
		padding: 10rpx 0rpx 10rpx 30rpx;

		.icon {
			width: 15rpx;
			height: 20rpx;
			margin-right: 90rpx;
		}
	}
</style>
