<template>
	<view class="contentBg maincontent">
		<view class="main">
			<view class="center">
				<image class="img" src="/static/images/common/uploadErr.png" mode="aspectFit"></image>
			</view>
			<view class="txt" style="margin-top: 30rpx;">
				注销账号后账号将永久失效且不可恢复,
			</view>
			<view class="txt">
				并将放弃以下所有权益与服务
			</view>
		</view>
		<view class="ul">
			<view class="li">1.账号将无法登陆</view>
			<view class="li">2.设备数据全部清除</view>
			<view class="li">3.个人资料等内容全部失效</view>
		</view>
		<view class="footerBtn" @click="showlogOff">
			确认注销
		</view>
		
		<CustomPopup :show="showPopupFlag" :title="popupTitle" :message="popupMessage"
			:icon="ico" :confirm-text="popupConfirmText" :show-cancel="true"
			@confirm="onPopupConfirm" 
			@cancel="onCancel"
			:popupBorder="popupBorder" :titleColor="titleColor" :messageColor="messageColor" :confirmBtnBg="confirmBtnBg" 
			:confirmBtnColor="confirmBtnColor"/>
			
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				showPopupFlag:false,
				popupTitle:'',
				popupMessage:'',
				ico:'',
				popupConfirmText:'',
				popupBorder:'',
				titleColor:'',
				messageColor:'',
				confirmBtnBg:'',
				confirmBtnColor:'#FFFFFF',
				okCallback:null,
				cancel:null
			}
		},
		methods: {
			onCancel(){
				this.showPopupFlag=false;
				if(this.cancel){
					this.cancel();
				}
			},
			onPopupConfirm(){
				this.showPopupFlag=false;
				if(this.okCallback){
					this.okCallback();
				}
			},
			logOff(){
				let task=()=>{
					return new Promise((resolve,reject)=>{
						//假装注销
						setTimeout(()=>{
							resolve();
						},500)
						
					});
				}
				
				let logOut=()=>{
					let phone=uni.getStorageSync('phone');
					uni.clearStorageSync();
					uni.setStorageSync("logOutPhone",phone)
					uni.reLaunch({
						url:'/pages/common/login/index'
					})
				}
				task().then(res=>{
					this.confirm('','您的账号已注销。',logOut,{color:'#AED600',
					okTxtColor:'#000000',
					ico:'/static/images/common/success.png',
					popupBorder:'1px solid rgba(174, 214, 0, 0.3)'},logOut);
				});
				
			},
			showlogOff(){
				this.confirm('','注销后不可恢复,您确认吗?',this.logOff);
			},
			confirm(title,msg,okCallback,style,cancel){
				if(!style){
					style={
						color:'#E03434',
						okTxtColor:'#FFFFFF',
						ico:'/static/images/6155/DeviceDetail/warnning.png',
						popupBorder:'1px solid rgba(224, 52, 52, 0.3)'
					}
				}
				this.showPopupFlag=true;
				this.popupTitle=title;
				this.popupMessage=msg;
				this.ico=style.ico?style.ico:'';
				this.popupConfirmText='确认';
				this.popupBorder=style.popupBorder;
				this.titleColor=style.color?style.color:'#E03434';
				this.messageColor=style.color?style.color:'#E03434';
				this.confirmBtnBg=style.color?style.color:'#E03434'
				this.confirmBtnColor=style.okTxtColor?style.okTxtColor:'#FFFFFF';
				this.okCallback=okCallback;
				this.cancel=cancel;
			},
			
		}
	}
</script>

<style>
	.footerBtn{
		width:calc(100% - 60rpx);
		height: 90rpx;
		left: 30rpx;
		bottom: 96rpx;
		position: fixed;
		z-index: 1;
		border-radius: 90rpx;
		background: rgba(224, 52, 52, 1);
		color: rgba(255, 255, 255, 0.87);
		
		font-family: PingFang SC;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 90rpx;
		letter-spacing: 0px;
		text-align: center;
	}
	.ul{
		width: calc(100% - 120rpx);
		height: auto;
		border-radius: 8px;
		background: #1a1a1a;
		color: rgba(255, 255, 255, 0.6);
		box-sizing: border-box;
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 50rpx;
		letter-spacing: 0.14rpx;
		text-align: left;
		padding: 20rpx;
		margin-left: 60rpx;
	}
	.txt{
		text-align: center;
		
		color: #FFFFFF;
		
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		letter-spacing: 0.14rpx;
		white-space: nowrap;
	}
	.img{
		width:95rpx;
		height: 95rpx;
	}
.main{
	width: 100%;
	height: auto;
	
	box-sizing: border-box;
	padding:100rpx 100rpx 40rpx 100rpx ;
	margin-bottom: 36rpx;
}
</style>
