<template>
	<view class="page-container">
		<view class="user-info-container">
			<view class="user-item">
				<view class="user-item-title">姓&emsp;&emsp;名</view>
				<view class="user-item-content">
					<input :value="userInfo.userInfoName" @input="inputName" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="user-item">
				<view class="user-item-title">联系电话</view>
				<view class="user-item-content">
					<input :value="userInfo.contactPhone" @input="inputPhone" type="number" placeholder="请输入联系电话" />
				</view>
			</view>
		</view>
		<view class="bottom-fixed-footer">
			<view class="bottom-btn-green" @click="doUpdateInfo">保存</view>
		</view>
	</view>
	<uni-popup ref="msg" type="message">
		<uni-popup-message :type="msgType" :message="msgTxt" :duration="2000"></uni-popup-message>
	</uni-popup>
</template>

<script>
	import {
		isValidPhone
	} from '@/common/js/validator.js'
	import UserApi from '@/common/js/net/UserApi.js'
	export default {
		data() {
			return {
				userInfo: {
					userInfoName: '',
					contactPhone: ''
				},
				showInfo: false,
				msgType: 'success',
				msgTxt: ''
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: '个人信息'
			})
			uni.setNavigationBarColor({
				frontColor: '#000000', // 必写项，字体颜色仅支持#ffffff和#000000
				backgroundColor: '#F0F0F0', // 传递的颜色值，仅支持十六进制颜色
				animation: { // 可选项
					duration: 500,
					timingFunc: 'linear'
				}
			})
			this.doGetMineInfo()
		},
		methods: {
			//输入姓名
			inputName(e) {
				console.log(e)
				this.userInfo.userInfoName = e.detail.value
			},
			//输入电话号码
			inputPhone(e) {
				console.log(e)
				this.userInfo.contactPhone = e.detail.value
			},
			//校验参数
			checkParams() {
				if (this.userInfo.userInfoName == '') {
					this.msgTxt = '请输入姓名'
					this.msgType = 'error'
					this.$refs.msg.open()
					return false
				}
				if (this.userInfo.contactPhone == '' || !isValidPhone(this.userInfo.contactPhone)) {
					this.msgTxt = '请输入正确的联系电话'
					this.msgType = 'error'
					this.$refs.msg.open()
					return false
				}
				return true
			},
			//修改信息
			doUpdateInfo() {
				const _self = this
				const isLegal = _self.checkParams()
				if (isLegal) {
					uni.showLoading({
						title: '保存中...'
					})
					const data = {
						userInfoName: _self.userInfo.userInfoName,
						contactPhone: _self.userInfo.contactPhone,
						idCardType: 'ID_CARD',
						userInfoType: 'PERSONAL',
					}
					UserApi.doUpdateUserInfo(data)
						.then(res => {
							uni.hideLoading()
							console.log(res)
							_self.msgTxt = '个人信息修改成功'
							_self.msgType = 'success'
							_self.$refs.msg.open()
						})
						.catch(err => {
							uni.hideLoading()
							_self.msgTxt = err.msg ? err.msg : '信息修改失败,请稍后重试'
							_self.msgType = 'error'
							_self.$refs.msg.open()
						})
				}
			},
			//获取个人信息
			doGetMineInfo() {
				const _self = this
				uni.showLoading({
					title: '加载中...'
				})
				UserApi.doGetUserInfo()
					.then(res => {
						console.log(res)
						uni.hideLoading()
						_self.userInfo = res
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgTxt = err.msg ? err.msg : '个人信息获取过程中出现异常，建议您稍作等待后再次尝试。'
						_self.msgType = 'error'
						setTimeout(() => {
							uni.navigateBack()
						}, 1500);
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-info-container {
		height: 90vh;
		background-color: white;
		border-radius: 10px;
		padding: 15rpx;
	}

	.user-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 10px 5px;
	}

	.user-item-title {
		flex: .3;
	}

	.user-item-content {
		flex: .7;
		text-align: right;
		padding: 15rpx;
		border-radius: 15rpx;
		background-color: $bg-gray-input-color;
	}

	.user-bottom-box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.user-green-bottom-btn {
		height: 42px;
		width: 90vw;
		line-height: 42px;
		margin-bottom: 20px;
		border-radius: 4px;
		background-color: rgba(255, 169, 0, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 16px;
		text-align: center;
		font-family: PingFangSC-semiBold;
	}


	.user-green-bottom-btn:active {
		background-color: rgba(255, 169, 0, 0.3);
		color: white;
	}
</style>