<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/logo.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" ref="myForm">
				<u-form-item labelWidth="80px" label="真实姓名" prop="realName" borderBottom ref="item1">
					<u--input placeholder="请输入真实姓名" v-model="myInfoModel.realName" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="80px" label="手机号码" prop="phoneNumber" borderBottom ref="item1">
					<u--input placeholder="请输入手机号码" v-model="myInfoModel.phoneNumber" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="80px" label="用户账号" prop="username" borderBottom ref="item1">
					<u--input disabled placeholder="请输入用户账号 " v-model="myInfoModel.username" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="80px" label="邮箱地址" prop="email" borderBottom ref="item1">
					<u--input placeholder="请输入邮箱地址" v-model="myInfoModel.email" border="none"></u--input>
				</u-form-item>
				<u-form-item
					@click="
						showDate = true;
						hideKeyboard();
					"
					labelWidth="80px"
					label="有效期"
					prop="accountExpireTime"
					ref="item1"
				>
					<u--input v-model="myInfoModel.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.isThirdLoginAndNoDind && isJudgeBindBtn">
				<button class="submit" size="default" @click="clearAccountFunc" :style="{ background: InfoColor }"><text class="un-bind-text">解绑</text></button>
			</view>
			<view
				class="item"
				style="margin-right: 60rpx;"
				:style="[
					{ position: info.data.isThirdLoginAndNoDind && isJudgeBindBtn ? '' : 'relative' },
					{ right: info.data.isThirdLoginAndNoDind && isJudgeBindBtn ? '' : '-190rpx' }
				]"
			>
				<button class="submit" size="default" @click="onSubmitFunc" :style="{ background: PrimaryColor }"><text class="un-bind-text">确认</text></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 @click="showBind = false" class="main1"><text style="color: #3478f7">否</text></view>
				</view>
			</u-popup>
		</view>
		<!-- 解绑账号 -->
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import baseUrl from '@/config/baseUrl.js';
import { mapState } from 'vuex';

export default {
	data() {
		return {
			showBind: false,
			PrimaryColor: '#377DFF', //主题色
			InfoColor: '#00C9A7', //主题色
			myInfoModel: {
				realName: '',
				phoneNumber: '',
				username: '',
				email: '',
				accountExpireTime: ''
			},

			rules: {
				phoneNumber: [
					{
						required: true,
						message: '请输入正确的手机号码',
						trigger: 'change'
					},
					{
						pattern: /^1[3-9][0-9]{9}$/,
						message: '请输入正确的手机号码'
					}
				],
				email: [
					{
						required: true,
						message: '请输入正确的邮箱号',
						trigger: 'change'
					},
					{
						pattern: /^[0-9a-zA-Z]+@(([0-9a-zA-Z]+)[.])+[a-z]{3}$/,
						message: '请输入正确的邮箱号'
					}
				]
			},
			showDate: false,
			dateTime: Number(new Date()),
			avatar: '',
			id: '',
			info: {},
			openIds: '',
			isUpdatePersonOrLoginInfo: false,
			isJudgeBindBtn: true
		};
	},
	onReady() {
		this.$refs.myForm.setRules(this.rules);
	},
	onLoad(e) {
		console.log(e);
		if (e.data !== null) {
			let params = JSON.parse(e.data);
			this.info = params;
			this.myInfoModel.realName = params.data.realName;
			this.myInfoModel.phoneNumber = params.data.phoneNumber;
			this.myInfoModel.username = params.data.username;
			this.myInfoModel.email = params.data.email;
			this.myInfoModel.accountExpireTime = params.data.accountExpireTime;
			this.avatar = params.data.avatar == undefined ? '../../static/logo.png' : params.data.avatar;
			this.id = params.data.userId;
		}
	},
	onShow() {
		let getOpenId = getApp().globalData.openId;
		if (getOpenId) {
			this.openIds = getOpenId;
			console.log('OPenid', this.openIds);
		}
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		...mapMutations(['setUserInfo', 'emptyUserInfo']),
		confrimBind(e) {
			if (e) {
				//解绑
				let httpData = {
					appUserId: e.data?.userId,
					thirdUserId: e.data?.thirdUserId == null ? this.openIds : e.data?.thirdUserId
				};
				uni.$u.http.delete('/yt/third', httpData).then(res => {
					if (res) {
						uni.showToast({
							title: '解绑成功'
						});
						this.showBind = false;
						this.isJudgeBindBtn = false;
						uni.reLaunch({
							url: '/publicLoginSubPage/public/login'
						});
						this.emptyUserInfo();
					} else {
						uni.showToast({
							title: '解绑失败'
						});
						this.showBind = false;
					}
				});
			}
		},
		clearAccountFunc() {
			this.showBind = true;
		},
		// 修改头像
		async upAvatar() {
			let token;
			token = this.userInfo.isToken || uni.getStorageSync('userInfo').isToken || undefined;
			// #ifdef H5
			token = window.sessionStorage.getItem('userInfo').isToken;
			// #endif
			if (!token) return uni.$u.toast('请登录后上传图片');
			uni.chooseImage({
				count: 1,
				sourceType: ['camera', 'album'],
				success: res => {
					const tempFilePaths = res.tempFilePaths;
					//限制上传的图片大小不超过5M
					let resSize = res.tempFiles[0].size;
					if (resSize > 5242880) {
						uni.showToast({
							title: '上传的图片大小不能超过5M',
							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.uploadFile({
						url: `${baseUrl.baseUrl}/yt/oss/upload`,
						filePath: tempFilePaths[0],
						name: 'file',
						header: {
							'content-type': 'multipart/form-data',
							Authorization: 'Bearer ' + token
						},
						formData: {},
						success: res => {
							let objImage = JSON.parse(res.data);
							this.avatar = objImage.fileStaticUri;
							uni.$u.toast('头像上传成功');
						}
					});
				}
			});
		},
		onSubmitFunc() {
			let httpData = {
				avatar: this.avatar,
				email: this.myInfoModel.email,
				id: this.id,
				phoneNumber: this.myInfoModel.phoneNumber,
				realName: this.myInfoModel.realName
			};
			this.$refs.myForm
				.validate()
				.then(res => {
					uni.$u.http
						.put('/yt/user/center', httpData)
						.then(res => {
							if (res) {
								this.setUserInfo(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>
.userName {
	background-color: green;
}
@import './static/set.scss';

/deep/ .u-line {
	width: 662rpx !important;
}

/deep/ .u-form-item {
	height: 100rpx !important;
}

/deep/ .u-form-item:nth-child(3) {
	.u-form-item__body {
		background: #f5f7fa !important;
		width: 663rpx !important;
	}
}
</style>