<template>
	<view class="page-container">
		<view class="user-info-box">
			<view class="card">
				<!-- <view class="user-avatar">
          <image :src="user.user_portrait || '/static/avatar/noavatar.png'" @click="avatar" />
          <view class="user-avatar-button" @click="avatar">
            <text>更换头像</text>
            <uni-icons type="forward" color="#a2a2a2" size="16"></uni-icons>
          </view>
        </view> -->
				<view class="nav-item">
					<text class="nav-title">头像</text>
					<image :src="user.user_portrait || '/static/avatar/noavatar.png'" @click="avatar" />
					<uni-icons type="forward" color="#a2a2a2" size="14"></uni-icons>
				</view>
				<view class="nav-item" @click="nickname">
					<text class="nav-title">昵称</text>
					<text class="nav-value">{{user.user_nick_name}}</text>
					<uni-icons type="forward" color="#a2a2a2" size="14"></uni-icons>
				</view>
				<view class="nav-item">
					<text class="nav-title">性别</text>
					<view class="nav-radio">
						<text class="nav-radio-item" :class="user.user_sex == 1 && 'selected'"
							@click="changeSex(1)">男</text>
						<text class="nav-radio-item" :class="user.user_sex == 2 && 'selected'"
							@click="changeSex(2)">女</text>
					</view>
				</view>
				<view class="nav-item" v-if="user.user_phone">
					<text class="nav-title">绑定手机</text>
					<text class="nav-value">{{user.user_phone}}</text>
				</view>
				<view class="nav-item" v-if="user.user_email">
					<text class="nav-title">绑定邮箱</text>
					<text class="" style="color: #eee;">{{user.user_email}}</text>
				</view>
				<navigator url="/pages/user/password" class="nav-item">
					<text class="nav-title">修改密码</text>
					<uni-icons type="forward" color="#a2a2a2" size="14"></uni-icons>
				</navigator>
			</view>
		</view>
		<button type="default" class="user-logout-button" @click="descShow=true">注销账号</button>
		<button type="default" class="user-logout-button" @click="logout">退出登录</button>
		<u-popup :show="descShow" mode="center" bgColor="transparent" :custom-style="{width: '90%', maxWidth: '300px'}">
			<view class="desc-popup">
				<view class="">
					<uni-icons type="closeempty" size="20" @click="descShow=false"></uni-icons>
				</view>
				<scroll-view style="height:600rpx;" scroll-y refresher-enabled="true" refresher-background="none"
					:refresher-threshold="100">
					<text>
						<view>
							账号注销协议
						</view>
						在您申请注销红桃视频APP账号之前，请您仔细阅读并同意本《账号注销协议》。
		
						红桃视频APP在此善意提醒您，注销账号为不可恢复的操作，账号注销后您将无法再使用该账号或找回您上传、浏览、关注、收藏的任何内容或信息（即使您使用相同的手机号码再次注册并使用红桃视频APP）。
		
						建议您在注销前自行备份注销账号的相关信息，并请确认与该账号相关的所有服务均已进行妥善处理。注销成功后，我们将按照《红桃视频APP服务隐私政策》相关条款删除您的个人信息，或对其进行匿名化处理。请您知悉并理解，根据相关法律法规规定红桃视频APP将保留该账号的相关网络日志记录不少于6个月的时间；您在会员购的交易记录将保留不少于3年的时间（如有）。
		
						一、非常遗憾我们无法继续为您提供服务。如您仍选择继续注销账号，则该账号内的虚拟权益等财产性利益（包括但不限于以下权益）视为您自动放弃，将无法继续使用。您理解并同意，红桃视频APP无法协助您重新恢复上述服务。
		
		
		
						1．您将解除该账号与其他产品（第三方平台）的绑定或授权登录关系；
		
						2．该账号的全部个人资料和历史信息（包括但不限于头像、用户名、发布内容、浏览记录、关注、收藏等）将无法找回；
		
						3．该账号的粉丝将无法通过账号找到您；
		
		
						二、为了帮助您完成账号注销，您进一步向红桃视频APP声明与保证：
		
						1．该账号系通过官方渠道注册且为您本人的账号；
		
						2．该账号内无未处理完毕的交易；
		
						3．该账号与红桃视频APP所有业务均不存在合约关系或尚在合约期内（如签约主播等）
		
						三、在您的账号注销期间，如果您的账号涉及争议纠纷，包括但不限于投诉、举报、诉讼、仲裁、国家有权机关调查等，您知晓并理解，红桃视频APP有权自行决定是否终止本账号的注销而无需另行得到您的同意。
		
						四、您注销本红桃视频APP账号并不代表注销前该账号中的行为和相关责任得到减轻或豁免。
					</text>
				</scroll-view>
				<button type="default" class="user-logout-button" style="color: red;" @click="logout1">确定注销</button>
			</view>
		</u-popup>
		<change-avatar ref="avatar" :user="user" @change="changeAvatar" />
		<change-nickname ref="nickname" :value="user.user_nick_name" @change="changeNickname" />
		<u-toast ref="toast"></u-toast>
	</view>
