<template>
	<view class="content">
		<view class="content-form">
			<view class="form-data">
				<u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
						<u-form-item prop="time" label="用户类型:" required>
							<!-- <view v-if="userDetailInfo">{{form.addressType}}</view> -->
							<v-select ref="addressType" placeholder="请选择用户类型" @itemChange="chooseType" code="ORDER_ADDRESS_TYPE" style="width: 100%"></v-select>	
						</u-form-item>
						<u-form-item prop="contactName" label="用户名称:" required>
							<u-input placeholder="请输入用户名称"  v-model="form.contactName"/>
						</u-form-item>
						<u-form-item prop="contactMobile" label="联系电话:" required>
							<u-input placeholder="请输入联系电话" v-model="form.contactMobile"/>
						</u-form-item>
				</u-form>
			</view>
			<view class="form-data">
				<u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
						<u-form-item prop="contactAddress" label="通讯地址:" required>
							<u-input placeholder="请选择通讯地址" v-model="form.contactAddress" @click="selectAddress" :disabled="true"/>
							<u-icon name="arrow-right" slot="right"></u-icon>
						</u-form-item>
						<u-form-item prop="houseAddress" label="详细信息:" >
							<u-input placeholder="请输入详细信息" v-model="form.houseAddress"/>
						</u-form-item>
				</u-form>
			</view>
			<view class="form-data qyImg">
				<view> 上传图片 <text style="color: #a6a6a6;">(仅可上传1张，10MB以内)</text></view> 
				<view class="info-main">
					<view class="camera-btn" v-if="photograph.length<1">
						<view @click="goPhotograph" class="photograph-camera">
							<u-icon name="camera" color="#bfbfbf" size="60" ></u-icon>
						</view>
					</view>
					<view v-show="photograph.length" v-for="(item,index) in photograph" :key="index" class="photograph-con">
						<u-icon  name="close-circle-fill" color="#fa3534" size="50" class="close-circle-icon" @click="cancelPhotograph(index)"></u-icon>
						<u-image width="100%" height="100%" :src="item" @click="previewPictures(item)"></u-image>
					</view>
				</view>
			</view>
		</view>
		<view class="btns">
			<u-button @click="submit" :loading="loading" :custom-style="submitBtn">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {userInfoSave,userDetail} from '@/api/data.js'
	import {saveImgToAliOss} from '@/libs/tools.js'
	import vSelect  from  '@/components/select/v-select.vue'
	export default {
		components: {vSelect},
		data() {
			return {
				title:'',
				loading:false, // 提交按钮加载圈
				photograph:[],
				imageHeader:'', //  图片路径
				userDetailInfo:{}, // 用户信息
				form: {
					addressType:'', // 用户类型
					contactMobile: '', //联系人手机
					contactAddress:'' ,// 通讯地址
					contactName:'', // 联系人名称
					lat:'', // 通讯地址的经度
					lng:'', // 通讯地址的纬度
					houseAddress:'', // 详细地址
					// imageHeader:'', // 门头照片
				},
				contactAddress:'' ,// 通讯地址
				isView: false ,// 是否是查看详情
				itemId:'',
				submitBtn:{
					backgroundColor: '#4F88F7',
					color: '#fff',
					borderRadius: '12px'
				},
				show: false,
			};
		},
		onLoad(option) {
			console.log(option,option.id,'ppppppppp')
			this.userDetailInfo={}
			this.getDetailData()
			// 查看
			// if(option && option.id){
			// 	this.isView = true
			// 	this.itemId=option.id
			// 	// this.getDetailData()
			// }else {
			// 	console.log('--------新增')
			// 	this.photograph = []
			// 	// this.form.remarks = ''
			// 	this.$refs.uForm.resetFields()
			// }
		},
		onUnload() {
		},
		methods: {
			// 获取详情数据
			getDetailData(){
				userDetail().then(res=>{
					if(res.status==200){
						this.userDetailInfo=res.data
						this.$refs.addressType.setVal(res.data.addressType)
						this.form.contactMobile=res.data.contactMobile
						this.form.contactName=res.data.contactName
						this.form.contactAddress=res.data.contactAddress
						this.form.houseAddress=res.data.houseAddress
						this.imageHeader=res.data.imageHeader
						this.form.lat=res.data.latitude
						this.form.lng=res.data.longitude
						
						console.log(res)
					}
				})
			},
			// 选择用户类型
			chooseType(v){
				this.form.addressType = v
			},
			selectAddress(){
				wx.chooseLocation({
					success:(res)=>{
						if(res){
							console.log(res,'--------dizhi ')
							this.$nextTick(()=>{
								this.form.contactAddress=res.address
								this.form.lat=res.latitude
								this.form.lng=res.longitude
								console.log(res.address,'-----------res.address',this.form.contactAddress)
							})
						}
					}
				})
			},
			// 选择用户类型
			selectTime(){
				wx.hideKeyboard()
				setTimeout(()=>{
					this.show=true
				},500)
				
				
			},
			confirm(e) {
				console.log(e);
				this.form.time=e[0].label + e[1].label
			},
			// 选择用户信息
			selectUserInfo(){
				uni.navigateTo({
				    url: '/pages/index/userInfo'
				})
			},
			// 拍照或从相册选图片
			goPhotograph() {
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success:  (res) =>{
						console.log(res,'rrrrrrrrrrr')
				        console.log(JSON.stringify(res.tempFilePaths),'----------------------------------');
						console.log(this.photograph.length,'this.photograph')
						if(res.tempFiles[0].size>10485760){
							uni.showToast({
								title: '图片过大无法上传！',
								icon: 'none'
							})
							return
						}
						uni.showLoading({
							title:'正在保存图片...',
							mask: true
						})
						saveImgToAliOss(res.tempFilePaths[0],(ret)=>{
							this.photograph.push(res.tempFilePaths[0])
							this.imageHeader = res.tempFilePaths[0]
							uni.hideLoading()
						})
						console.log(this.photograph,res.tempFilePaths[0],this.photograph.toString(),'-------------this.photograph')
				    }
				});
			},
			//  预览图片
			previewPictures(item) {
				const photograph = [item];
				uni.previewImage({
					urls: photograph,
				});
			},
			//  删除图片
			cancelPhotograph(index) {
				setTimeout(() => {
					this.photograph.splice(index)
				}, 500);
			},
			// 提交
			submit(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						if (this.form.addressType =='') {
							uni.showToast({
								title: '请选择用户类型',
								icon: 'none'
							})
							return false
						}
						const testVal=/^1[34578]\d{9}$/
						if (!testVal.test(this.form.contactMobile)) {
							uni.showToast({
								title: '请输入正确的联系电话',
								icon: 'none'
							})
							return false
						}
						if (this.form.contactName==='') {
							uni.showToast({
								title: '请输入用户名称',
								icon: 'none'
							})
							return false
						}
						if (this.form.contactAddress ==='') {
							uni.showToast({
								title: '请输入通讯地址',
								icon: 'none'
							})
							return false
						}
						const params=this.form
						if(this.photograph){
							params.imageHeader=this.imageHeader
						}
						console.log(params,'--------用户信息')
						userInfoSave(params).then(res=>{
							if(res.status==200){
								uni.$emit('add', {data: 'userInfo' })
								setTimeout(()=>{
									uni.navigateBack({
										
									})
								},300)
							}
							console.log(res,'------------res')
						})
						
					} else {
						console.log('验证失败');
					}
				});
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		height: 100vh;
		padding: 0;
		background: #F5F5F5;
		display: flex;
		flex-direction: column;
		.content-form{
			flex: 1;
			overflow-y: scroll;
		}
		.receiveAddress{
			width: 100%;
			line-height: 1.5em;
			box-sizing: border-box;
			font-style: normal;
		}
		.form-data{
			padding: 0 30upx 0 50upx;
			margin-bottom: 20upx;
			background-color: #fff;
		}
		.qyImg{
			padding: 40upx ;
		}
		.info-main {
			margin-top: 14upx;
			border-radius: 12upx;
			background-color: #fff;
			display: flex;
			.location-icon {
				padding-left: 10upx;
				vertical-align: sub;
			}
			.photograph-camera {
				border: 2upx dashed #bfbfbf;
				border-radius: 12upx;
				width: 140upx;
				height: 140upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.camera-btn{
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #999999;
				font-size: 24upx;
			}
			.photograph-con {
				margin: 0 20upx;
				width: 140upx;
				height: 140upx;
				text-align: center;
				position: relative;
				.photograph-icon {
					display: inline-block;
					padding-top: 48upx;
				}
				.close-circle-icon {
					background-color: #fff;
					border-radius: 50%;
					position: absolute;
					right: -23upx;
					top: -23upx;
					z-index: 9;
				}
			}
		}
		.btns{
			padding: 30upx 30upx 50upx;
			background-color: #fff;
		}
	}
</style>
