<template>
	<view>
		<view class="steps">
			<u-steps mode="number" active-color="#7D5AFC" :list="steps" :current="current"></u-steps>
		</view>
		
		<view class="form" v-if="current == 0">
			<u-form label-width="190" label-align="center">
				<u-form-item label="手机号">
					<u-input v-model="formA.Phone" placeholder="请输入11位手机号"></u-input>
				</u-form-item>
				<u-form-item label="验证码" prop="code">
					<view style="width: 60%;display: inline-block;">
						<u-input v-model="formA.VerificationCode" type="number" placeholder="请输入6位数字验证码"></u-input>
					</view>
					<view style="width: 40%;display: inline-block;">
						<u-verification-code ref="uCode" @change="codeChange" seconds="30"></u-verification-code>
						<u-button size="mini" @click="getcode">{{text}}</u-button>
					</view>
				</u-form-item>
			</u-form>
			<view class="checkbox">
				<u-checkbox @change="checkboxChange" v-model="checked"></u-checkbox><text>隐私协议和服务协议</text>
			</view>
			<view class="btn">
				<u-button :disabled="!checked" :customStyle="checked ? btnStyle:disAbleStyle" hover-class="none" shape="circle" @click="register">下一步</u-button>
			</view>
		</view>
		<!-- 个人信息 -->
		<view class="form" v-show="current == 1">
			<u-form ref="uformB" :model="formB" label-width="190" label-align="center">
				<u-form-item label="个人照片" prop="avatar">
					<u-avatar :src="formB.avatar" @tap="avatarCut"></u-avatar>
				</u-form-item>
				<u-form-item label="真实姓名" prop="realname">
					<u-input v-model="formB.realname" placeholder="请输入真实姓名"></u-input>
				</u-form-item>
				<u-form-item label="手机号" prop="phone">
					<u-input v-model="formB.phone" type="number" placeholder="请输入11位手机号" maxlength="11"></u-input>
				</u-form-item>
				<u-form-item label="紧急联系电话" prop="ephone">
					<u-input v-model="formB.ephone" type="number" placeholder="请输入11位手机号" maxlength="11"></u-input>
				</u-form-item>
				<view class="btn">
					<u-button :customStyle="btnStyle" hover-class="none" shape="circle"  @click="personalInfo">下一步</u-button>
				</view>
			</u-form>
		</view>
		<!-- 地址 -->
		<view class="form" v-show="current == 2">
			<u-form :model="formC" ref="uformC" label-width="190" label-align="center">
				<u-form-item label="居住地址" prop="address">
					<u-input disabled v-model="formC.address" @click="show = true" placeholder="点击选择居住地址"></u-input>
					<u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="save"></u-select>
				</u-form-item>
				<u-form-item label="详细地址" prop="detail">
					<u-input v-model="formC.detail" type="textarea" placeholder="请输入详细地址(如:XXX街道,XXX小区)"></u-input>
				</u-form-item>
				<view class="btn">
					<u-button :customStyle="btnStyle" hover-class="none" shape="circle"  @click="addressInfo">下一步</u-button>
				</view>
			</u-form>
		</view>
		<!-- 服务区域 -->
		<view class="form" v-show="current == 3">
			<view class="setEdit" >
					<editPage :style="'height:'+height*0.6+'px'" :Eflag="Eflag" :FID="FID"></editPage>
			</view>
			<!-- <view class="btn" >
				<u-button :customStyle="btnStyle" hover-class="none" shape="circle"  @click="serviceArea">完成注册</u-button>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {loading,hidden,toast} from '../../tips/myTips.js'
	import {getCode,register} from '../../api/api.js'
	import {edit,postAvatar,getAddress} from '../../api/apis.js'
	import{editPage}from'../serviceArea/edit/edit.vue'
	export default {
		components:{
			editPage
		},
		created(){
			let that = this
			uni.$on('uAvatarCropper',path => {
				this.formB.avatar = path
			})
		},
		onLoad(){
			uni.$u.mpShare.title = '页面分享';
			let that = this
			this.width = this.$store.state.sysInfo.windowWidth
			this.height = this.$store.state.sysInfo.screenHeight
			wx.getUserInfo({
				success(res){
					that.formA.encryptedData = res.encryptedData
					that.formA.iv = res.iv
				}
			})
			loading()
			getAddress().then((res) => {
				hidden()
				console.log("城区信息:",res)
				if(res.data.code == 0){
					that.list = res.data.result
				}else{
					toast(res.data.message)
				}
			})
		},
		onReady(){
			this.$refs.uformB.setRules(this.rulesB)
			this.$refs.uformC.setRules(this.rulesC)
		},
		data(){
			return{
				btnStyle:{
					background:"#7D5AFC",
					color:'#FFFFFF'
				},
				disAbleStyle:{
					background:"#7D5AFC4d",
					color:'#FFFFFF'
				},
				FID:'',
				steps:[
					{
						name:'账号认证'
					},
					{
						name:'基本信息'
					},
					{
						name:'地址/区域'
					},
					{
						name:'服务类目'
					}
				],
				current:0,
				//注册表
				formA:{
					Phone:this.$store.state.userInfo.FPHONE,
					VerificationCode:'',
					encryptedData:'',
					iv:''
				},
				//个人信息表
				formB:{
					avatar:'',
					realname:'',
					phone:'',
					ephone:''
				},
				paramsB:{
					Model:{
						FID:this.$store.state.userInfo.Id,
						FName:'',
						FPHONE:'',
						FUserImage:'',
						FEmergentPHONE:''
					}
				},
				rulesB:{
					realname:[
						{
							required:true,
							message: '请输入真实姓名',
							trigger: 'blur'
						}
					],
					phone:[
						{
							required:true,
							message: '请输入11位手机号',
							trigger: 'blur'
						},
						{
							len:11,
							message: '请输入正确格式的手机号',
							trigger: 'change'
						}
					],
					code:[
						{
							required:true,
							message: '请输入6位数字验证码',
							trigger: 'blur'
						}
					],
					ephone:[
						{
							required:true,
							message: '请输入11位紧急手机号',
							trigger: 'blur'
						},
						{
							len:11,
							message: '请输入正确格式的紧急手机号',
							trigger: 'change'
						}
					]
				},
				list:'',
				//地址表
				formC:{
					address:'',
					detail:''
				},
				rulesC:{
					address:[
						{
							required:true,
							message: '请选择居住地址',
							trigger: 'blur,change'
						}
					],
					detail:[
						{
							required:true,
							message: '请输入详细地址',
							trigger: 'blur'
						}
					]
				},
				paramsC:{
					Model:{
						FID:this.$store.state.userInfo.Id,
						FPROVINCE_ID:'',
						FPROVINCE:'',
						FCity_ID:'',
						FCity:'',
						FCOUNTY_ID:'',
						FCOUNTY:'',
						FAdress:''
					}
				},
				show:false,
				//服务区域表
				formD:{
					
				},
				text:'获取验证码',
				checked:false,
				width: "",
				height: "",
				Eflag:true,
			}
		},
		methods:{
			codeChange(text){
				this.text = text
			},
			getcode(){
				getCode(this.formA.Phone).then((res) => {
					console.log("请求二维码信息:",res)
					if(res.data.code == 0){
						this.$refs.uCode.start()
						console.log(res)
					}else{
						toast(res.data.result)
						console.log(res)
					}
				})
			},
			checkboxChange(){
				this.checked = true
			},
			//第一步注册
			register(){
				let that = this
				register(this.formA).then((res) => {
					console.log("注册返回信息:",res)
					if(res.data.code == 0){
						that.$store.state.userInfo=res.data.result.Result
						that.FID=res.data.result.Result.Id
						that.current += 1
						console.log(that.FID)
					}else{
						toast(res.data.message)
						console.log("注册出现错误:",res)
					}
				})
				
			},
			//第二步填写用户基本信息
			personalInfo(){
				let that = this
				this.$refs.uformB.validate(valid => {
					if(valid){
						that.paramsB.Model.FName = that.formB.realname
						that.paramsB.Model.FPHONE = that.formB.phone
						that.paramsB.Model.FEmergentPHONE = that.formB.ephone
						console.log(that.paramsB.Model.FID)
						that.paramsB.Model.FID=that.FID
						console.log("用户参数:",that.paramsB)
						console.log(that.paramsB.Model.FID)
						loading()
						postAvatar(this.formB.avatar).then((res) => {
							hidden()
							console.log("上传头像结果:",res)
							if(JSON.parse(res.data).code == 0){
								let result = JSON.parse(res.data).result
								that.paramsB.Model.FUserImage = result.fileid
								loading()
								edit(that.paramsB).then((res) => {
									hidden()
									console.log("修改个人信息结果:",res)
									if(res.data.code == 0){
										that.current += 1
									}else{
										toast(res.data.message)
									}
								})
							}else{
								toast(res.data.message)
							}
						})
					}else{
						console.log('验证失败')
					}
				})
			},
			//第三步填写地址
			addressInfo(){
				let that = this
				this.$refs.uformC.validate(valid => {
					if(valid){
						that.paramsC.Model.FAdress = that.formC.address
						that.paramsC.Model.FID=that.FID
						console.log("地址参数:",this.paramsC)
						loading()
						edit(that.paramsC).then((res) => {
							hidden()
							console.log("修改地址信息结果:",res)
							if(res.data.code == 0){
								that.current += 1
							}else{
								toast(res.data.message)
							}
						})
						
					}
				})

			},
			serviceArea(){
				uni.navigateBack()
			},
			avatarCut(){
				this.$u.route({
					url:'/pages/personalSettings/cut/u-avatar-cropper',
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 200,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			save(res){
				this.formC.address = res[0].label + res[1].label + res[2].label
				this.paramsC.Model.FPROVINCE = res[0].label
				this.paramsC.Model.FPROVINCE_ID = res[0].value
				this.paramsC.Model.FCity = res[1].label
				this.paramsC.Model.FCity_ID = res[1].value
				this.paramsC.Model.FCOUNTY = res[2].label
				this.paramsC.Model.FCOUNTY_ID = res[2].value
			},
			
		},
	}
</script>

<style>
	.steps{
		margin-top: 5%;
	}
	.checkbox{
		margin: 3% 6%;
	}
	.btn{
		margin: 5% auto;
		width: 95%;
	}
	.setEdit{
		padding-left: 26rpx;
		padding-right: 26rpx;
		border: 1rpx solid #000000;
		margin-top: 20rpx;
	}
</style>
