<template>
	<view class="change-phone-body">
		<view class="nothing" style="height: 200rpx;"></view>
		<jl-input type="text" v-model="password" placeholder="请输入登录密码" showPassword clearable></jl-input>
		<jl-input type="number" v-model="phone" placeholder="请输入新手机号"></jl-input>
		<jl-input type="text" v-model="sms" placeholder="请输入验证码">
			<view v-if="isMobile(phone) && password" class="code" @click="getCode">{{ code }}</view>
			<view v-else class="code nocheck">{{ code }}</view>
		</jl-input>
		<view class="btn nocheck" v-if='loading'>
			正在变更...
		</view>
		<view class="btn" v-else-if='sms && isMobile(phone) && password' @click="submit">
			确认变更
		</view>
		<view class="btn nocheck" v-else>
			确认变更
		</view>
	</view>
</template>

<script>
	import {
		changePhone,
		sendValidate
	} from '@/api/changePhone.js'
	import {
		isMobile
	} from '@/untils/validate.js'
	import jlInput from '@/components/jl-input/main.vue'
	import md5 from 'js-md5'

	const resendTime = 120
	export default {
		components: {
			jlInput
		},
		data() {
			return {
				loading: false,
				pastype: 'text',
				code: '获取验证码',
				password: '',
				phone: '',
				sms: ''
			}
		},
		methods: {
			changePasType: function() {
				var pastype = this.pastype;
				if (pastype == 'password') {
					this.pastype = 'text';
				} else {
					this.pastype = 'password'
				}
			},
			delpho: function(e) {
				this.phone = '';
			},
			delpas: function(e) {
				this.password = '';
			},
			setsms: function(e) {
				this.sms = e.detail.value
			},
			setpho: function(e) {
				this.phone = e.detail.value
			},
			setpas: function(e) {
				this.password = e.detail.value
			},
			getCode: function() {
				var code = this.code;
				if (code != '获取验证码' && code != '重新发送') {
					return;
				}
				this.code = '发送中...'
				sendValidate(this.phone, md5(this.password)).then(() => {
					let sendCode = setInterval(() => {
						if (code == '获取验证码' || code == '重新发送') {
							code = resendTime;
						}
						code--;
						var codes = '重新发送(' + code + 's)';
						this.code = codes;
						if (code <= 0) {
							code = '重新发送';
							this.code = code;
							clearInterval(sendCode);
							return;
						}
					}, 1000)
				}).catch(() => {
					this.code = '重新发送';
				})
			},
			isMobile,
			submit() {
				this.loading = true
				changePhone(this.phone, md5(this.password), this.sms).then(() => {
					this.loading = false
					this.$store.dispatch('LogOut').then(() => {
						this.$store.dispatch('clearAuthState')
						this.$store.dispatch('endRefreshNewsTimer')
						uni.reLaunch({
							url: '/pages/login/login'
						})
					})
				}).catch(() => {
					this.loading = false
				})
			}
		},
		computed: {}
	}
</script>

<style>
	.phoneDel {
		margin-left: auto !important;
	}

	.nocheck {
		opacity: 0.3;
	}

	.btn {
		margin: 0 auto;
		margin-top: 50rpx;
		background-color: #1B66FF;
		color: #fefefe;
		border-radius: 10rpx;
		text-align: center;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.code {
		margin-left: auto;
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #1b66ff;
		text-align: center;
	}

	page {
		background-color: #fefefe;
	}

	.change-phone-body {
		width: 80%;
		margin: 0 auto;
	}
</style>
