<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">
				<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 disabled 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.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: {
				userInfo: {
					realName: '',
					phoneNumber: '',
					username: '',
					email: '',
					accountExpireTime: ''
				}
			},
			showDate: false,
			dateTime: Number(new Date()),
			avatar: '',
			id: '',
			info: {},
			openIds: '',
			isUpdatePersonOrLoginInfo: false,
			isJudgeBindBtn: true
		};
	},
	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/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']),
		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;
					} 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;
					//限制上传的图片大小不超过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.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.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) {
						this.setUserInfo(res);
						uni.showToast({
							title: '更新个人资料成功~',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 500);
					}
				})
				.catch(e => {
					uni.$u.toast(e.data.message);
				});
		},
		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;
}
/deep/ .u-form-item:nth-child(3) {
	.u-form-item__body {
		background: #f5f7fa !important;
		width: 663rpx !important ;
	}
}
</style>