<template>
	<view style="width: 100%;height: 100%;min-height: 768px;position: relative;">
		<image src="../../static/images/card.jpg" style="width: 100%;height: 100%;" mode="scaleToFill"
			@click="keyHideStatus">
			<uni-forms ref="baseForm" id="form1" :modelValue="formData" :rules="rules">
				<view class="cardBody">
					<view class="card ">
						<view class="phoneText global-font" @click="keyHideStatus">
							用户类型
						</view>
						<view>
							<uni-forms-item name="accountType">
								<radio-group @change="typeChange" style="text-align: center;">
									<label v-for="item in typeList" :key="item.value">
										<radio :value="item.value" :checked="item.value === accountType"
											style="transform:scale(0.85)">{{ item.text }}</radio>
									</label>
								</radio-group>
							</uni-forms-item>
						</view>
						<view class="phoneText global-font" @click="keyHideStatus">
							账号
						</view>
						<view @click="keyHideStatus">
							<uni-forms-item name="username">
								<input class="inputClass" ref="userInput" v-model="formData.username"
									:adjust-position="false" />
							</uni-forms-item>
						</view>

						<view class="phoneText global-font" @click="keyHideStatus">
							密码
						</view>
						<view>
							<uni-forms-item name="password">
								<!-- @focus="open" -->
								<input id="ins" class="inputClass" v-model="formData.password" :password="showPassword"
									@blur="close()" />
								<tki-float-keyboard ref="keyb" :mode="keyMode" :type="keyType" :title="title"
									@del="keyDel" @val="keyVal" @show="keyShow" @hide="keyHide"></tki-float-keyboard>
							</uni-forms-item>
						</view>
						<view>
							<button class="buttonClass" @click="to">登录</button>
						</view>
						<!-- <view class="zcText">
							<text class="global-font" @click="register">注册账号</text>
						</view> -->
						<view class="mzText" id="protocol">
							<radio :checked="protocol" @click="radioChange"></radio>
							<view class="global-font">已阅读并同意</view>
							<view class="global-font">
								<navigator url="/pages/protocol/yonghuxieyi" hover-class="none">《用户协议》</navigator>
							</view>
							<view class="global-font">和</view>
							<view class="global-font">
								<navigator url="/pages/protocol/yinsizhengce" hover-class="none">《隐私政策》</navigator>
							</view>
						</view>
					</view>
				     
				</view>
				
			</uni-forms>
			
		</image>
        <view class="bbStyle">当前版本：1.0.2</view>
	</view>


</template>

<script>
	import config from '@/config.js'
	import {
		setToken,
		setOpenid,
		setUser,
		getOpenid
	} from '@/common/auth.js'
	import {
		Login,
		Login1,
		GetOpenId
	} from '@/api/login.js'
	import {
		isFollow
	} from '@/api/auth.js'
	import {
		showConfirm
	} from '../../common/common'
	import tkiFloatKeyboard from '@/components/tki-float-keyboard/tki-float-keyboard.vue'

	export default {
		components: {
			tkiFloatKeyboard
		},
		data() {
			return {
				// 键盘
				// 键盘类型  keyboard 普通键盘，car 汽车键盘，number 数字键盘
				keyMode: 'keyboard',
				// type 键盘可用区域，配合mode属性使用  默认值：0
				//mode = keyboard 时 type = 0 全部、 1 字母加数字、 2 符号、 3 字母、 4 数字、 5 字母加符号、6 数字加符号
				//mode = car 时 type = 0 全部、 1 字母加数字、 2 省、 3 字母加数字加特、 4 字母、 5 数字
				//mode = number 时 type = 0 全部、 1 禁用.
				keyType: 0,
				title: '密码键盘',
				keyShowStatus: false,
				showPassword: true,

				typeList: [{
						text: '民政用户',
						value: '1'
					},
					{
						text: '非民政用户',
						value: '0'
					},
				],
				accountType: '1',

				formData: {
					username: '',
					password: '',
					// username: '152326197904090050',
					// password: '090050',
					// username: '15578179876',
					// username: '15143018068',
					// username: '15114481023',
					// username: 'ylfw_220822001',
					// username: 'ylfw_220822001001',
					// password: 'sckj12356',
					// code: "081X2kll21UGPc4HRlml27WxeO3X2kl6",
					code: "",
					openid: "",
				},
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '账号不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
				},
				defaultPhoneHeight: '', //屏幕默认高度
				nowPhoneHeight: '', //屏幕现在的高度
				show: false,
				protocol: false,
			}
		},
		onLoad() {
			// 测试openid
			// setOpenid('owaO0uKdXNGMx7Zsy2jOZ0ZKsJGs')
			// setOpenid('123456')
			// if (!getOpenid()) {
			// 	this.getCode(config.appid)
			// }
		},
		mounted() {
			//监听软键盘获取当前屏幕高度的事件
			this.defaultPhoneHeight = window.innerHeight
			window.onresize = () => {
				this.nowPhoneHeight = window.innerHeight
			}
		},
		watch: {
			//软键盘弹起事件
			nowPhoneHeight() {
				if (this.defaultPhoneHeight != this.nowPhoneHeight) {
					//手机键盘被唤起了。
					this.show = true
				} else {
					//手机键盘被关闭了。
					this.show = false
				}
			}
		},
		methods: {
			radioChange(e) {
				this.protocol = !this.protocol
			},
			typeChange(e) {
				this.accountType = e.detail.value
			},
			keyHideStatus() {
				if (this.keyShowStatus) this.$refs.keyb._keyHide()
			},
			keyVal(v) {
				this.formData.password += v
			},
			keyDel(d) {
				this.formData.password = this.formData.password.substring(0, this.formData.password.length - 1)
			},
			keyShow(h) {
				this.keyShowStatus = true
			},
			keyHide(h) {
				this.keyShowStatus = false
			},
			change(e) {
				this.formData.password += e
			},
			confirm(e) {},
			backspace(e) {
				this.formData.password = this.formData.password.substring(0, this.formData.password.length - 1)
			},
			changeCarInputMode(e) {
				this.title = e;
			},
			open() {
				// uni.hideKeyboard()
				// this.$refs.keyb._keyShow();
			},
			close() {},
			register() {
				if (!this.protocol) {
					let ele = document.getElementById('protocol')
					if (ele) {
						ele.classList.add('shake')
						setTimeout(() => {
							ele.classList.remove('shake')
						}, 800)
					}
					return
				}
				uni.navigateTo({
					url: '/pages/lr/register?code=' + this.formData.code
					// url: '/pages/info/add?code=' + this.formData.code
				})
			},
			getCode(appid) { // 非静默授权，第一次有弹框
				let local = window.location.href; // 获取页面url
				let code = this.getUrlCode().code; // 截取code
				if (code && code !== '') { // 如果有code
					// 拿到code去请求openId并存在本地 ?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
					GetOpenId({
						code: code
					}).then(res => {
						setOpenid(res.data)
						this.formData.openid = res.data
					})
				} else {
					window.location.href =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
				}
			},
			getUrlCode() { // 截取url中的code方法
				let url = location.search;
				let theRequest = {};
				if (url.indexOf("?") !== -1) {
					let str = url.substr(1);
					let strs = str.split("&");
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
					}
				}
				return theRequest
			},
			async to() {

				if (!this.protocol) {
					let ele = document.getElementById('protocol')
					if (ele) {
						ele.classList.add('shake')
						setTimeout(() => {
							ele.classList.remove('shake')
						}, 800)
					}
					return
				}
                // 是否关注公众号
				// let result = await isFollow({
				// 	openid: getOpenid()
				// });
				// if (result.code != 200) {
				// 	return false
				// }
				uni.hideKeyboard()
				this.$refs['baseForm'].validate().then(res => {
					uni.showLoading({
						title: '登录中...',
						mask: true,
					})
					if (!this.formData.openid) this.formData.openid = getOpenid()
					if (this.accountType === '0') {
						Login(this.formData).then(res => {
							if (res.code == 200) {
								const {
									data
								} = res
								data.sysUser.accountType = this.accountType
								setUser(data.sysUser)
								setToken(data.token.access_token)
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						}).finally(() => {
							uni.hideLoading()
						})
					} else {
						Login1(this.formData).then(res => {
							if (res.code == 200) {
								const {
									data
								} = res
								data.sysUser.accountType = this.accountType
								setUser(data.sysUser)
								setToken(data.access_token)
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						}).finally(() => {
							uni.hideLoading()
						})
					}


				}).catch(err => {
					console.log(err);
				})

			}
		}
	}
