<script setup>
	// 安全中心
	import {
		ref,
		computed,
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util.js'
	// api
	import api from '@/api/index.js'

	/**
	 * 跳转
	 * @param {Object} url 跳转路径
	 */
	function link(url) {
		uni.navigateTo({
			url,
		})
	}

	// 账号注销
	function accountLogout() {
		util.alert({
			content: '确认注销账号？',
		}).then(rs => {
			if(!rs.confirm) return
			api.login.cancelAccount({}).then(rs => {
				if (rs.code == 200) {
					// 退出登录
					util.logout(() => {
						// #ifdef APP
						plus.runtime.restart()
						// #endif
					})
					return
				}
				util.alert({
					content: rs.msg,
					showCancel: false,
				})
			})
		})
	}
</script>

<template>
	<view class="app">
		<!-- 账号挂失 账号冻结 账号注销 -->
		<view class="container">
			<view class="line" @click="link('/pages/login/lostAccount')">
				<view class="title">账号挂失</view>
				<view class="content">申诉找回九亿账号</view>
			</view>

			<view class="line" @click="link('/pages/login/freezeAccount')">
				<view class="title">账号冻结</view>
				<view class="content">主动冻结账号保护账号资产</view>
			</view>

			<view class="line" @click="link('/pages/login/unfreezeAccount')">
				<view class="title">账号解冻</view>
				<view class="content">风险解除后，可选择解除冻结</view>
			</view>

			<view class="line" @click="accountLogout">
				<view class="title">账号注销</view>
				<view class="content">提交申请，清空当前账号</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	// 
	.container {
		.line {
			margin: 30rpx;
			padding: 30rpx 25rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.title {
				color: #333;
				font-size: 34rpx;
			}

			.content {
				margin-top: 10rpx;
				color: #999;
				font-size: 26rpx;
			}
		}
	}
</style>