<template>
	<view class="postDemand">
		<view class="formItem">
			<view class="f-w col-3 f-32 p-t-30">
				基础信息
			</view>
			<view class="menu-item">
				<view class="menu-name">
					需求类型
					<text class="f-20 c-ff4444">*</text>
				</view>
				<view class="menu-content flex-box" @click="openlink">
					<!-- <picker @change="Change" :value="index" :range="Arr" mode="multiSelector" range-key="title"> -->
						<view class="uni-input" >{{categoryText }}</view>
					<!-- </picker> -->
				</view>
				<view class=" t-r iconfont icon-right" style="font-size: 24upx;color: #333333;">
					
				</view>
			</view>
			<view class="menu-item">
				<view class="menu-name">
					上门时间
					<text class="f-20 c-ff4444">*</text>
				</view>
				<view class="menu-content flex-box" @click="openTime" v-if="time">
					<input type="text" disabled v-model="time" class="menu-input" value="" />
				</view>
				<view class="menu-content flex-box col-9" @click="openTime" style="color: #999999;" v-else>
					请选择上门时间
				</view>
				<view class=" t-r iconfont icon-right" style="font-size: 24upx;color: #333333;">
					
				</view>
			</view>
			<view class="menu-item">
				<view class="menu-name">
					具体地址
					<text class="f-20 c-ff4444">*</text>
				</view>
				<view class="menu-content flex-box" @click="goLocation" v-if="site">
					<input type="text" disabled v-model="site" class="menu-input" value="" />
				</view>
				<view class="menu-content flex-box col-9" @click="goLocation" style="color: #999999;" v-else>
					请选择具体地址
				</view>
				<view class=" t-r" style="font-size: 24upx;color: #FF4444;border-left: 1upx solid #EEEEEE;width: 100upx;" @click="goLocation">
					定位
				</view>
			</view>
			<view class="menu-item"  style="border: none;">
				<view class="menu-name">
					联系方式
					<!-- <text class="f-20 c-ff4444">*</text> -->
				</view>
				<view class="menu-content flex-box">
					<input type="number" maxlength="11" v-model="phone" placeholder="填写后服务商可直接通过电话联系您" class="menu-input" value="" />
				</view>
				
			</view>
			
		</view>
		<view class="line">
			
		</view>
		<view class="requirement">
			<view class="f-w f-32 col-3">
				需求说明
			</view>
			<view class="text">
				<textarea  class="textarea" v-model="editorText" placeholder="请输入需求说明"></textarea>
			</view>
		</view>
		<view class="line">
			
		</view>
		<view class="uploading">
			<view class="f-w f-32 col-3">
				上传照片
			</view>
			<view class="col-9 f-24" style="padding-top: 20upx;">
				(上传照片，最多上传5张照片)
			</view>
			<view class="imgs">
				<view class="img-item" v-for="(item,index) in imglinks" :key="index">
					<image :src="item" mode=""></image>
					<image class="imgclise" @click="deletImg(index)" :src="imgfixUrls + 'homemakingImg/imgcolse.png'" mode=""></image>
				</view>
				<view class="img-item" @click="uploadFiles(2, 6)" v-if="imglinks.length < 5">
					<image :src="imgfixUrls + 'homemakingImg/upload.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="issue" @click="issueclick">
			发布需求
		</view>
		<w-picker :visible.sync="visibletimeone" mode="date" fields="minute" :value="time" :current="false"
		 :second="false" @confirm="bindTimeChangeStar($event)" @cancel="onCancel" ref="time"></w-picker>
		 <w-picker
		         :visible.sync="visible"
		         mode="linkage"
		         :value="'94'"
		         :options="Arr"
		         :level="2"
		         default-type="id"
		         :default-props="pospt"
		         @confirm="onConfirm($event,'linkage')"
		         ref="linkage" 
		     ></w-picker>
		 <!-- #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 -->
		 <!-- <TabBars :tabBarAct="0" pageType="18"></TabBars> -->
		 <PhoneMask :show1="popShow" @clickmask1="closePop"></PhoneMask>
		 <getvxphone :show="vxshow" @showFalse="showFalse"></getvxphone>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import wPicker from '@/components/w-picker/w-picker.vue';
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif
	import PopManager from '@/components/template/PopManager';
	import TabBars from '@/components/template/tabBar.vue';
	import PhoneMask from '@/components/template/PhoneMask';
	import getvxphone from '@/components/template/getVXphone.vue'
	export default{
		data(){
			return{
				index:0,
				visible:false,
				isOpenLaction:false,
				time:'',
				site:'',
				pospt:{"label":"title","value":"id","children":"list"},
				Arr:[
				],
				visibletimeone:false,
				localIds:null,
				uploadlength:0,
				imglinks:[],
				phoneHight:null,
				phoneWidth:null,
				phone:'',
				latlngs:{},
				loadlogo:false,
				uesrInfo:{},
				editorText:'',
				lng:'',
				lat:'',
				categoryText:'',
				pageId:0,
				userInfo:{},
				lblis:{},
				upimg:false,
				popShow:false,
				vxshow:false
			}
		},
		onLoad(e) {
			// debugger
			let _this = this;
			_this.pageId = e.id;
			_this.latlngs = uni.getStorageSync('curLoction');
			_this.uesrInfo = uni.getStorageSync('userinfo');
			uni.getSystemInfo({
				success(res) {
					console.log(res);
					_this.phoneHight = res.windowHeight + 'px';
					_this.phoneWidth = res.windowWidth + 'px';
				}
			});
			
			
		},
		onShow() {
			let _this = this;
			let lblis = {}
			// #ifdef H5
			window.addEventListener(
				'message',
				function(event) {
					// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
					let loc = event.data;
					
						if (loc && loc.module == 'locationPicker') {
							lblis = {
								lat:loc.latlng.lat,
								lng:loc.latlng.lng,
								detailed_address:loc.poiaddress
							}
							_this.site = loc.poiaddress;
							_this.lat = loc.latlng.lat;
							_this.lng = loc.latlng.lng;
							_this.isOpenLaction = false;
						}
				},
				false
			);
			
			// #endif
			//#ifdef APP-PLUS
			if(_this.uesrInfo.address){
				let bilis = {
					detailed_address:_this.uesrInfo.address,
					lat:_this.uesrInfo.lat,
					lng:_this.uesrInfo.lng
				};
				_this.site = _this.uesrInfo.address;
				_this.lat = _this.uesrInfo.lat;
				_this.lng = _this.uesrInfo.lng;
			}
			//#endif
			if(_this.upimg){
				_this.upimg = false;
				return
			}
			_this.getTypeinitialize(_this.pageId)
		},
		components:{
			wPicker,
			PopManager,
			TabBars,
			PhoneMask,
			getvxphone
		},
		methods:{
			showFalse(flag){
				console.log('进了showfalse')
				this.vxshow = false;
				if(flag){
					this.getTypeinitialize(this.pageId)
				}
				
			},
			closePop(flag) {
				let _this = this
				_this.popShow = false
				if(flag){
					_this.getTypeinitialize(this.pageId)
				}
				
			},
			onConfirm(e){
				console.log(e);
				this.categoryId = e.value[1];
				this.Arr.map((item,index)=>{
					if(item.id == e.value[0]){
						item.list.map((items,indexs)=>{
							if(items.id == e.value[1]){
								this.categoryText = items.title;
							}
						})
					}
				})
			},
			// 时间戳转时间
			getTimeData(dataValue) {
				// debugger
				 var date = new Date(Number(dataValue)) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				        var Y = date.getFullYear() + '-'
				        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
				        var D = date.getDate() + ' '
				        var h = date.getHours() + ':'
				        var m = date.getMinutes()
				        var s = date.getSeconds()
				        // return Y+M+D+h+m+s
				        // console.log(timestampToTime (1533293827000))
				return {
					label: Y + M + D + h + m
				};
			},
			// 时间转时间戳
			getDataTime(timeValue) {
				let ontime;
				// debugger
				ontime = timeValue.replace(/-/g, '/');
				let date = new Date(ontime);
				let time = date.getTime() / 1000;
				return time;
			},
			issueclick(){
				let _this = this;
				if(!_this.time){
					uni.showToast({
						title:'上门时间不能为空',
						icon:'none'
					});
					return
				}
				if(!_this.site){
					uni.showToast({
						title:'具体地址不能为空',
						icon:'none'
					});
					return
				};
				let serviceinfo = {
					visitingtime:_this.getDataTime(_this.time),
					thumbs:_this.imglinks,
					detail:_this.editorText,
					lng:_this.lng,
					lat:_this.lat,
					type:_this.categoryId,
					address:_this.site,
					mobile:_this.phone
				}
				console.log(serviceinfo);
				let data = {
					id:this.pageId
				};
				// debugger
				let storehours = JSON.stringify(serviceinfo);
				let base64 = new this.$util.Base64();
				storehours = base64.encode(storehours);
				data.demandinfo = storehours;
					App._post_form(
						`&p=housekeep&do=editDemandApi`,
						data,
						res => {
							console.log(res);
							if(this.pageId || !res.data.orderid){
								App.navigationTo({
									url: 'pages/subPages2/homemaking/myDemand/myDemand',
									 navType:'reLaunch'
								});
							}else{
								App.navigationTo({
									url: 'pages/mainPages/payment/payment?orderid=' + res.data.orderid + '&plugin=housekeep',
									navType:'reLaunch'
								});
							}
							
						},
						false,
						() => {
							
						}
					);
			},
			getTypeinitialize(id = ''){
				let _this = this;
					App._post_form(
						`&p=housekeep&do=editDemandPage`,
						{id},
						res => {
							_this.Arr = res.data.cate;
							_this.categoryText = _this.Arr[0].list[0].title;
							_this.categoryId = _this.Arr[0].list[0].id;
							let demand = res.data.demand;
							if(id){
								_this.Arr.map((item,index)=>{
										item.list.map((items,indexs)=>{
											if(items.id == id){
												this.categoryText = items.title;
											}
										})
								});
								_this.time = _this.getTimeData(demand.visitingtime *  1000).label;
								_this.site = demand.address;
								_this.lat = demand.lat;
								_this.lng = demand.lng;
								_this.editorText = demand.detail;
								_this.imglinks = demand.thumbs;
								
							}
							_this.phone = demand.mobile;
							// debugger
							console.log(res);
						},fail=>{
						if(fail.data.message == '认证后才能发布需求'){						
							App.navigationTo({
								url: `pages/subPages/attestationCenter/index?rzType=1&type=1`,
								navType:'reLaunch'						,
							});					
						}					
						if (fail.data.message == '未绑定手机号') {
							//#ifdef H5
							_this.popShow = true;
							//#endif
							//#ifndef H5
							_this.vxshow = true;
							//#endif
							
						}			
					});
			},
			goLocation(){
				let _this = this;
				_this.upimg = true;
				// #ifdef MP-WEIXIN
				uni.chooseLocation({
					keyword: '',
					success: function(e) {
						let bilis = {
							detailed_address:e.address,
							lat:e.latitude,
							lng:e.longitude
						};
						_this.site = e.address;
						_this.lat = e.latitude;
						_this.lng = e.longitude;
					}
				});
				// #endif
				// #ifdef H5
				_this.isOpenLaction = true;
				// #endif
				//#ifdef APP-PLUS
				      App.navigationTo({
				       url: 'pages/subPages2/map/index'
				      });
				      //#endif
			},
			deletImg(index){
				this.imglinks.splice(index,1)
			},
			openTime(){
				this.visibletimeone = true;
			},
			openlink(){
				this.visible = true;
			},
			Change(e){
				console.log(e);
				this.index = e.detail.value;
			},
			bindTimeChangeStar(e){
				console.log(e);
				// debugger
				this.time = e.result
			},
			onCancel(){
				
			},
			uplodephone(length,localIds){
			let _this = this;
					wxApi.uoloadIg(localIds[length], 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) {
											let num = length + 1;
											_this.imglinks.push(res.data.img);
											if(num < _this.uploadlength){
												uni.setTimeout(_this.uplodephone(num,_this.localIds),500);
											}
									}
								},
								false,
								() => {
									
									uni.hideLoading();
								}
							);
						} else {
							uni.hideLoading();
							App.showError('上传失败');
						}
					});
				
			},
			// 文件上传接口
			async uploadFiles(type, num) {
				let _this = this;
				_this.upimg = true;
				// _this.uoloadIgs(i, 0, res, type);
				// #ifdef H5
					if(App.getClientType() == 2){
						let res = await App.browser_upload(num);
					    for (let i = 0; i < res.tempFilePaths.length; i++) {
					    	let aa = await App._upLoad(res.tempFilePaths[i]);
					    	if (type == 2) {
					    		_this.imglinks.push(aa.data.img);
					    		// _this.userInfo.thumbs.push(aa.data.image);
					    		console.log(_this.imglinks,aa.data.img);
					    	}
					    }
						return
					}
					wxApi.choseImage(res => {
						// let length 
						_this.localIds = res.localIds;
						_this.uploadlength = res.localIds.length;
						_this.uplodephone(0,_this.localIds);
					},5);
				// #endif
				// #ifndef H5
					wx.chooseImage({
						count: 5,
						sourceType: ['album', 'camera'],
						success: async function(res) {
							// console.log(_this.userInfo.havestore, _this.page, '-------');
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								let aa = await App._upLoad(res.tempFilePaths[i]);
								if (type == 2) {
									_this.imglinks.push(aa.data.img);
									// _this.userInfo.thumbs.push(aa.data.image);
									console.log(_this.imglinks,aa.data.img);
								}
							}
						}
					});
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.postDemand{
		padding-bottom: 100upx;
		.line{
			height: 20upx;
			background-color: #F8F8F8;
		}
		.requirement{
			padding: 30upx;
			.text{
				padding: 20upx 0;
				.textarea{
					width: 100%;
					height: 160upx;
					font-size: 28upx;
				}
			}
		}
		.issue{
			width: 750upx;
			height: 90upx;
			background: linear-gradient(360deg, #6094FD 0%, #70A8FD 100%);
			line-height: 90upx;
			position: fixed;
			bottom: 0;
			left: 0;
			text-align: center;
			font-size: 32upx;
			color: #FFFFFF;
			font-weight: bold;
			border-radius: 30upx 30upx 0 0;
		}
		.uploading{
			padding: 30upx;
			.imgs{
				padding: 30upx 0;
				display: flex;
				flex-wrap: wrap;
				align-content: flex-center;
				align-items: center;
				justify-content: left;
				.img-item{
					height: 158upx;
					border-radius: 20upx;
					flex: auto;
					margin: 10upx;
					width: 158upx;
					min-width: 158upx;
					max-width: 158upx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
						border-radius: 20upx;
					}
					.imgclise{
						width: 30upx;
						height: 30upx;
						position: absolute;
						right: 10upx;
						top: 10upx;
					}
				}
			}
		}
		.formItem{
			padding: 0 30upx;
			
			.menu-item{
				display: flex;
				padding: 30upx 0;
				border-bottom: 1upx solid #EEEEEE;
				.menu-name{
					font-size: 28upx;
					color: #333333;
					width: 130upx;
					padding-right: 50upx;
				}
				.menu-content{
					font-size: 28upx;
					color: #333333;
					.menu-input{
						height: 100%;
						font-size: 28upx;
					}
				}
			}
		}
		.p-t-30{
			padding-top: 30upx;
		}
	}
</style>
