<template>
	<view>
		<view class="topLine"></view>
		<view class="baseInfo">
			<view class="infoItem" @click="chooseImage('avatar')">
				<view class="infoLeft">
					头像
				</view>
				<view class="infoCenter">
					<image :src="imgUrl + userInfo.avatar" mode=""></image>
				</view>
				<view class="infoRight">
					<image src="../../static/image/my/icon_faqi@2x.png" mode=""></image>
				</view>
			</view>
			<view class="infoItem">
				<view class="infoLeft">
					姓名
				</view>
				<view class="infoCenter">
					<input type="text" :focus="nicknameFocus" v-model="userInfo.nickname" placeholder="请输入姓名" placeholder-class="centerInp"/>
				</view>
				<view class="infoRight" @click="nicknameFocus = true">
					<image src="../../static/image/my/icon_faqi@2x.png" mode=""></image>
					<!-- <image src="../../static/image/right_icon.png" mode=""></image> -->
				</view>
			</view>
			<view class="infoItem">
				<view class="infoLeft">
					联系电话
				</view>
				<view class="infoCenter">
					<input type="number" v-model="param.phone" placeholder="请输入联系电话" placeholder-class="inpPh"/>
				</view>
				<view class="infoRight">
					<image src="../../static/image/my/icon_faqi@2x.png" mode=""></image>
				</view>
			</view>
			<view class="infoItem" @click="chooseImage('bgImg')">
				<view class="infoLeft">
					背景图
				</view>
				<view class="infoCenter">
					<image :src="imgUrl + userInfo.bg_image" mode=""></image>
				</view>
				<view class="infoRight">
					<image src="../../static/image/right_icon.png" mode=""></image>
				</view>
			</view>
			<view class="infoItem" @click="showChooseAddress = true">
				<view class="infoLeft">
					家乡
				</view>
				<view class="infoCenter">
					<text class="alertTxt" :class="{active:param.address != '请选择家乡'}">{{param.address}}</text>
				</view>
				<view class="infoRight">
					<image src="../../static/image/right_icon.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 服务位置区域 -->
		<!-- 服务内容区域 -->
		<!-- <view class="serviceWrap">
			<view class="title">
				服务内容
			</view>
			<view class="content bottomLine">
				<view class="left">
					<image src="../../static/image/Group_270_1.png" mode=""></image>
					<text>加水/停车</text>
				</view>
				<view class="right">
					<input type="digit" maxlength="3" v-model="param.stop_money" placeholder="请输入服务金额" placeholder-class="inpPh"/>
					<text>起</text>
				</view>
			</view>
			<view class="desc">
				加水/停车：为房车补充生活用水并提供停车服务
			</view>
		</view>
		<view class="serviceWrap">
			<view class="content bottomLine">
				<view class="left">
					<image src="../../static/image/Group_269_bl.png" mode=""></image>
					<text>充电</text>
				</view>
				<view class="right">
					<input type="number" maxlength="3" v-model="param.charge_money" placeholder="请输入服务金额" placeholder-class="inpPh"/>
					<text>起</text>
				</view>
			</view>
			<view class="desc">
				充电：为房车进行充电，保障旅程无忧
			</view>
		</view>
		<view class="serviceWrap" v-for="(item,index) in param.project_list" :key="index">
			<view class="content bottomLine">
				<view class="left">
					<image src="../../static/image/fuwuicon.png" mode=""></image>
					<input type="text" v-model="item.name" maxlength="6" placeholder="请输入服务名称" placeholder-class="inpPh"/>
				</view>
				<view class="right">
					<input type="number" maxlength="3" v-model="item.price" placeholder="请输入服务金额" placeholder-class="inpPh"/>
					<text>起</text>
				</view>
			</view>
			<view class="desc">
				<textarea v-model="item.describe" placeholder="请输入服务内容" placeholder-class="inpPh"/>
			</view>
			<view class="delService" @click="delService(index)">
				删除
			</view>
		</view> 
		<view class="addBtnWrap">
			<view class="addBtn" @click="addProject">
				添加
			</view>
		</view>-->
		<view style="height: 124rpx;"></view>
		<!-- 底部按钮区域 -->
		<view class="bottomBtnWrap">
			<view class="bottomBtnList">
				<!-- <view class="cancelBtn">
					取消
				</view> -->
				<view class="confirmBtn" @click="confirm">
					提交
				</view>
			</view>
		</view>
		<!-- 选择家乡弹框 -->
		<choose-address v-if="showChooseAddress" @close="showChooseAddress = false" @confirm="confirmAddress"></choose-address>
	</view>
</template>

