<template>
	<view class="page" :style="{backgroundImage:`url(${bgImg1})`}">
		<view class="logo">
			<image src="" mode=""></image>
		</view>
		<!-- 填写区 -->
		<view class="input-info">
			<view class="info">
				<view class="info-icon">
					<image src="../../static/login3.png"></image>
				</view>
				<input type="tel" maxlength="11" v-model="form.phone" :placeholder="isLoginWay?'请输入账号':'请输入您的手机号'">
				<view class="more"></view>
			</view>
			<view class="info" :style="isLoginWay?'display: none':''">
				<view class="info-icon">
					<image src="../../static/login4.png"></image>
				</view>
				<input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码">
				<view class="more">
					<text class="mo" v-if="!isTrue" @click="sendCode">获取验证码</text>
					<text class="mo" v-else>{{num}}秒后重试</text>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn-info">
			<view class="btn" @click="register">
				<text>登录</text>
			</view>
		</view>

		<view class="check-box" style="margin-top: 80rpx;">
			<view class="check" @click="change">
				<text class="iconfont icon-checked " :class="ischange?'action':''"></text>
			</view>
			<view style="margin-left: 10rpx;">
				<text @click="change">我已阅读并同意</text><text style="color:#89ACFF;" @click="giNav(1)">《魔唇用户协议》</text>和<text
					style="color:#89ACFF;" @click="giNav(2)">《魔唇隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
	// import bgImg1 from "../../static/loginbg.png";
	// import service from '@/service/service.js'
	// import md5 from '@/service/md5.js'
	export default {
		data() {
			return {
				bgImg1: bgImg1,
				isLogin: false,
				isLoginWay: false,
				isPassword: false,
				// 表单
				form: {
					phone: '',
					code: '',
					password: '',
					cid: ''
				},
				ischange: false,
				isTrue: false,
				num: 60,
				time: null,
				// cid
				push_clientid: ''
			};
		},
		onShow() {

		},
		methods: {
			giNav(type) {
				uni.navigateTo({
					url: '/pages/my/user?type=' + type
				})
			},
			register() {
				// if (!this.ischange) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请确认勾选用户协议及隐私协议'
				// 	})
				// 	return
				// }
				// if (this.form.phone == '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请输入账号'
				// 	})
				// 	return
				// }
				// if (this.form.password == '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请输入密码'
				// 	})
				// 	return
				// }
				const data = {
					username:'18121815598',
					 code:'847213'
				}
				this.$http.sendRequest('/business/login', 'POST', data, 2).then(res => {
					if (res.data.code == '') {
						uni.setStorageSync('token', res.data.data.token);
						uni.setStorageSync('shopId', res.data.data.shopId);
						uni.switchTab({
							url: '/pages/home/home'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.message
						})
					}



				})

			},
			change() {
				this.ischange = !this.ischange
			},
			/**
			 * 登录切换
			 */
			onLoginCut() {
				// this.form.phone = ''
				this.isLoginWay = !this.isLoginWay;
				// 验证码
				if (this.isLoginWay) {
					this.isLogin = this.form.code && this.form.phone ? true : false;
				}
				// 账号密码
				if (!this.isLoginWay) {
					this.isLogin = this.form.password && this.form.phone ? true : false;
				}
			},
			/**
			 * 获取验证码
			 */
			sendCode() {
				// console.error(this.form)
				// if (!this.form.phone) {
				// 	uni.showToast({
				// 		title: '请填写手机号',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.$http.sendRequest('/business/verification', 'POST', {
					phone: '18121815598'
				}).then(res => {
					console.log('获取验证码', res)
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '发送成功'
						})
						if (this.num > 0) {
							this.isTrue = true
							this.time = setInterval(() => {
								this.num--
							}, 1000)
						} else {
							this.isTrue = false
							clearInterval(this.time)
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: '请稍等再试'
						})
					}

				})

			},


			/**
			 * 登录点击
			 */
			onLogin() {}
		},
		watch: {
			form: {
				handler(newValue, oldValue) {
					// 验证码
					if (this.isLoginWay) {
						this.isLogin = newValue.code && newValue.phone ? true : false;
					}
					// 账号密码
					if (!this.isLoginWay) {
						this.isLogin = newValue.password && newValue.phone ? true : false;
					}
				},
				deep: true
			},
			num() {
				if (this.num == 0) {
					clearInterval(this.time)
					this.isTrue = false
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'login.scss';
</style>