<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';
	import api from '@/api/index.js'

	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
					};
					api.loginApi.deleteBindApi(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(async res => {
						const resp = await api.loginApi.postPersonalInfoApi(httpData)
						if (res) {
							this.setUserInfo(resp);
							uni.showToast({
								title: '更新个人资料成功~',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 500);
						}
					})
					.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>