<template>
	<view class="set-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view @click="upAvatar" class="u-flex set-main">
			<view class="main-image"><image class="image" :src="avatar || '/static/default.png'"></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"
					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 u-flex">
			<view class="item" v-if="info.data.isToken"><button class="submit" size="default" @click="clearAccountFunc" :style="{ background: InfoColor }">解绑</button></view>
			<view class="item" style="margin-right: 60rpx;"><button class="submit" size="default" @click="onSubmitFunc" :style="{ background: PrimaryColor }">确认</button></view>
		</view>
		<!-- #ifdef MP -->
		<view class="u-m-t-40"><text style="visibility: hidden;">#</text></view>
		<!-- #endif -->
		<!-- 解绑账号 -->
		<view>
			<u-popup bgColor="transparent" :overlay="true" :show="showBind" mode="bottom">
				<view class="u-flex logout-main">
					<view class="main"><text style="color: #999999">是否需要解绑？</text></view>
					<view @click="confrimBind(info)" class="main"><text style="color: #f95e5a">是</text></view>
					<view class="main1"><text @click="showBind = false" style="color: #3478f7">否</text></view>
				</view>
			</u-popup>
		</view>
		<!-- 解绑账号 -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			showBind: false,
			PrimaryColor: '#377DFF', //主题色
			InfoColor: '#E3E4E5', //主题色
			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']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.email(value);
						},
						message: '邮箱必须带有@',
						trigger: ['change', 'blur']
					}
				]
			},
			info: {}
		};
	},
	onLoad(e) {
		if (e.data !== null) {
			let params = JSON.parse(e.data);
			this.info = params;
			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: {
		confrimBind(e) {
			if (e) {
				//解绑
				let httpData = {
					appUserId: e.data?.userId,
					thirdUserId: e.third?.thirdUserId
				};
				uni.$u.http.delete('/yt/third', httpData).then(res => {
					if (res) {
						uni.showToast({
							title: '解绑成功'
						});
						this.showBind = false;
					} else {
						uni.showToast({
							title: '解绑失败'
						});
						this.showBind = false;
					}
				});
			}
		},
		clearAccountFunc() {
			this.showBind = true;
		},
		// 修改头像
		upAvatar() {
			var that = this;
			uni.chooseImage({
				count: 1,
				sourceType: ['camera', 'album'],
				success: res => {
					const tempFilePaths = res.tempFilePaths;
					//限制上传的图片大小不超过2M
					let resSize = res.tempFiles[0].size;
					if (resSize > 2097152) {
						uni.showToast({
							title: '上传的图片大小不能超过2M',
							icon: 'none',
							duration: 2000,
							mask: true
						});
						return;
					}
					//获取图片扩展名
					const fileTxt = res.tempFilePaths[0].split('.').pop();
					const judgeType = fileTxt == 'jpg' || fileTxt == 'jpeg' || fileTxt == 'png';
					if (!judgeType) {
						uni.showToast({
							title: '请上传指定图片类型（jpg、jpeg、png）',
							icon: 'none',
							duration: 2000,
							mask: true
						});
						return;
					}
					uni.$u.http
						.upload('/yt/oss/upload', {
							filePath: tempFilePaths[0],
							name: 'file'
						})
						.then(res => {
							if (res) {
								that.avatar = res.fileStaticUri;
								return uni.$u.toast('头像上传成功');
							}
						});
				}
			});
		},
		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';
/deep/ .u-line {
	width: 662rpx !important;
}
/deep/ .u-form-item {
	height: 100rpx !important;
}
</style>