<template>

	<view class="comment" style="background-color: #FFFFFF;min-height: 5000rpx;">
		<cu-custom bgColor="bg-white " :isBack="true" style="border-bottom: #EEEEEE solid 1rpx;">
			<block slot="content">登录</block>
		</cu-custom>

		<view class="header_image_view">
			<image class="header_image_image" mode="widthFix" src="../../static/logo.png" />
			<view class="login_input_view flex align-center" style="margin-top: 133rpx;">
				<view class="flex align-center" style="flex: 1; ">
					<u-icon name="phone" size="30"></u-icon>
					<input class="login_input" type="number" maxlength="11" v-model="phone" placeholder="请输入手机号" />
				</view>
				<view class="login_code" @click="getCodeClick" v-if="!codeFlag">
					获取验证码
				</view>
				<view class="login_code color-99" v-if="codeFlag">
					剩余{{codeTime}}秒
				</view>
			</view>

			<view class="flex align-center login_input_view" style="margin-top: 65rpx;">
				<view class="flex align-center" style="flex: 1;">
					<u-icon name="phone" size="30"></u-icon>
					<input class="login_input" type="number" maxlength="6" v-model="code" placeholder="请输入您的验证码" />
				</view>
			</view>
			<button class="cu-btn bg-theme login_button" @click="loginClick">登录</button>

			<view class=" flex align-center" style="margin-left: 55rpx;margin-right: 10rpx;margin-top: 47rpx;">
				<radio :checked="agreementSlected" @click="agreementClick" color="#FC6035" style="transform:scale(0.7)">
				</radio>
				<view style="font-size: 24rpx;">
					<text style="margin-left: 10rpx;color: #333;">我已阅读并同意<text @click="gotoAgreement(1)"
							style="color: #FC6035;">《用户服务协议》<text style="color: #333;">和 <text @click="gotoAgreement(2)"
									style="color: #FC6035;">《隐私政策》</text></text></text>
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: "",
				code: "",
				agreementSlected: false,
				codeFlag: false,
				codeTime: 59

				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中

			}
		},
		onLoad() {},
		methods: {
			sendCode() {
				this.$u.api.getUserInfo(this.phone).then(res => {
					console.log(res)
					if (res.code === 200) {

					}
				})
			},
			agreementClick() {
				this.agreementSlected = !this.agreementSlected
			},
			gotoAgreement(e) {

			},
			getCodeClick() {
				if (!this.$u.test.mobile(String(this.phone))) {
					this.$api.msg("手机格式有误")
					return;
				}
				this.codeFlag = true
				const that = this
				//第二个参数是毫秒数
				let timer = setInterval(() => {
					//需要定时执行的代码
					that.codeTime--;
					// console.log(that.codeTime)
					if (that.codeTime == 0) {
						that.codeFlag = false
						clearInterval(timer)
					}
				}, 1000)
			},
			loginClick() {
				if (!this.$u.test.mobile(String(this.phone))) {
					this.$api.msg("手机格式有误")
					return;
				}
				if (this.code.isep)


					if (!this.$u.test.mobile(String(this.mobile))) {
						this.$api.msg("手机号格式不正确！")
					} else if (!this.$u.test.code(this.code, 6)) {
					this.$api.msg("验证码格式不正确！")

				} else {
					this.$u.api.login({
						mobile: this.mobile,
						code: this.code,
					}).then(res => {
						console.log(res, 'resresres')
						if (res.code == 200) {
							uni.setStorageSync("token", res.data.token)
							uni.setStorageSync("user", res.data.user)
							this.$api.msg("登录成功")
							uni.reLaunch({
								url: '../index/index'
							})
						}

					}).catch(error => {
						this.modelContent = '登录失败，请重试'
						this.showModel = true
					})
				}

				console.log(this.phone)
			}
		}
	}
</script>

<style lang="less" scoped>
	.header_image_view {
		margin-top: 100rpx;
		text-align: center;
	}

	.header_image_image {
		width: 150rpx;
	}

	.login_input_view {
		border-bottom: #CCCCCC solid 1rpx;
		padding-bottom: 10rpx;
		margin-left: 75rpx;
		margin-right: 75rpx;
	}

	.login_input {
		margin-left: 34rpx;
		font-size: 30rpx;
		text-align: left;
	}

	.login_code {
		color: #fff;
		background-color: #FC6035;
		padding: 0 20rpx;
		border: #FC6035 1rpx solid;
		padding: 10rpx 20rpx 10rpx 20rpx;
		border-radius: calc(1000rpx);
		font-size: 26rpx;
	}

	.login_button {
		border-radius: calc(1000rpx);
		width: 640rpx;
		border-width: 0;
		height: 98rpx;
		color: #FFFFFF;
		margin-top: 109rpx;
		font-size: 34rpx;
	}
</style>
