<template>
	<view class="personalSettings">
		<view class="form">
			<u-form :model="form" ref="uform" label-width="190" label-align="center">
				<u-form-item label="个人照片" prop="avatar">
					<u-avatar :src="form.avatar" @tap="avatarCut"></u-avatar>
				</u-form-item>
				<u-form-item label="真实姓名" prop="name">
					<u-input v-model="form.name" placeholder="请输入真实姓名"></u-input>
				</u-form-item>
				<u-form-item label="手机号" prop="phone">
					<u-input v-model="form.phone" type="number" placeholder="请输入11位手机号" maxlength="11"></u-input>
				</u-form-item>
				<u-form-item label="验证码" prop="code">
					<view style="width: 60%;display: inline-block;">
						<u-input v-model="form.code" type="number" maxlength="6" placeholder="请输入6位数字验证码"></u-input>
					</view>
					<view style="width: 40%;display: inline-block;">
						<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
						<u-button size="mini" @click="getCode">{{text}}</u-button>
					</view>
				</u-form-item>
				<u-form-item label="紧急联系电话" prop="ephone">
					<u-input v-model="form.ephone" type="number" placeholder="请输入11位手机号" maxlength="11"></u-input>
				</u-form-item>
			</u-form>
			<view class="btn">
				<u-button hover-class="none" :custom-style="btnStyle" shape="circle" @click="confirm">确定</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		verificationCode,
		postAvatar,
		edit,
		getUrl,
		getCode
	} from '../../api/apis.js'
	import {
		loading,
		hidden,
		toast
	} from '../../tips/myTips.js'
	export default {
		created() {
			let that = this
			uni.$on('uAvatarCropper', path => {
				loading()
				postAvatar(path).then((res) => {
					hidden()
					console.log("上传头像结果:", res)
					if (JSON.parse(res.data).code == 0) {
						let result = JSON.parse(res.data).result
						that.form.avatar = result.fileurl
						that.params.Model.FUserImage = result.fileid
					} else {
						toast(result.message)
					}
				})
			})
		},
		onLoad() {
			this.init()
			uni.$u.mpShare.title = '页面分享';
		},
		onReady() {
			this.$refs.uform.setRules(this.rules)
		},
		data() {
			return {
				btnStyle: {
					background: "#7D5AFC",
					color: '#FFFFFF'
				},
				form: {
					avatar: '',
					name: '',
					phone: '',
					code: '',
					ephone: ''
				},
				rules: {
					name: [{
						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'
						},
						{
							validator: (rule, value, callback) => {
								return value != this.form.phone
							},
							message: '紧急联系电话不许与手机号码相同',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				text: '获取验证码',
				params: {
					Model: {
						FID: this.$store.state.userInfo.Id,
						FName: '',
						FPHONE: '',
						FUserImage: '',
						FEmergentPHONE: ''
					}
				}
			}
		},
		methods: {
			init() {
				let that = this
				let userInfo = this.$store.state.userInfo
				if (userInfo.FUserImage) {
					loading()
					getUrl(userInfo.FUserImage).then((res) => {
						hidden()
						console.log("获取用户头像:", res)
						if (res.data.code == 0) {
							that.form.avatar = res.data.result[0].fileurl
							that.params.Model.FUserImage = res.data.result[0].fileid
						} else {
							console.log("获取头像失败:", res)
						}
					})
				}
				if (userInfo.Name.length !== 0) {
					this.form.name = userInfo.Name[0].Value
					this.params.Model.FName = userInfo.Name[0].Value
				}
				if (userInfo.FPHONE) {
					this.form.phone = userInfo.FPHONE
					this.params.Model.FPHONE = userInfo.FPHONE
				}
				if (userInfo.FEmergentPHONE) {
					this.form.ephone = userInfo.FEmergentPHONE
					this.params.Model.FEmergentPHONE = userInfo.FEmergentPHONE
				}
			},
			codeChange(text) {
				this.text = text
			},
			avatarCut() {
				this.$u.route({
					url: '/pages/personalSettings/cut/u-avatar-cropper',
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 200,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			getCode() {
				if (this.form.phone == '') {
					toast('请输入11位手机号')
				} else {
					getCode(this.form.phone).then((res) => {
						if (res.data.code == 0) {
							this.$refs.uCode.start()
							toast('验证码发送成功')
						} else {
							console.log("获取验证码失败:", res)
						}
					})
				}
			},
			confirm() {
				let that = this
				that.params.Model.FName = that.form.name
				that.params.Model.FPHONE = that.form.phone
				that.params.Model.FEmergentPHONE = that.form.ephone
				this.$refs.uform.validate(valid => {
					if (valid) {
						//验证验证码
						loading()
						verificationCode(this.form.phone, this.form.code).then((res) => {
							hidden()
							console.log("验证码验证结果:", res)
							if (res.data.code == 0) {
								that.params.Model.FName = that.form.name
								that.params.Model.FPHONE = that.form.phone
								that.params.Model.FEmergentPHONE = that.form.ephone
								loading()
								edit(that.params).then((res) => {
									hidden()
									console.log("修改个人信息结果:", res)
									if (res.data.code == 0) {
										uni.navigateBack()
									} else {
										toast(res.data.message)
									}
								})
							} else {
								toast(res.data.message)
							}
						})
					} else {
						console.log('验证失败')
					}
				})
			}
		}
	}
</script>

<style>
	.btn {
		margin: 5% auto;
		width: 95%;
	}
</style>
