<template>
	<view class="container">
		<page-title>账号管理</page-title>

		<view class="account-content">
			<view class="account-item" @click="goToPage('/pages/mine/change-account/index')">
				<view class="account-item-name">当前账号</view>
				<view class="account-item-content">{{accountNum || "--"}}</view>
				<!-- <u-icon name="arrow-right" color="#343437" size="14" customStyle="margin-left:20rpx"></u-icon> -->
			</view>
		</view>

		<view class="confirm-btn" @click="exitLogin()">
			退出登录
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	import {
		onLoad
	} from "@dcloudio/uni-app"

	import {
		getInfo,
		logout
	} from "@/api/login.js"

	function backToBefore() {
		uni.navigateBack({})
	};

	let userInfo = ref({})
	let accountNum = ref(null)

	function goToPage(url) {
		return
		uni.navigateTo({
			url
		})
	}

	function exitLogin() {
		uni.showModal({
			title: "退出确认",
			content: "确定要退出登录吗？",
			confirmColor: "#f00",
			success: function(res) {
				if (res.confirm) {
					logout().then(res => {
						if (res.code === 200) {
							// uni.clearStorage();
							uni.removeStorageSync('__DC_STAT_UUID');
							uni.removeStorageSync('storage_data');
							uni.removeStorageSync('App-Token');
							uni.reLaunch({
								url: '/pages/login/index'
							})
						}
					})
				}
			}
		})
	}

	onLoad(() => {
		getInfo().then(res => {
			userInfo.value = res.data.user;
			accountNum.value = res.data.user.loginName;
		})
	})
</script>

<style lang="scss" scoped>
	.account-content {
		position: absolute;
		top: 226rpx;
		left: 4%;
		width: 92%;
		height: 120rpx;
		padding: 19rpx 28rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 40rpx;
	}

	.account-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 80rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #9E9E9E;

		.account-item-name {
			flex: 2;
		}

		.account-item-content {
			flex: 6;
			text-align: right;
			font-size: 32rpx;
			color: #343437;
		}
	}

	.confirm-btn {
		position: absolute;
		top: 396rpx;
		left: 4%;
		width: 92%;
		height: 84rpx;
		line-height: 84rpx;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		background: #FF530F;
		border-radius: 16rpx;
	}
</style>