</script>

<style scoped>
	.bbStyle{
		position: absolute;
		bottom: 0;
		color: #3F51B5;
		font-size: 15px;
		/* left: 50%;
		transform: rotateX(-50%); */
		text-align: center;
		width: 100%;
		margin-bottom: 10px;
	}
	.cardBody {
		display: flex;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 18vh;
		left: 12vw;
	}

	.card {
		width: 76vw;
		border-radius: 2.8vw;
		background: rgba(255, 255, 255, 1);
		box-shadow: 5px 6px 18px rgba(0, 0, 0, 0.08);

	}

	.phoneText {
		margin-top: 3vh;
		margin-left: 4vw;
		width: 80vw;
		height: 3vh;
		font-size: 2.8vw;
		line-height: 2vh;
		color: rgba(116, 127, 158, 1);
		text-align: left;
		vertical-align: top;

	}

	.global-font {}

	.zcText {
		position: absolute;
		margin-top: 2vh;
		margin-left: 4vw;
		width: 68vw;
		height: 5vh;
		font-size: 2.8vw;
		color: rgba(116, 127, 158, 1);
		font-weight: 500;
		line-height: 2vh;
		text-align: center;
		vertical-align: top;
	}

	.inputClass {
		margin-top: 1vh;
		margin-left: 4vw;
		width: 68vw;
		height: 30px;
		border-radius: 5.8vw;
		border: 1px solid rgba(176, 179, 199, 1);
		text-indent: 4vw;
	}

	.buttonClass {
		width: 68vw;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 5.8vw;
		/* border: 1px solid rgba(176, 179, 199, 1); */
		background: #28d87d;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0rpx 4rpx 10rpx 1rpx rgba(40, 216, 125, 0.4);
	}

	.mzText {
		height: 30px;
		font-size: 2.8vw;
		color: rgba(116, 127, 158, 1);
		font-weight: 500;
		line-height: 2vh;
		text-align: center;
		vertical-align: top;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
	}

	radio {
		transform: scale(0.7);
	}


	.shake {
		animation: shake 800ms ease-in-out;
	}

	@keyframes shake {

		10%,
		90% {
			transform: translate3d(-1px, 0, 0);
		}

		20%,
		80% {
			transform: translate3d(+2px, 0, 0);
		}

		30%,
		70% {
			transform: translate3d(-4px, 0, 0);
		}

		40%,
		60% {
			transform: translate3d(+4px, 0, 0);
		}

		50% {
			transform: translate3d(-4px, 0, 0);
		}
	}
</style>