<template>
	<view class="content">
		<form @submit="onSubmit">
			<view class="hg24"></view>
			<view class="box-pack-between item bgf flex-y-center">
				<text>手机号</text>
				<view class="tr">
					<input placeholder-class="placeholder-class" disabled  name="tel" @input="phoneInput" type="number" :value="phoneData"
					 placeholder="请输入手机号" maxlength="11" />
				</view>
			</view>

			<block>
				<view class="box-pack-between item bgf flex-y-center">
					<text>验证码</text>
					<view class="tr flex-y-center">
						<input placeholder-class="placeholder-class" name="code" type="number" placeholder="请输入短信验证码" />
						<view class="method-line"></view>
						<text class="get-code" v-if="sendNum==1">{{sendMg}}</text>
						<text class="get-code" v-else @click="getVerCode">{{sendMg}}</text>
					</view>
				</view>
			</block>

			<view class="hg24"></view>

			<view class="box-pack-between item bgf flex-y-center">
				<text>设置新密码</text>
				<view class="tr">
					<input placeholder-class="placeholder-class" type="text" name="pass" value="" placeholder="6到16位的数字或字母"
					 maxlength="16" />
				</view>
			</view>

			<view class="box-pack-between item bgf flex-y-center">
				<text>确认新密码</text>
				<view class="tr">
					<input placeholder-class="placeholder-class" type="text" name="repass" value="" placeholder="请再次输入新密码" maxlength="16" />
				</view>
			</view>

			<view class="bottom-bar">
				<button class="login-btn flex-center" formType="submit">确定</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneData: "", //电话
				verCode: "", //验证码
				sendMg: '获取验证码',
				time: 60,
				sendNum: 0,
				is_code: null,
			}
		},

		components: {

		},

		onLoad(e) { 
			this.phoneData=e.tel;
		},

		onShareAppMessage(e) {

		},

		methods: {
			phoneInput(e) {
				this.phoneData = e.detail.value;
			},
			//获取验证码
			getVerCode() {
				if (this.phoneData.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				this.request({
					url: "user/sendcode",
					data: {
						tel: this.phoneData,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						let tim = setInterval(() => {
							this.time = parseInt(this.time) - 1;
							this.sendMg = "剩余" + this.time + "S";
							this.sendNum = 1;
							if (this.time <= 0) {
								this.sendMg = "获取验证码";
								this.sendNum = 0;
								clearInterval(tim);
								this.time = 10;
							}
						}, 1000);
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					})
				});
			},

			onSubmit(e) {
				let data = e.detail.value;
				data.token=uni.getStorageSync("token");
				data.type=1;
				this.request({
					url: "user/edit_pass",
					data,
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						uni.showToast({
							title: "设置成功",
							icon: 'none',
							duration: 2000
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)

					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					})
				});
			},
			
			
		}
	}
</script>

<style lang="scss">
	.hg24 {
		height: 24rpx;
	}

	.item {
		width: 100%;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		font-size: 16px;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		padding: 0 30rpx;
	}

	.get-code {
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #3387FF;
		opacity: 1;
	}


	.login-btn {
		width: 630rpx;
		height: 90rpx;
		background: linear-gradient(132deg, #3387FF 0%, #3387FF 100%);
		box-shadow: 0px 2rpx 12rpx #3387FF;
		opacity: 1;
		border-radius: 45rpx;
		margin: 0 auto;
		color: #FFFFFF;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		opacity: 1;
	}

	.bottom-bar {
		position: fixed;
		bottom: 30px;
		left: 0;
		width: 100%;
		z-index: 1000;
	}
	.tr{
		text-align: right;
	}/* 分割线 */
.method-line {
	width: 2rpx;
	height: 20rpx;
	background: rgba(159, 159, 159, 1);
	opacity: 1;
	border-radius: 1rpx;
	margin: 0 40rpx;
}

</style>
