<template>
	<view>
		<view class="nav">
		</view>
		<view class="loginView">
			<view class="u-demo-block__content">
				<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
				<!-- #ifndef APP-NVUE -->
				<u-input placeholder="请输入手机号" maxlength="11" border="none" font-size="24rpx" v-model="phoneNumber">
				<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<!-- #endif -->
					<u--text text="+86 |" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
				<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
			</view>


			<view class="u-demo-block__content" style="margin-top: 20upx;display: flex;align-items: center;"
				v-show='flag==true'>
				<view class="left">
					<u-icon name="lock" size="25" color="#909193"></u-icon>
				</view>
				<view class="center" style="color: #909193;padding: 0px 18upx;">
					|
				</view>
				<view class="right">
					<u--input placeholder="请输入密码" prefixIconStyle="font-size: 22px;color: #909399;" border='none'
						font-size="24rpx" type="password" v-model="password"></u--input>
				</view>
			</view>


			<view class="u-demo-block__content" style="margin-top: 15px;" v-if="fcode==true">
				<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
				<!-- #ifndef APP-NVUE -->
				<u-input placeholder="手机验证码" v-model="code" border="none" font-size="24rpx">
				<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<!-- #endif -->
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"></u-code>
						<view style="color: #FF4502; font-weight: 800; font-size: 28rpx;" @click="getCode">
							{{tips}}
						</view>
						<!-- 	<u-button
							@tap="getCode"
							:text="tips"
							type="success"
						></u-button> -->
					</template>
				<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
			</view>


			<view class="privacyPolicy">
				<view>
					<u-radio-group v-model="value" iconPlacement="left" size="15" shape="circle">
						<u-radio activeColor="red" label="同意"></u-radio>
					</u-radio-group>
				</view>
				<text class="text" @click="selectRuleByType('user_agreement')">《用户协议》</text>和<text class="text" @click="selectRuleByType('privacy_agreement')">《隐私协议》</text>
			</view>
			<view class="but_login" @click="login">登录</view>
			<view class="upLogin" v-show="fcode" @click="gitstatus">手机号密码登录</view>
			<view class="xflex" v-show="flag">
				<view class="left">
					找回密码
				</view>
				<view class="right" @click="gitstatu">
					手机号验证码登录
				</view>
			</view>
		</view>
<u-popup :show="isShow" :round="10" mode="center" @close="close">
			<view class="popupBox">
				<div class="title">
					{{richContent.ruleTitle}}
				</div>
				<div class="content">
					<rich-text :nodes="richContent.ruleContent"></rich-text>
				</div>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				value: '',
				flag: false,
				fcode: true,
				password: '',
				phoneNumber: '',
				type: 1,
				code: '',
				isShow: false,
				richContent:''

			}
		},
		watch: {
			value(newValue, oldValue) {
				// console.log('v-model', newValue);
			}
		},
		methods: {
			
			selectRuleByType(ruleType){
				this.$http.get('/api/store/rule/selectRuleByType',{
					ruleType
				}).then(res=>{
					this.richContent = res.data
					this.isShow = true
				})
			},
			
			close() {
				this.isShow = false
			},
			
			login() {
				if (!uni.getStorageSync("token") === undefined || !uni.getStorageSync("token") === null || !uni
					.getStorageSync("token") === '') {


				} else {
					// uni.setStorageSync('userType',3)
					// uni.redirectTo({
					// 	url: '/pages/home/home'
					// })
					this.loginRquest()
				}
			},
			loginRquest() {
				this.$http.post("/api/store/login", {
					phoneNumber: this.phoneNumber,
					password: this.password,
					code: this.code,
					type: this.type
				}).then(res => {
					if (res.code == 200)
					uni.setStorageSync('token',res.data.token)
					uni.setStorageSync('storeUserId',res.data.id)
					uni.setStorageSync('userInfo',res.data)
					console.log("userType", res.data.id)
					uni.setStorageSync('userType', res.data.userType)
					uni.reLaunch({
						url: '/pages/home/home'
					})
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				uni.showLoading({
					title: '正在获取验证码'
				})
				this.$http.post("/api/store/sendSmsCode", {
					phoneNumber: this.phoneNumber,
				}).then(res => {
					if (res.code == 200)
						console.log(res)
					uni.$u.toast('验证码已发送');
					this.$refs.uCode.start();
					// uni.redirectTo({
					// 	url: '/pages/home/home'
					// })
				})

				// /api/store/sendSmsCode
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码

					setTimeout(() => {

						// 这里此提示会被this.start()方法中的提示覆盖

						// 通知验证码组件内部开始倒计时

					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {
				console.log('change', e);
			},
			gitstatus() {
				this.flag = true
				this.fcode = false
				this.type = 2
			},
			gitstatu() {
				this.flag = false
				this.fcode = true
				this.type = 1
			}
		}
	}
</script>

<style lang="scss">
	
	.u-popup__content{
		
		.popupBox{
			width: 600rpx;
			padding: 20rpx;
			box-sizing: border-box;
			.title{
				font-weight: bold;
				font-size: 36rpx;
				text-align: center;
				margin-bottom: 20rpx;
			}
			
			.content{
				max-height: 750rpx;
				overflow-y: auto;
			}
		}
	}
	
	.upLogin {
		font-weight: 400;
		padding-top: 29rpx;
		font-size: 32rpx;
		color: #666666;
		text-align: center;
	}

	.but_login {
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		color: white;
		margin-top: 22rpx;
		font-size: 32rpx;
		font-weight: 800;
		text-align: center;
		padding: 29rpx;
	}

	.privacyPolicy {
		display: flex;
		margin-top: 45rpx;
		font-size: 24rpx;

		.text {
			color: #FF4502;
		}
	}

	.u-demo-block__content {
		background: #F6F6F6;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 31rpx
	}

	.loginView {
		padding: 61rpx;
		background: #FFFFFF;
		margin-top: -30rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

	}

	.nav {
		height: 452rpx;
			background-size: 100%;
		background-image: url('../../static/bg/bg_home_login.png');
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.xflex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #666666;
		padding-top: 30rpx
	}

</style>