<template>
	<view class="whole">
		<view class="content">
			<view class="infobox">
				<view class="item">
					<text>头像</text>
					<view class="right" @click="editAvatar">
						<image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
						<up-icon name="arrow-right" color="#999" size="14" />
					</view>
				</view>
				<view class="item">
					<text>昵称</text>
					<view class="right">
						<input type="input" v-model="nickName" class="nickname" placeholder="请输入昵称" />
					</view>
				</view>
				
				<view class="item">
					<text>生日</text>
					<view class="right" @click="can_uplate ? openTime() : ''">
						<text>{{info.birthday}}</text>
						<up-icon name="arrow-right" color="#999" size="14" v-if="can_uplate" />
					</view>
				</view>
				
				<!-- <view class="item">
					<text>注销账户</text>
					<view class="right" @click="toLogOff()">
						<up-icon name="arrow-right" color="#999" size="14" />
					</view>
				</view> -->
				
			</view>
		</view>
		
		<view class="bottom">
			<view class="btn" @click="commitInfo()">确&nbsp;认</view>
		</view>
		
		<view class="out" @click="loginOut()">退出登录</view>
		
		<up-datetime-picker
			:show="showTime"
			v-model="currentDate"
			mode="date"
			:minDate="minDate"
			@confirm="chooseTimes"
			@cancel="showTime = false"
			@close="showTime = false"
			:confirmColor="Color"
			:closeOnClickOverlay="true">
		</up-datetime-picker>
			
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/Api/request.js'
	import { showToast, getUserInfo, getUserPhone } from '@/components/common.js'
	import dayjs from 'dayjs'
	
	export default {
		setup() {
			const data = reactive({
				info: {},
				nickName: '',
				avatarUrl: '',
				chooseImg: false,
				showTime: false,
				currentDate: '',
				is_default_avatar: uni.getStorageSync('is_default_avatar'),
				Color: uni.getStorageSync('theme_color'),
				minDate: new Date('1900-01-01').getTime(),
				can_uplate: false
			})
			
			function getInfo() {
				get('/api/v1/user/detail').then((res) => {
					data.info = res.data
					data.nickName = res.data.nickname
					data.avatarUrl = res.data.avatar
					data.can_uplate = res.data.birthday ? false : true
				})
			}
			
			function editAvatar() {
				uni.chooseImage({
					success(res) {
						const tempFilePaths = res.tempFilePaths
						uni.showLoading({
							title: '正在上传...',
							mask: true
						})
						uni.uploadFile({
							url: '/api/v1/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								Authorization: uni.getStorageSync('token') || '',
								accept: 'application/json',
								appid: uni.getStorageSync('appId')
							},
							success(req) {
								let img = JSON.parse(req.data).data
								data.avatarUrl = img.link
								uni.hideLoading()
							},
							fail() {
								uni.hideLoading()
							}
						})
					},
					fail() {
					}
				})
			}
			
			function commitInfo() {
				if(!data.nickName) {
					showToast('请输入您的昵称')
					return
				}
				if(data.avatarUrl) {
					uni.showLoading({
						mask: true,
						title: '正在保存'
					})
					// 如果不是默认图片则直接提交
					if(!data.is_default_avatar) {
						post('/api/v1/user', { nickname: data.nickName, avatar: data.avatarUrl }, 'PUT').then( res => {
							uni.hideLoading()
							wx.showToast({
								title: '已保存',
								icon: 'success',
								duration: 1000,
								mask: true,
								success() {
									uni.setStorageSync('nickname', data.nickName)
									uni.setStorageSync('avatar', data.avatarUrl)
									uni.setStorageSync('is_authorized', 1)
									uni.setStorageSync('is_default_avatar', false)
									setTimeout(() => {
										wx.navigateBack({ delta: 1 })
									}, 1000)
								}
							})
						})
					} else {
						wx.uploadFile({
							url: '/api/v1/upload',
							filePath: data.avatarUrl,
							name: 'file',
							header: {
								Authorization: uni.getStorageSync('token') || '',
								accept: 'application/json',
								appid: uni.getStorageSync('appId')
							},
							success(res) {
								let url = JSON.parse(res.data).data.link
								post('/api/v1/user', { nickname: data.nickName, avatar: url }, 'PUT').then( res => {
									uni.hideLoading()
									wx.showToast({
										title: '已保存',
										icon: 'success',
										duration: 1000,
										mask: true,
										success() {
											uni.setStorageSync('nickname', data.nickName)
											uni.setStorageSync('avatar', url)
											uni.setStorageSync('is_authorized', 1)
											uni.setStorageSync('is_default_avatar', false)
											setTimeout(() => {
												wx.navigateBack({ delta: 1 })
											}, 1000)
										}
									})
								}).catch((error) => {
									uni.hideLoading()
								})
							},
							fail(error) {
								uni.hideLoading()
								showToast('头像上传失败')
							}
						})
					}
				} else {
					showToast('请上传您的头像')
				}		
			}
			
			const openTime = () => {
				data.currentDate = data.info.birthday ? Date.parse(new Date(data.info.birthday)) : Date.parse(new Date())
				data.showTime = true
			}
			
			const chooseTimes = (e) => {
				data.info.birthday = dayjs(e.value).format('YYYY-MM-DD')
				data.showTime = false
			}
			
			async function getPhoneNumber(e) {
				if(e.detail.errMsg == 'getPhoneNumber:ok') {
					await getUserPhone(e.detail).then((res) => {
						const reg = /^(\d{3})(\d{4})(\d{4})$/
						data.info.mobile = res.data.mobile.replace(reg, "$1****$3")
					})
				}	
			}
			
			function loginOut() {
				uni.removeStorageSync('token')
				uni.removeStorageSync('saveTime')
				uni.removeStorageSync('expires_in')
				uni.removeStorageSync('login_type')
				uni.removeStorageSync('unionid_open')
				uni.removeStorageSync('msgNum')
				uni.removeStorageSync('cartNum')
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
			
			function toLogOff() {
				uni.showModal({
					title: '提示',
					content: '确定要注销当前账户吗？',
					confirmColor: '#42b983',
					success(res) {
						if (res.confirm) {
							uni.removeStorageSync('token')
							uni.removeStorageSync('saveTime')
							uni.removeStorageSync('expires_in')
							uni.removeStorageSync('login_type')
							uni.removeStorageSync('unionid_open')
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}
				})
			}
			
			return {
				...toRefs(data),
				commitInfo,
				editAvatar,
				openTime,
				chooseTimes,
				getPhoneNumber,
				getInfo,
				loginOut,
				toLogOff
			}
		},
		async onLoad(options) {
			this.nickName = uni.getStorageSync('nickname')
			this.avatarUrl = uni.getStorageSync('avatar')
			this.getInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		width: 100%;
		height: 100vh;
		background: #fff;
		.content{
			position: relative;
			.dialog{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
			}
		}
		.infobox{
			padding: 0 30rpx;
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;
				text{
					font-size: 28rpx;
					color: #333;
				}
				.right{
					display: flex;
					align-items: center;
					width: 50%;
					justify-content: flex-end;
				}
				.avatar{
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
					border-radius: 5px;
				}
				.nickname{
					width: 300rpx;
					font-size: 28rpx;
					color: #333;
					text-align: right;
					&.center{
						padding-right: 20rpx;
					}
				}
				.avatar-wrapper{
					line-height: normal;
					height: 80rpx;
					display: flex;
					align-items: center;
				}
			}
		}
	}
	.bottom{
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 100rpx;
		.btn{
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			width: 100%;
			color: #fff;
			border-radius: 80rpx;
			background: v-bind('Color');
		}
	}
	.out{
		background-color: #fff;
		height: 80rpx;
		color: #333;
		font-size: 28rpx;
		text-align: center;
		line-height: 80rpx;
		border-top: 20rpx solid #f5f5f5;
		border-bottom: 20rpx solid #f5f5f5;
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
	}
</style>