<script>
	var amapFile = require('../../static/js/amap-wx.js');
	import chooseAddress from '@/components/chooseAddress.vue'
	import {mapState} from "vuex"
	export default{
		data(){
			return{
				showChooseAddress:false,
				nicknameFocus:false,
				userInfo:{},
				param:{
					area_id:'',
					phone:'',
					province:'',
					city:'',
					county:'',
					address:'请选择家乡',
					longitude:'',
					latitude:'',
					stop_money:'',
					charge_money:'',
					project_list:[]
				}
			}
		},
		computed:{
			...mapState(["userinfo"])
		},
		components:{
			chooseAddress
		},
		created() {
			uni.$on('bAvatarCropper', path => {
				// this.userInfo.bg_image = path;
				// 可以在此上传到服务端
				uni.showLoading({
					title:'上传中'
				})
				uni.uploadFile({
				    url: this.apiUrl + '/common/upload', //仅为示例，非真实的接口地址
				    filePath: path,
				    name: 'file',
					header: {
						'token': uni.getStorageSync('token')
					},
				    formData: {
				        'user': 'test'
				    },
				    success: (uploadFileRes) => {
						let url = JSON.parse(uploadFileRes.data).data.url
						this.userInfo.bg_image = url
						uni.hideLoading()
				    }
				});
				
				// uni.uploadFile({
				// 	url: 'http://192.168.100.17/index.php/index/index/upload',
				// 	filePath: path,
				// 	name: 'file',
				// 	complete: (res) => {
				// 		console.log(res);
				// 	}
				// });
			})
		},
		onLoad(){
			this.getData()
		},
		methods:{
			getData(){
				let areaIds = []
				let areaNames = []
				//获取用户信息
				this.$request('/user/info').then((res)=>{
					let avatar = res.data.avatar
					let bg_image = res.data.bg_image
					if(avatar != ''){
						res.data.avatar = '/uploads' + avatar.split('uploads')[1]
					}
					if(bg_image != ''){
						res.data.bg_image = '/uploads' + bg_image.split('uploads')[1]
					}
					this.userInfo = res.data
					if(this.userInfo.area_id != ''){
						areaIds = Object.keys(this.userInfo.area_arr)
						areaNames = Object.values(this.userInfo.area_arr)
						this.param.area_id = areaIds[areaIds.length - 1]
						this.param.address = areaNames.join('')
					}
					this.param.phone = this.userInfo.phone != '' ? this.userInfo.phone : this.userInfo.mobile
					this.param.province = this.userInfo.form_province
					this.param.city = this.userInfo.form_city
					this.param.county = this.userInfo.form_county
					// this.param.address = this.userInfo.form_address
					this.param.longitude = this.userInfo.form_longitude
					this.param.latitude = this.userInfo.form_latitude
					this.param.stop_money = this.userInfo.form_stop_money
					this.param.charge_money = this.userInfo.form_charge_money
					this.userInfo.form_project.forEach(item=>{
						this.param.project_list.push({
							id:item.id,
							name:item.form_name,
							price:item.form_price,
							describe:item.form_describe
						})
					})
				})
				
			},
			confirmAddress(e) {
				this.param.address = e.address
				this.param.area_id = e.area_id
				this.showChooseAddress = false
			},
			//选择头像
			chooseImage(imgType){
				if(imgType == 'avatar'){
					uni.chooseImage({
						count:1,
					    success: (chooseImageRes) => {
					        const tempFilePaths = chooseImageRes.tempFilePaths;
							uni.showLoading({
								title:'上传中'
							})
					        uni.uploadFile({
					            url: this.apiUrl + '/common/upload', //仅为示例，非真实的接口地址
					            filePath: tempFilePaths[0],
					            name: 'file',
								header: {
									'token': uni.getStorageSync('token')
								},
					            formData: {
					                'user': 'test'
					            },
					            success: (uploadFileRes) => {
									let url = JSON.parse(uploadFileRes.data).data.url
									this.userInfo.avatar = url
									/* if(imgType == 'avatar'){
										this.userInfo.avatar = url
									}else{
										this.userInfo.bg_image = url
									} */
									uni.hideLoading()
					            }
					        });
					    }
					});
				}else{
					this.$u.route({
						url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
						params: {
							// 输出图片宽度，高等于宽，单位px
							destWidth: 375,
							destHeight: 400,
							// 裁剪框宽度，高等于宽，单位px
							rectWidth: 345,
							rectHeight: 370,
							// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
							fileType: 'png',
							pageType:'becomeLand'
						}
					})
				}
			},
			validateNumber(e,index){
				
				let val = e.detail.value
				if(val == ''){
					val = '';
				}else{
					val = val.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
					val = val.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
					val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
					val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
					if (val.indexOf(".") < 0 && val != "") {//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
						val = parseFloat(val);
					}
				}
				//重新赋值给input
				this.$nextTick(() => {
					if(index == -1){
						this.param.stop_money = val
					}else if(index == -2){
						this.param.charge_money = val
					}else{
						this.param.project_list[index].price = val
					}
					this.$forceUpdate()
				})
			},
			//删除服务
			delService(index){
				this.param.project_list.splice(index,1)
			},
			addProject(){
				this.param.project_list.push({
					id:'',
					name:'',
					price:'',
					describe:''
				})
			},
			chooseLocation(){
				uni.chooseLocation({
				    success: (res) => {
						let point = new plus.maps.Point(res.longitude, res.latitude);
						plus.maps.Map.reverseGeocode(point,{},(e) => {
							var address = e.address; // 转换后的地理位置
							var point = e.coord; // 转换后的坐标信息
							var coordType = e.coordType; // 转换后的坐标系类型
							var reg = /.+?(省|市|自治区|自治州|县|区)/g;
							//转换成省市区
							var province = address.match(reg).toString().split(",")[0]
							var city = address.match(reg).toString().split(",")[1]
							var county = address.match(reg).toString().split(",")[2]
							var provinceTxt = province.substring(province.length - 1,province.length)
							if(provinceTxt == '市'){
								province = province.substring(0,province.length - 1)
								county = city
								city = province
							}
							this.param.address = res.name
							this.param.longitude = res.longitude
							this.param.latitude = res.latitude
							this.param.province = province
							this.param.city = city
							this.param.county = county
						});
						
				    },
					fail: (res) => {
						console.log('选择位置报错',res)
					}
				});
			},
			href(url){
				this.$href(url)
			},
			cancel(e) {

			},
			confirm(){
				if(this.userInfo.nickname == ''){
					uni.showToast({
						title:'请输入姓名',
						icon:'none'
					})
					return
				}
				if(this.userInfo.nickname.length > 6){
					uni.showToast({
						title:'姓名长度不可超过6个字',
						icon:'none'
					})
					return
				}
				if(!this.check.telphone(this.param.phone)){return;}
				if(this.param.address == '请选择家乡'){
					uni.showToast({
						title:'请选择家乡',
						icon:'none'
					})
					return
				}
				
				var myAmapFun = new amapFile.AMapWX({key:'a8c52aaa1ccef354745fb14886b7d633'});
				myAmapFun.getInputtips({
					keywords: this.param.address,
					location: '',
					success: (data)=>{
						this.userInfo.latitude = data.tips[0].location.split(',')[1]
						this.userInfo.longitude = data.tips[0].location.split(',')[0]
						this.userInfo.phone = this.param.phone
						this.$request('/user/profile',this.userInfo).then((res)=>{
							if(res.code == 1){
								this.userinfo.avatar = this.imgUrl + this.userInfo.avatar
								uni.setStorageSync('userinfo',JSON.stringify(this.userinfo))
								let timUserInfo = JSON.parse(uni.getStorageSync('userInfo')) 
								timUserInfo.img = this.imgUrl + this.userInfo.avatar
								uni.setStorageSync('userInfo',JSON.stringify(timUserInfo))
								this.$request('/user_hometown_check/add',this.param).then((res)=>{
									if(res.code == 1){
										this.$href('checkWait')
										setTimeout(()=>{
											uni.showToast({
												title:'申请成功'
											})
										},500)
									}else{
										uni.showToast({
											title:res.msg,
											icon:'none'
										})
									}
								})
							}else{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							}
						})
					}
				})
				/* if(this.param.address == '请选择服务位置' || this.param.province == '' || this.param.city == '' || this.param.county == ''){
					uni.showToast({
						title:'请选择服务位置',
						icon:'none'
					})
					return
				}
				if(this.param.stop_money == ''){
					uni.showToast({
						title:'请输入加水/停车金额',
						icon:'none'
					})
					return
				}
				if(this.param.stop_money.length > 3){
					uni.showToast({
						title:'充电金额只能输入3位以内',
						icon:'none'
					})
					return
				}
				if(this.param.charge_money == ''){
					uni.showToast({
						title:'请输入充电金额',
						icon:'none'
					})
					return
				}
				if(this.param.project_list.length > 0){
					for(let i = 0; i < this.param.project_list.length; i++){
						if(this.param.project_list[i].name == ''){
							uni.showToast({
								title:'请输入第'+(i+3)+'个服务项名称',
								icon:'none'
							})
							return
						}
						if(this.param.project_list[i].price == ''){
							uni.showToast({
								title:'请输入第'+(i+3)+'个服务项金额',
								icon:'none'
							})
							return
						}
						if(this.param.project_list[i].price.length > 3){
							uni.showToast({
								title:'第'+(i+3)+'个服务项金额只能输入3位以内',
								icon:'none'
							})
							return
						}
						if(this.param.project_list[i].describe == ''){
							uni.showToast({
								title:'请输入第'+(i+3)+'个服务项内容',
								icon:'none'
							})
							return
						}
					}
				} */
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f9;
	}
	.topLine{height: 2rpx;background: rgba(25,24,51,0.06);}
	.baseInfo{
		padding: 0 32rpx;
		font-size: 28rpx;
		background: #fff;
		.infoItem{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;
			.infoLeft{
				width: 200rpx;
			}
			.infoCenter{
				flex: 1;
				display: flex;
				align-items: center;
				input{
					font-size: 28rpx;
				}
				image{width: 64rpx;height: 64rpx;}
				.inpPh{
					font-size: 28rpx;
					color: #c8c9cc;
				}
			}
			.infoRight{
				display: flex;
				align-items: center;
				.alertTxt{
					color: #c8c9cc;
					font-weight: 300;
				}
				.alertTxt.active{
					color: #323232;
				}
				image{width: 32rpx;height: 32rpx;}
			}
		}
	}
	// 服务位置区域
	.serviceWrap{
		margin-top: 16rpx;
		padding: 0 32rpx;
		background: #fff;
		font-size: 28rpx;
		position: relative;
		.delService{
			position: absolute;
			bottom: 0;
			right: 0;
			width: 100rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			background: #35655f;
			color: #fff;
			font-size: 28rpx;
			border-radius: 30rpx 0 0 0;
		}
		.title{
			height: 88rpx;
			font-weight: 600;
			line-height: 88rpx;
		}
		.content{
			display: flex;
			justify-content: space-between;
			align-items: center;
			// height: 88rpx;
			.left{
				display: flex;
				align-items: center;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp:1;
				-webkit-box-orient:vertical;
				.alertTxt{
					color: #c8c9cc;
					font-weight: 300;
				}
				.alertTxt.active{
					color: #323232;
				}
				text{font-weight: 600;}
				input{font-size: 28rpx;width: 200rpx;}
				.inpPh{
					font-size: 28rpx;
					color: #c8c9cc;
				}
				image{width: 56rpx;height: 56rpx;}
			}
			.left.acttive{
				color: #323232;
			}
			.right{
				display: flex;
				align-items: center;
				image{width: 32rpx;height: 32rpx;}
				input{font-size: 28rpx;width: 200rpx;}
				.inpPh{
					font-size: 28rpx;
					color: #c8c9cc;
				}
				text{color: #ee0a24;}
			}
		}
		.content.bottomLine{
			border-bottom: 2rpx solid #ebedf0;
			.left{
				display: flex;
				align-items: center;
			}
		}
		.desc{
			padding: 24rpx 0;
			color: #969799;
			textarea{font-size: 28rpx;height: 100rpx;width: 100%;}
			.inpPh{
				font-size: 28rpx;
				color: #c8c9cc;
			}
			line-height: 40rpx;
		}
	}
	.addBtnWrap{
		margin-top: 24rpx;
		padding: 0 32rpx;
		.addBtn{
			width: 100%;
			height: 84rpx;
			border-radius: 50rpx;
			border: 2rpx solid #35655f;
			text-align: center;
			line-height: 84rpx;
			color: #35655f;
		}
	}
	// 底部按钮区域
	.bottomBtnWrap{
		position: fixed;
		width: 100%;
		height: 100rpx;
		bottom: 0;
		background: #fff;
		box-shadow: 0rpx -14rpx 44rpx 0rpx rgba(85,123,218,0.08); 
		display: flex;
		align-items: center;
		.bottomBtnList{
			display: flex;
			width: 100%;
			font-size: 28rpx;
			color: #fff;
			padding: 0 32rpx;
			justify-content: space-between;
			.cancelBtn{
				width: 334rpx;
				height: 80rpx;
				opacity: 1;
				background: #ffbc7f;
				text-align: center;
				line-height: 80rpx;
				border-radius: 68rpx;
			}
			.confirmBtn{
				width: 686rpx;
				height: 80rpx;
				opacity: 1;
				background: #35655f;
				text-align: center;
				line-height: 80rpx;
				border-radius: 68rpx;
			}
		}
	}

</style>