<template>
	<view style="padding-bottom: 50rpx;">
		<view class="desc">
			<view class="h1-title">动态信息</view>
			<textarea class="value" v-model="form.content" placeholder="请输入动态信息" placeholder-style="fontsize: 28rpx"/>
		</view>
		<view class="line"></view>
		<!-- 上传图片 -->
		<view class="avatar-info">
			<view class="h1-title">上传图片</view>
			<view class="up-box">
				<view class="up-load" @click="upImages">
					<view class="iconfont icon-tianjia"></view>
				</view>
				<view class="up-load" v-for="(item,index) in form.photo_show" :key="index" style="border: none">
					<image :src="item" mode=""></image>
					<view class="close" @click="deleteImage(index)">+</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<!-- 上传视频 -->
		<view class="video-box">
			<view class="h1-title">上传视频</view>
			<view v-if="form.video" class="video-up-load">
				<video class="video" :src="form.video" controls></video>
				<view class="close" @click.stop="deleteVideo">+</view>
			</view>
			<view v-else class="video-up-load" @click="upLoadVideo">
				<view class="iconfont icon-tianjia"></view>
			</view>
		</view>
		<!-- 选择地址 -->
		<view class="location" @click="goLocation">
			<view style="color: #333;">{{form.address}}</view>
			<image :src="imgfixUrls + 'merchant/where.svg'" />
			<view>定位</view>
		</view>
		<!-- 发布按钮 -->
		<view class="footer-btn" @click="handlesubmitClick">发布</view>
		<!-- h5选择地址 -->
		<!-- #ifdef H5 -->
		<PopManager :show="isOpenLaction" :type="'bottom'" :overlay="'false'" :showOverlay="'false'">
			<view class="iframe-wid-hgt" :style="{ height: phoneHight,width:phoneWidth }" v-if="latlngs.latitude">
				<iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=KIQBZ-6OT3G-AOMQD-IHW6J-PEUDV-VCFAF&referer=myapp&coord=${latlngs.latitude},${latlngs.longitude}`"></iframe>
			</view>
			<view class="iframe-wid-hgt" :style="{ height: phoneHight,width:phoneWidth }" v-if="!latlngs.latitude">
				<iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=KIQBZ-6OT3G-AOMQD-IHW6J-PEUDV-VCFAF&referer=myapp`"></iframe>
			</view>
		</PopManager>
		<!-- #endif -->
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import wxApi from '@/common/js/wxApi.js';
	import PopManager from '@/components/template/PopManager';
	export default {
		data() {
			return {
				form: {
					content: '',
					photo: [],
					photo_show: [],
					video: '',
					lng: '',
					lat: '',
					address: '点击定位地址',
				},
				dynamic_id: '',
				isOpenLaction: false,
				disabled: true,
				userAddress: {},
				owenscitylist:[],
				phoneHight: '',
				phoneWidth: '',
				latlngs: null,
				counts:true,
				userInfo:{},
				lblis:{}
			}
		},
		components: {
			PopManager
		},
		onLoad(e) {
			let _this = this
			if(e.id != 0) {
				console.log('触发')
				_this.dynamic_id = e.id
			}
			_this.owenscitylist = uni.getStorageSync('cityList');
			
			let locationInfo = uni.getStorageSync('curLoction') || {}
			_this.form.lat = locationInfo.latitude || ''
			_this.form.lng = locationInfo.longitude || ''
			// 编辑动态时才请求
			if(e.id != 0) {
				_this.getMemberList()
			}
			// #ifdef H5
			_this.latlngs = uni.getStorageSync('curLoction');
			_this.toLocale();
			// 获取手机尺寸
			uni.getSystemInfo({
				success(res) {;
					_this.phoneHight = res.windowHeight + 'px';
					_this.phoneWidth = res.windowWidth + 'px';
				}
			});
			// #endif
		},
		onShow(){
			//#ifdef APP-PLUS
			if(this.lblis.lat){
				let bilis = {
					detailed_address:this.userInfo.address,
					lat:this.lblis.lat,
					lng:this.lblis.lng
				};
				this.getloctions(bilis);
			}
			//#endif
			
			
		},
		methods: {
			// 获取动态信息
			getMemberList() {
				let _this = this
				App._post_form(
					`&p=dating&do=dynamicEdit&type=get`,
					{
						id: _this.dynamic_id
					},
					res => {
						if(res.errno == 0) {
							_this.form = res.data
							_this.form.address = res.data.address ? res.data.address : '点击定位地址'
							_this.form.photo_show = res.data.photo_show ? res.data.photo_show : []
						}
					},
					false,
					() => {
					}
				);
			},
			
			// 发布编辑动态
			handlesubmitClick() {
				let _this = this,
					datas = {}
				if(_this.form.address === '点击定位地址') {
					_this.form.address = ''
					_this.form.lat = ''
					_this.form.lng = ''
				}
				datas.data = JSON.stringify(_this.form)
				App._post_form(
					`&p=dating&do=dynamicEdit&id=${_this.dynamic_id}&type=post`,
					datas,
					res => {
						if(res.errno == 0) {
							uni.reLaunch({
								url: '/pages/subPages2/blindDate/dynamics/myself'
							})
						}
					},
					false,
					() => {
					}
				);
			},
			
			// 定位
			goLocation(){
				let _this = this;
				// #ifdef MP-WEIXIN
				uni.chooseLocation({
					keyword: '',
					success: function(e) {
						let bilis = {
							detailed_address:e.address,
							lat:e.latitude,
							lng:e.longitude
						};
						_this.disabled = false;
						_this.getloctions(bilis);
					}
				});
				// #endif
				// #ifdef H5
				_this.isOpenLaction = true;
				// #endif
				//#ifdef APP-PLUS
				      App.navigationTo({
				       url: 'pages/subPages2/map/index'
				      });
				//#endif
			},
			
			getloctions(lblis){
				console.log(lblis,'666666');
				let _this = this;
				App._post_form(`&p=member&do=lng2areaid&lng=${lblis.lng}&lat=${lblis.lat}`, {}, res => {
					_this.userAddress.detailed_address = lblis.detailed_address;
					_this.userAddress.lat = lblis.lat;
					_this.userAddress.lng = lblis.lng;
					_this.userAddress.provinceid = res.data.provinceid;
					_this.userAddress.countyid = res.data.countyid;
					_this.userAddress.cityid = res.data.cityid;
					_this.userAddress.provinceidName = '';
					_this.owenscitylist.forEach((item,index)=>{
						if(item.id == _this.userAddress.provinceid){
							_this.form.address  = item.name;
							_this.userAddress.provinceidName = item.name;
							item.area.forEach(items=>{
								if(items.id == _this.userAddress.cityid){
									_this.form.address = `${_this.form.address}${items.name}`;
									_this.userAddress.areaidName = items.name;
									console.log(_this.form.address,items.name);
									items.dist.forEach(itemss=>{
										if(itemss.id == _this.userAddress.countyid){
											_this.form.address = `${_this.form.address}${itemss.name}`;
											_this.userAddress.distidName = itemss.name;
										}
									})
								}
							})
						}
					})
					console.log(_this.userAddress);
				});
			},
			
			toLocale(){
				let _this = this;
				let lblis;
				let count = 1;
				window.addEventListener(
					'message',
					function(event) {
						// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
						let loc = event.data;
						if(!_this.counts){
							return
						}
						if(count > 1 || _this.counts){
							if (loc && loc.module == 'locationPicker') {
								console.log(count)
								lblis = {
									lat:loc.latlng.lat,
									lng:loc.latlng.lng,
									detailed_address:loc.poiaddress
								}
								_this.isOpenLaction = false;
								_this.disabled = false;
								//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
								_this.getloctions(lblis);
							}
						}
						count++;
						_this.counts = false;
						setTimeout(()=>{
							_this.counts = true
						},1000)
					},
					false
				);
			},
			
			
			// h5上传
			uoloadIgs(length, ids = 0, resImg) {
				let _this = this;
				wxApi.uoloadIg(resImg.localIds[ids], data => {
					if (data.errMsg === 'uploadImage:ok') {
						uni.showLoading({});
						let requestData = {
							upload_type: 2,
							id: data.serverId
						};
						App._post_form(
							'&do=uploadFiles',
							requestData,
							res => {
								if (res.errno === 0) {
									_this.form.photo.push(res.data.image)
									_this.form.photo_show.push(res.data.img)
									if (ids < length - 1) {
										ids++;
										uni.setTimeout(_this.uoloadIgs(length, ids, resImg), 500);
									}
									_this.$forceUpdate()
								}
							},
							false,
							() => {
								uni.hideLoading();
							}
						);
					} else {
						uni.hideLoading();
						App.showError('上传失败');
					}
				});
			},
			
			// 上传图片
			async upImages() {
				let _this = this,
					len = 6 - _this.form.photo_show.length || 0
				if(len <= 0) {
					App.showError('最多上传6涨图片')
					return
				}
				// #ifdef H5
				if(App.getClientType() == 2){
					let res = await App.browser_upload(len);
				    uni.showLoading();
				    res.tempFilePaths.forEach(item => {
				    	App._upLoad(item).then(options => {
				    		_this.form.photo.push(options.data.image)
				    		_this.form.photo_show.push(options.data.img)
				    		uni.hideLoading();
				    	})
				    })
					return
				}
				wxApi.choseImage(res => {
					let i = res.localIds.length;
					_this.uoloadIgs(i, 0, res);
				},len);
				// #endif
				// #ifndef H5
				uni.chooseImage({
					count: len, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.showLoading();
						res.tempFilePaths.forEach(item => {
							App._upLoad(item).then(options => {
								_this.form.photo.push(options.data.image)
								_this.form.photo_show.push(options.data.img)
								uni.hideLoading();
							})
						})
					},
					fail: function() {
						App.showError('上传失败');
					}
				});
				// #endif
			},
		
			// 删除照片
			deleteImage(index) {
				this.form.photo_show.splice(index,1)
				this.form.photo.splice(index,1)
			},
		
			// 视频上传
			upLoadVideo() {
				let _this = this;
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						console.log(res,'视频上传的res')
						uni.showLoading();
						uni.uploadFile({
							url: App.api_root + '&do=uploadFiles', //仅为示例，非真实的接口地址
							filePath: res.tempFilePath,
							name: 'file',
							formData: {
								upload_type: 1,
								is_base: 1
							},
							success: res => {
								let data = JSON.parse(res.data),
									base64 = new _this.$util.Base64();
								console.log('data', data);
								if (data.errno === 0) {
									_this.form.video = base64.decode(data.data.img)
								} else {	
									App.showError(data.message, () => {});
								}
								uni.hideLoading();
							},
							fail: res => {
								uni.hideLoading();
							}
						});
					}
				});
			},
		
			// 删除已上传视频
			deleteVideo() {
				this.form.video = ''
				this.isShowVideoClose = false
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.desc {
		width: 690rpx;
		height: 260rpx;
		margin: auto;
		padding-top: 30rpx;
		color: #333;
		font-size: 28rpx;
		.label {
			height: 40rpx;
		}
		.value {
			width: 100%;
			height: 200rpx;
			margin-top: 20rpx;
			line-height: 40rpx;
		}
	}

	.line {
		width: 690rpx;
		height: 8rpx;
		background-color: #F8F8F8;
		margin: auto;
		border-radius: 4rpx;
	}

	.avatar-info {
		width: 690rpx;
		height: auto;
		margin: auto;
		padding: 40rpx 0;
		.up-box {
			width: 100%;
			height: auto;
			display: flex;
			flex-wrap: wrap;
			.up-load {
				width: 158rpx;
				height: 158rpx;
				line-height: 158rpx;
				text-align: center;
				border-radius: 20rpx;
				margin: 30rpx 10rpx 0 0;
				border: 1rpx dashed #ccc;
				position: relative;
				.iconfont {
					font-size: 60rpx;
					color: #333;
					font-weight: bold;
				}
				image {
					width: 158rpx;
					height: 158rpx;
					border-radius: 20rpx;
				}
				.close {
					width: 30rpx;
					height: 30rpx;
					border-radius: 15rpx;
					color: #fff;
					background-color: rgba(0,0,0,.5);
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					transform: rotate(45deg);
					font-size: 32rpx;
					line-height: 28rpx;
					text-align: center;
				}
			}
		}
		.avatar {
			border: none;
		}
		.qrcode {
			border: none;
		}
	}
	
	.h1-title {
		height: 45rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}
	
	.video-box {
		width: 690rpx;
		margin: 30rpx auto 0;
		height: auto;
		.video-up-load {
			width: 100%;
			height: 390rpx;
			border-radius: 20rpx;
			border: 1rpx dashed #CCCCCC;
			line-height: 390rpx;
			text-align: center;
			margin: 30rpx auto 40rpx;
			position: relative;
			.iconfont {
				font-size: 54rpx;
				font-weight: bold;
			}
			.video {
				width: 100%;
				height: 100%;
			}
			.close {
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
				color: #fff;
				background-color: rgba(0,0,0,.5);
				position: absolute;
				top: 18rpx;
				right: 18rpx;
				transform: rotate(45deg);
				font-size: 50rpx;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}

	.footer-btn {
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 20rpx;
		background: linear-gradient(270deg, #FF8E88 0%, #FDAD28 100%);
		border-radius: 20rpx;
		margin: auto;
		color: #fff;
		font-size: 32rpx;
	}
	
	.location{
		width: 690rpx;
		height: auto;
		padding: 20rpx 0;
		font-size: 26rpx;
		color: #FF4444;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		image{
			padding-left: 10upx;
			width: 22upx;
			height: 22upx;
		}
	}
</style>