</template>

<script>
	import changeAvatar from '@/components/change-avatar'
	import changeNickname from '@/components/change-nickname'
	import {
		user
	} from '@/utils/api'

	export default {
		components: {
			changeAvatar,
			changeNickname
		},
		data() {
			return {
				user: {},
				descShow: false
			}
		},
		async onLoad() {
			await this.$onLaunched
			const token = getApp().globalData.userToken
			if (!token) {
				uni.redirectTo({
					url: '/pages/user/login'
				})
			} else {
				this.getInfo()
			}
		},
		methods: {
			async getInfo() {
				const res = await user.info().then(res)
				if (res.code == 1) {
					this.user = res.data.user
				}
			},
			logout1() {
				uni.removeStorage({
					key: 'user_token',
					success: () => {
						getApp().globalData.share.code = ''
						getApp().globalData.userToken = ''
						uni.setStorageSync('avatar','')
						this.descShow = false
			
						uni.showToast({
							icon: 'none',
							title: '提交注销后，5天内仍然有效，5天后再正式删除。',
							duration: 3000
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/user/index'
							})
						}, 1500)
					}
				})
			},
			avatar() {
				this.$refs.avatar.show = true
			},
			nickname() {
				this.$refs.nickname.show = true
			},
			changeAvatar(value) {
				uni.showLoading({
					title: '正在保存',
					mask: true
				})
				user.change('portrait', value).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 3000
					})
					if (res.code === 1) {
						this.user.user_portrait = '/static/avatar/'+ value
					}
				}).catch(e => {})
			},
			async changeNickname(value) {
				await user.change('nick_name', value).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 3000
					})
					if (res.code === 1) {
						this.user.user_nick_name = value
						this.$refs.nickname.show = false
					}
				}).catch(e => {})
				this.$refs.nickname.loading = false
			},
			changeSex(value) {
				uni.showLoading({
					title: '正在保存',
					mask: true
				})
				user.change('sex', value).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 3000
					})
					if (res.code === 1) {
						this.user.user_sex = value
					}
				}).catch(e => {})
			},
			logout() {
				uni.showModal({
					title: '退出当前账号',
					content: '确认退出当前账号？',
					success: res => {
						if (res.confirm) {
							uni.removeStorage({
								key: 'user_token',
								success: () => {
									getApp().globalData.share.code = ''
									getApp().globalData.userToken = ''
									uni.showToast({
										icon: 'none',
										title: '退出成功~!',
										duration: 3000
									})
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/user/index'
										})
									}, 1500)
								}
							})
						} 
					},
				});
				
			}
		}
	}
</script>

<style lang="scss">
	.page-container {
		padding: 15px 0;
background-color: $uni-bg-color;
		.user-info-box {
      .card {
        background-color: #111022;
      }
			.user-avatar {
				padding: 30px 0;
				display: flex;
				flex-direction: column;
				align-items: center;

				uni-image {
					width: 60px;
					height: 60px;
					border-radius: 50%;
				}

				.user-avatar-button {
					margin-top: 8px;
					font-size: 15px;
					font-weight: 400;
					color: #1a1a2a;

					.uniui-forward {
						margin-left: 4px;
					}
				}
			}

			.nav-item {
				width: 100%;
				padding: 14px 15px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #1d1c2d;

				&:last-child {
					border: none;
				}

				uni-image {
					width: 30px;
					height: 30px;
					border-radius: 5px;
				}

				.nav-title {
					flex: 1 1 0%;
					color: #fff;
					font-size: 15px;
				}

				.nav-value {
					max-width: 140px;
					margin-left: 10px;
					color: #8a8a8a;
					font-size: 15px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.nav-radio {
					.nav-radio-item {
						margin-left: 10px;
						width: 32px;
						height: 24px;
						border-radius: 5px;
						font-size: 15px;
						font-weight: 400;
						color: #222231;
						background-color: #f2f5fa;
						text-align: center;
						display: inline-block;

						&.selected {
							background-color: $uni-color-primary;
							color: #fff;
						}
					}
				}

				.uniui-forward {
					margin-left: 10px;
				}
			}
		}
		.desc-popup {
			background-color: #fff;
			padding: 10px;
			border-radius: 10px;
		
			uni-scroll-view {
				text-align: center;
			}
		}
		.user-logout-button {
			position: absolute;
			bottom: 100px;
			width: 300px;
			left: 13%;
			height: 50px;
			line-height: 50px;
			background: linear-gradient(90deg, #DA2538 0%, #F75F68 100%);
			border-radius: 24px;
			color: #FFF;
		}
	}
</style>