<template>
	<view>
		<view style="width: 100%;height: 100%;">
			<view class="title" style="margin: 32rpx;">账户注销协议</view>
			<view class="content">
				<text class="text" :user-select="true">
					【特别说明】亲爱的用户，在您正式开始下一步账号注销流程前，我们先为您做出如下特别说明：注销账号后，您将无法再以此账号登录和使用一起教育科技（以下简称“我们”或者“一起教育科技”）的产品与服务以及产品及服务中与第三方合作的服务内容（以下简称为“产品与服务”），这同时也可能会给您的售后维权带来不便。且账号一旦注销完成，将无法恢复。请您在注销前慎重考虑。



					若您经过慎重考虑后仍执意决定注销账号的，请您务必先行仔细阅读和充分理解本《账号注销协议》，在同意全部内容、且在账号符合全部注销条件后，按照我们的注销操作指引点击进行下一步操作，您勾选本注销协议并点击下一步操作的，即视为您已经同意并签署和遵守本协议全部内容。如您在注销后需要再次使用我们的服务的，欢迎您使用手机号码或我们允许的其他方式重新注册。



					（如您执意决定注销账号的，请继续向下阅读）



					一、您知悉并同意：您的账号注销后，将（可能）产生包括但不限于如下结果需要您自行承担。
				</text>
			</view>
			<view style="position: fixed;bottom: 0;width: 100%;">
				<view class="divide_line"></view>
				<view class="bottom">
					<view class="bd1">
						<text class="text1" @click="giveUp">放弃注销</text>
					</view>
					<view class="bd2">
						<text class="text2" @click="getCode">同意注销</text>
					</view>
				</view>
			</view>
		</view>
		
		<u-overlay :show="showModal">
			<view class="modal" v-show="showModal">
				<image src="/static/img/my/delete.png" class="close" @click="closeModal"></image>
				<view class="text0" style="margin-top:64rpx">请输入验证码</view>
				<view class="text1" style="margin: 32rpx;">已发送至手机号：{{getPhone}}</view>
				<view style="margin: 32rpx auto;width:'200rpx'">
					<u-code-input :maxlength="4" v-model="currentCode" size="48" :focus="false" :dot="true" :width="76"
						@change="change" @finish="goNext"></u-code-input>
				</view>
				<view style="margin-top: 32rpx;">
					<u-code ref="uCode" @change="codeChange">
					</u-code>
					<view class="text2" @click="getCode">{{tips}}</view>
				</view>
			</view>
		</u-overlay>

	</view>
</template>

<script>
	import {
		replaceTextToStar
	} from '@/common/commonUtil.js'
	import {
		mapState,
		mapActions
	} from 'vuex'
	
	import {
		getSmsCodeApi,
		delAccountApi,
	} from '@/config/api.js';

	export default {
		data() {
			return {
				showModal: false,
				title_style: {
					"font-size": "34rpx",
					"font-family": "PingFangSC-Medium, PingFang SC",
					"font-weight": 500,
					"color": "#000000"
				},
				tips: '',
				currentCode: ""
			}
		},

		computed: {
			...mapState({
				// phone: (state) => state.vuex_user.phone,
				getPhone(state) {
					let phone = state.vuex_user.phone;
					return replaceTextToStar(phone);
				},
			}),
		},

		methods: {
			giveUp() {
				uni.navigateBack({
					delta: 2
				});
			},

			getCode() { //获取验证码
				this.showModal = true;
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})

					getSmsCodeApi({
						phone: this.vuex_phone
					}).then(data => {
						console.log(data)

						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();

					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},

			closeModal() {
				if (this.showModal) {
					this.showModal = false;
					this.$refs.uCode.reset();
					this.currentCode = "";
				}
			},

			change(e) {
				this.currentCode = e;
			},

			codeChange(text) {
				this.tips = text;
			},

			goNext(e) {
				console.log('输入结束，当前值为：' + e);

				delAccountApi({
					phone: this.vuex_phone,
					code: e,
				}).then(async data => {
					if (data && data.code == 200) {
						uni.showToast({
							title: '注销成功'
						});
						this.closeModal();
						
						await uni.$u.vuex('vuex_user', {});
						await uni.$u.vuex('vuex_token', {});
						await uni.setStorageSync('lifeData', {})
						
						this.$u.route({
							url: '/pages/main/my/freezing/freezing',
							type: 'reLaunch',
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 48rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #26292F;
		margin-top: 66rpx;
	}

	.content {
		width: 690rpx;
		padding: 12rpx 30rpx;
		margin-bottom: 180rpx;

		.text {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #26292F;
			line-height: 40rpx;
		}
	}

	.divide_line {
		width: 100%;
		height: 2rpx;
		border: 2rpx solid #F0F0F1;
	}

	.bottom {
		height: 144rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;

		.bd1 {
			height: 96rpx;
			border-radius: 8rpx;
			background-color: rgba(0, 0, 0, 0.03);
			margin: auto 30rpx;
			width: 30%;
			display: flex;
		}

		.bd2 {
			height: 96rpx;
			border-radius: 8rpx;
			background-color: rgba(12, 177, 122, 1);
			margin: auto 30rpx;
			width: 60%;
			display: flex;
		}

		.text1 {
			color: rgba(0, 0, 0, 0.45);
			font-size: 34rpx;
			font-family: PingFangSC-Medium;
			line-height: 48rpx;
			margin: auto;
		}

		.text2 {
			color: #ffff;
			font-size: 34rpx;
			line-height: 48rpx;
			margin: auto;
		}
	}

	.modal {
		width: 88%;
		position: relative;
		display: flex;
		flex-direction: column;
		margin: 200rpx auto;
		padding-bottom: 64rpx;
		border-radius: 12rpx;
		background-color: #fff;

		.close {
			width: 48rpx;
			height: 48rpx;
			padding: 12rpx;
			position: fixed;
			right: 40rpx;
		}

		.text0 {
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			text-align: center;
		}

		.text1 {
			font-size: 34rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
			text-align: center;
		}

		.text2 {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.5);
			line-height: 48rpx;
			text-align: center;
		}
	}
</style>