<template>
	<view class="page">
		<view class="content">
			<view class="base-person">
				<view class="thick-divider"></view>

				<view class="item-box">
					<view class="item-title">姓名</view>
					<input @input="inputName" :value="name" placeholder="未录入" disabled="true" 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">联系电话</view>
					<input placeholder-class="item-input" @input="inputPhone" :value="phone" placeholder="未录入"
						class="item-content" style="text-align: right;" disabled="true" />
				</view>
				<view class="thick-divider"></view>
				<view class="item-box-v">
					<view class="title-icon">
						<view>地点</view>
					</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">
						地址
					</view>
					<input @input="inputAddress" :value="address" placeholder="请输入地址" class="item-content"
						disabled="true" 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">详细地址</view>
					<input placeholder-class="item-input" @input="inputDetailAddress" :value="detailAddress"
						disabled="true" placeholder="未录入" class="item-content" style="text-align: right;" />
				</view>
				<view class="thick-divider"></view>
				<view class="item-box" style="margin-top: 0px;">
					<view class="item-title">标题</view>
					<input placeholder-class="item-input" @input="inputTitle" :value="title" disabled="true"
						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">上报内容</view>
					<view class="item-content-bg">
						<textarea maxlength="50" @input="inputContent" :value="content" disabled="true"
							placeholder="未录入">
								</textarea>
						<text class="hint-num">{{content.length}}/50</text>
					</view>
				</view>
				<view class="thick-divider"></view>

				<view class="item-box-v">
					<view class="item-title">图片</view>
					<view class="item-content-img" style="background: #ffffff;">
						<block v-if="photoList.length>0">
							<block v-for="(item,index) in photoList">
								<image :src="item.src" @click="choseImg(item,index)" mode="scaleToFill"
									class="item-img">
								</image>
							</block>
						</block>
						<image src="../../static/images/ic_empty_data.png" mode="scaleToFill" v-else>
						</image>
					</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 src="/static/images/ic_empty_data.png" mode="scaleToFill" v-if="videoSrc==''"
							style="width: 120rpx;height: 120rpx;align-self: center;">
						</image>
						<view v-else>
							<video :src="videoSrc"></video>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="btn-box">
					<view class="save-btn" @click="doEdit()">修改</view>
					<view class="del-btn" @click="doDel()">删除</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 {
				name: "",
				phone: "",
				token: "",
				id: '',
				address: '',
				detailAddress: '',
				title: '',
				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: '',
				activityId: '',
				showPageLoading: true,
				isRefresh: false
			}
		},
		onLoad(res) {
			this.activityId = res.id;
			this.token = getApp().globalData.token;
			this.getDetailData()
		},
		onShow() {
			if (this.isRefresh) {
				this.isRefresh = false;
				this.showPageLoading = true;
				this.getDetailData();
			}
		},
		methods: {
			choseImg(item, index) {
				uni.previewImage({
					urls: [item.src]
				})
			},
			//修改页面
			doEdit() {
				console.log('sss')
				var _self = this;
				uni.navigateTo({
					url: '/pages/duty/caseportedit?id=' + _self.activityId
				})
			},
			//删除
			doDel() {
				var _self = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除该上报内容吗?',
					success(res) {
						if (res.confirm) {
							_self.$app.request({
								url: _self.$api.duty.doDelActivityReport + _self.activityId,
								method: 'DELETE',
								header: {
									token: _self.token
								},
								success(res) {
									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(err) {
									console.log('报错')
									uni.showToast({
										icon: 'error',
										title: '系统错误'
									})
									console.log(err)
								}
							})
						}
					}
				})
			},
			//获取详情
			getDetailData() {
				var _self = this;
				_self.$app.request({
					url: _self.$api.duty.getActivityReportDetail + _self.activityId,
					method: 'GET',
					header: {
						token: _self.token
					},
					success(res) {
						if (res.title) {
							_self.photoList = []
							_self.title = res.title
							_self.content = res.content
							_self.address = res.address
							_self.detailAddress = res.detailAddress
							_self.phone = res.phone
							_self.name = res.userName
							_self.covers[0].latitude = res.latitude
							_self.covers[0].longitude = res.longitude
							if (res.video && res.video != '') {
								_self.videoSrc = _self.imgUrl + res.video
							}
							if (res.photo.length != '') {
								var tempList = res.photo.split(',')
								for (var i = 0; i < tempList.length; i++) {
									tempList[i]
									var tempItem = {
										id: tempList[i],
										src: _self.imgUrl + tempList[i]
									}
									_self.photoList.push(tempItem);
								}
							}
							_self.showPageLoading = false
						} else {
							uni.showToast({
								icon: 'error',
								title: '系统错误'
							})
							_self.showPageLoading = false
						}
					},
					fail(err) {
						console.log('报错')
						_self.showPageLoading = false
						uni.showToast({
							icon: 'error',
							title: '系统错误'
						})
						console.log(err)
					}
				})
			}
		}
	}
</script>

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

	}

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

	.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: 240rpx;
		width: 96%;

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


			}

			.item-content {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				padding: 10rpx 30rpx;
				font-size: 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: 220rpx;



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

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

	.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: green;
			flex: 1;
			border-radius: 10rpx;
			text-align: center;
			align-self: center;
			margin-top: 5rpx;
			border-radius: 10rpx;
			padding: 10rpx;
		}

		.del-btn {
			color: white;
			background-color: red;
			flex: 1;
			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>
