<template>
	<view class="set-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="u-flex set-main">
			<view class="main-image"><image class="image" :src="avatar"></image></view>
			<view class="main-right-image"><image class="image" src="../../static/arrow-right.png"></image></view>
		</view>
		<view class="u-m-t-20 basic-text"><text class="text">基本资料</text></view>
		<view class="basic-main">
			<u--form labelPosition="left" :model="myInfoModel" :rules="rules" ref="myInfoFormRef">
				<u-form-item labelWidth="80px" label="真实姓名" prop="userInfo.realName" borderBottom ref="item1">
					<u--input placeholder="请输入真实姓名" v-model="myInfoModel.userInfo.realName" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="80px" label="手机号码" prop="userInfo.phoneNumber" borderBottom ref="item1">
					<u--input placeholder="请输入手机号码" v-model="myInfoModel.userInfo.phoneNumber" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="80px" label="用户账号 " prop="userInfo.username" borderBottom ref="item1">
					<u--input placeholder="请输入用户账号 " v-model="myInfoModel.userInfo.username" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="80px" label="邮箱地址" prop="userInfo.email" borderBottom ref="item1">
					<u--input placeholder="请输入邮箱地址" v-model="myInfoModel.userInfo.email" border="none"></u--input>
				</u-form-item>
				<u-form-item
					@click="
						showDate = true;
						hideKeyboard();
					"
					labelWidth="80px"
					label="有效期"
					prop="userInfo.accountExpireTime"
					borderBottom
					ref="item1"
				>
					<u--input v-model="myInfoModel.userInfo.accountExpireTime" placeholder="请选择有效期" border="none"></u--input>
					<u-datetime-picker
						:formatter="formatter"
						:show="showDate"
						:value="datetime"
						mode="dateTime"
						closeOnClickOverlay
						@confirm="dateConfirm"
						@cancel="dateClose"
						@close="dateClose"
					></u-datetime-picker>
				</u-form-item>
			</u--form>
		</view>
		<view class="basic-bottom"><button class="submit" size="default" @click="onSubmitFunc" :style="{ background: PrimaryColor }">确认</button></view>
		<!-- #ifdef MP -->
		<view class="u-m-t-40"><text style="visibility: hidden;">#</text></view>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			PrimaryColor: '#0079fe', //主题色
			myInfoModel: {
				userInfo: {
					realName: '',
					phoneNumber: '',
					username: '',
					email: '',
					accountExpireTime: ''
				}
			},
			showDate: false,
			dateTime: Number(new Date()),
			avatar: '',
			id: '',
			rules: {
				'userInfo.realName': [
					{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.chinese(value);
						},
						message: '姓名必须为中文',
						trigger: ['change', 'blur']
					}
				],
				'userInfo.phoneNumber': [
					{
						type: 'string',
						required: true,
						message: '请填写手机号码',
						trigger: ['blur', 'change']
					},
					{
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机必须为数字',
						trigger: ['change', 'blur']
					}
				],
				'userInfo.email': [
					{
						type: 'string',
						required: true,
						message: '请填写邮箱',
						trigger: ['blur', 'change']
					},
					{
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							return uni.$u.test.email(value);
						},
						message: '邮箱必须带有@',
						trigger: ['change', 'blur']
					}
				]
			}
		};
	},
	onLoad(e) {
		if (e.data !== null) {
			let params = JSON.parse(e.data);
			this.myInfoModel.userInfo.realName = params.data.realName;
			this.myInfoModel.userInfo.phoneNumber = params.data.phoneNumber;
			this.myInfoModel.userInfo.username = params.data.username;
			this.myInfoModel.userInfo.email = params.data.email;
			this.myInfoModel.userInfo.accountExpireTime = params.data.accountExpireTime;
			this.avatar = params.data.avatar == undefined ? '../../static/avatar-test.png' : params.data.avatar;
			this.id = params.data.userId;
		}
	},
	methods: {
		onSubmitFunc() {
			this.$refs.myInfoFormRef
				.validate()
				.then(res => {
					let httpData = {
						avatar: this.avatar,
						email: this.myInfoModel.userInfo.email,
						id: this.id,
						phoneNumber: this.myInfoModel.userInfo.phoneNumber,
						realName: this.myInfoModel.userInfo.realName
					};
					uni.$u.http
						.put('/yt/user/center', httpData)
						.then(res => {
							if (res) {
								uni.showToast({
									title: '更新个人资料成功~',
									icon: 'none'
								});
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 500);
							}
						})
						.catch(e => {
							uni.$u.toast(e.data.message);
						});
				})
				.catch(errors => {
					uni.$u.toast('校验失败');
				});
		},
		dateClose() {
			this.showDate = false;
		},
		dateConfirm(e) {
			this.showDate = false;
			this.myInfoModel.userInfo.accountExpireTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
		},
		//格式化日期
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			}
			if (type === 'month') {
				return `${value}月`;
			}
			if (type === 'day') {
				return `${value}日`;
			}
			if (type === 'hour') {
				return `${value}时`;
			}
			if (type === 'minute') {
				return `${value}分`;
			}
			return value;
		},
		//隐藏输入框
		hideKeyboard() {
			uni.hideKeyboard();
		}
	}
};
</script>

<style lang="scss" scoped>
@import './static/set.scss';
</style>