<template>
	<view class="container">
		<view class="bg_login"></view>
		<view class="con">
			<view class="con_title">欢迎来到课件夹</view>
			<view class="con_inputBox">
				<view class="con_inputBox_con">
					<view class="con_inputBox_con_icon">
						<image mode="heightFix" src="@/static/images/phone.png"></image>
					</view>
					<view class="con_inputBox_con_input">
						<uni-easyinput v-model="loginForm.phonenumber" :styles="styles"
							:placeholderStyle="placeholderStyle" placeholder="请输入手机号"></uni-easyinput>
					</view>
				</view>
				<view class="con_inputBox_con">
					<view class="con_inputBox_con_icon">
						<image mode="heightFix" src="@/static/images/message.png"></image>
					</view>
					<view class="con_inputBox_con_input" style="width: 60%;">
						<uni-easyinput v-model="loginForm.smsCode" maxlength="4" type="number" :styles="styles"
							:placeholderStyle="placeholderStyle" placeholder="输入验证码"></uni-easyinput>
					</view>
					<u-code ref="uCode" @change="onMsgCodeChange" @start="canClick = false" @end="canClick = true"
						keepRunning></u-code>
					<view :class="canClick ? 'color-custom' : 'text-gray'" class="con_inputBox_con_send" @click="getMsgCode">{{tips}}</view>
				</view>
				<view class="con_inputBox_tips" @click="showMsgToast = true">收不到验证码</view>
			</view>
			<view class="con_bottom">
				<view class="con_bottom_btn bg-custom" :class="{disabled_btn: !isReady}" @click="login">登录</view>
				<view class="con_bottom_agree">
					<!-- <checkbox v-model="isAgree" /> -->
					<image v-if="isAgree" @click="check" mode="heightFix" src="@/static/images/status/check-circle.png">
					</image>
					<image v-if="!isAgree" @click="check" mode="heightFix"
						src="@/static/images/status/uncheck-circle.png"></image>
					<view class="con_bottom_agree_text">已阅读并同意</view>
					<view class="con_bottom_agree_text con_bottom_agree_link" v-for="item in fileList" :key="item.ossId"
						@click="handleFileUrl(item)" :title="item.name">{{item.name}}</view>
				</view>
				<view class="text-center">
					<image v-if="logoUrl" class='logo' :src="logoUrl"  mode="aspectFit"></image>
				</view>

			</view>

			<u-modal :show="showMsgToast" title="提示" content='请再次获取验证码，如仍然无法收到，请描述问题发送至hr01@nullht.com'
				@confirm="showMsgToast = false"></u-modal>
		</view>
	</view>
</template>


<script>
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
	import {
		getCodeImg,
		getTenantInfo,
		getMsgCode,
		registerWithMsgCode
	} from '@/api/login'
	import {
		getDocUrl
	} from "@/api/case/case"
	const regexPhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				showMsgToast: false, // 收不到验证码
				isAgree: false, // 是否同意协议
				isSend: false, // 是否在发送验证码
				isReady: true, // 是否可以点击登录
				time: 59, // 倒计时60s
				loginForm: {
					clientId: getApp().globalData.config.clientId,
					grantType: getApp().globalData.config.grantType,
					tenantId: uni.getStorageSync('tenantId') || null,
					phonenumber: "",
					smsCode: "",
					code: "",
					uuid: ''
				},
				canClick: true,
				fileList: [], // 项目协议
				register: '', //是否允许注册 0开通 1关闭
				logoUrl:'',
				placeholderStyle: "color:#c9cdd4;",
				styles: {
					color: '#c9cdd4',
					border: 'none'
				},
				tips: '',
			};
		},
		created() {
			let urls = window.location.href.split('?')
			if (urls.length > 1) {
				let strs = urls[urls.length - 1]
				let arr = strs.split('&')
				let arr2 = arr.filter(item => item.indexOf('tenantId') > -1)
				if (arr2.length > 0) {
					let tenantId = arr2[0].split('=')[1]
					this.loginForm.tenantId = tenantId
					uni.setStorageSync('tenantId', tenantId)
					this.getTenantInfo()
				} else {
					uni.$u.toast('缺少租户编号')
				}
			} else {
				uni.$u.toast('缺少租户编号')
			}
		},
		methods: {
			//获取租户信息
			getTenantInfo() {
				getTenantInfo(this.loginForm.tenantId).then(res => {
					if (res.code == 200) {
						this.fileList = res.data.agreementFileList
						this.register = res.data.register
						if(res.data.organizationLogo){
							this.logoUrl = res.data.organizationLogo[0].url
						}
					}
				}).catch(err => {

				})
			},
			// 登录
			login() {
				if (!this.isAgree) {
					uni.$u.toast("请先阅读协议并勾选！")
					return
				} else if (!this.validatePhoneNum()) {
					return
				} else if (this.loginForm.smsCode === "") {
					this.$modal.msgError("请输入验证码")
					return
				}

				//1.先获取租户信息是否允许注册
				if (this.register == '0') {
					//先注册
					registerWithMsgCode(this.loginForm).then(res => {
						if (res.code == 200) {
							this.pwdLogin()
						}
					})
				} else {
					//直接登录
					this.pwdLogin()
				}
			},
			// 登录
			pwdLogin() {
				this.$modal.loading("登录中，请耐心等待...")
				this.$store.dispatch('Login', this.loginForm).then(() => {
					this.$modal.closeLoading()
					this.loginSuccess()
				}).catch(() => {

				})
			},
			// 项目协议
			handleFileUrl(item) {
				let url = item.url
				let name = item.name
				let fileType = url.substring(url.lastIndexOf('.') + 1).toUpperCase();
				if (fileType == 'PDF') {
					let newurl = encodeURIComponent(url.replace('http','https'))
					let pdfUrl = '/static/html/web/viewer.html?file=' + newurl
					// let pdfUrl = '/static/html/web/viewer.html?file=/static/html/web/compressed.tracemonkey-pldi-09.pdf'
					this.$tab.navigateTo(`/pages/phone/common/webview/index?title=${name}&url=${pdfUrl}&type=PDF`)
				} else if (fileType == 'DOC' || fileType == 'DOCX') {
					// let newUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + url
					//XDOC文档预览服务地址
					// let newUrl = "https://view.xdocin.com/view?src=" + encodeURIComponent(url)
					// this.$tab.navigateTo(`/pages/phone/common/webview/index?title=${name}&url=${newUrl}`)
					
					// 新方式
					let that = this
					getDocUrl(item.ossId).then(res => {
						console.log('res==', res);
						if(res&&res.code == 200){
							let newUrl = res.data.url.replace('http','https')
							uni.setStorageSync('FileUrl', newUrl)
							that.$tab.navigateTo(`/pages/phone/common/webview/index?title=${name}&type=OSS`)
						}
					}).catch(err => {
					
					})
				} else {
					uni.$u.toast('暂不支持预览此类型文件')
				}
			},
			// 登录成功
			loginSuccess() {
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					// this.$tab.reLaunch('/pages/pc/info/info')
					let nickName = res.data.user.nickName
					if (!nickName) {
						uni.navigateTo({
							url: '/pages/pc/chooseIdentity/index'
						})
					} else {
						this.$tab.reLaunch('/pages/pc/index/index')
					}
				})
			},
			// 表单修改
			inputChange() {
				if (this.isAgree) {
					if (this.loginForm.phonenumber) {
						if (this.loginForm.smsCode) {
							this.isReady = true
						} else {
							this.isReady = false
						}
					} else {
						this.isReady = false
					}
				} else {
					this.isReady = false
				}
			},
			onMsgCodeChange(text) {
				this.tips = text
			},
			//验证手机号
			validatePhoneNum() {
				let phonenumber = this.loginForm.phonenumber
				if (!phonenumber) {
					this.$modal.msgError("请输入手机号")
					return false
				} else if (!regexPhone.test(phonenumber)) {
					this.$modal.msgError("请输入正确的手机号")
					return false
				} else {
					return true
				}
			},
			//获取短信验证码
			getMsgCode() {
				if (!this.canClick) {
					return
				}

				if (!this.validatePhoneNum()) {
					return
				}

				getMsgCode({
					phonenumber: this.loginForm.phonenumber
				}).then(res => {
					if (res.code == 200) {
						//开始倒计时
						this.$refs.uCode.start()
					}
				})

			},
			// 是否同意协议
			check() {
				this.isAgree = !this.isAgree
				// this.inputChange()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bg_login {
		width: 200%;
		height: 200%;
		border-radius: 50%;
		// width: 1865.63rpx;
		// height: 1865.63rpx;
		// border-radius: 1865.63rpx;
		background: linear-gradient(133deg, white 39.57%, var(--phone-theme-color) 79.9%);
		overflow: hidden;
		position: fixed;
		bottom: 45%;
		left: -50%;
		overflow: hidden;
		// left: calc(50% - 932.82rpx);
	}

	.con {
		position: relative;
		z-index: 5;
		// height: 182.04rpx;
		width: 164.06rpx;
		margin: 0 auto;
		// margin-top: calc(50% - 91.02rpx);

		&_title {
			color: #FFF;
			text-align: center;
			font-size: 18.75rpx;
			font-weight: 500;
			line-height: 22.92rpx;
		}

		&_inputBox {
			margin-top: 67.71rpx;
			margin-bottom: 31.25rpx;
			display: flex;
			// width: 100%;
			padding: 5.21rpx;
			flex-direction: column;
			align-items: center;

			border-radius: 4.17rpx;
			background: #FFF;
			box-shadow: 0 1.04rpx 15.63rpx 0 rgba(0, 0, 0, 0.08);

			&_con {
				width: 100%;
				height: 22.92rpx;
				padding: 2.6rpx 4.17upx;
				margin-bottom: 6.25rpx;
				position: relative;
				display: flex;
				align-items: center;

				&_icon {
					width: 8.33rpx;
					height: 8.33rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;

					/deep/ uni-image {
						width: 8.33rpx;
						height: 8.33rpx;
					}
				}

				&_input {
					width: 100%;
				}

				&_send {
					overflow: hidden;
					text-align: right;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 7.29rpx;
					font-weight: 400;
					width: 40%;
					cursor: pointer;

					&_con {
						display: flex;
						align-items: center;
						justify-content: center;
						border: 0.52rpx solid #86909C;
						width: 98%;
						border-radius: 2.08rpx;

						/deep/ .uni-countdown__number {
							color: #86909C !important;
							text-align: center;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 6.77rpx !important;
							font-weight: 400 !important;
							line-height: 11.46rpx !important;
						}

						&_text {
							color: #86909C;
							text-align: center;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 6.77rpx;
							font-weight: 400;
							line-height: 11.46rpx;
						}
					}

				}
			}

			&_tips {
				color: #86909C;
				text-align: center;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 6.77rpx;
				font-weight: 400;
				line-height: 11.46rpx;
				cursor: pointer;
			}
		}

		&_bottom {
			width: 100%;

			&_btn {
				color: #FFF;
				text-align: center;
				font-size: 8.33rpx;
				font-weight: 400;
				line-height: 22.92rpx;
				border-radius: 2.08rpx;
				overflow: hidden;
				margin-bottom: 8.33rpx;
				cursor: pointer;
			}

			&_agree {
				display: flex;
				align-items: center;
				justify-content: center;

				/deep/ uni-checkbox,
				/deep/ uni-checkbox .uni-checkbox-input {
					width: 7.29rpx;
					height: 7.29rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 2.08rpx;
				}

				uni-image {
					width: 7.29rpx;
					height: 7.29rpx;
					margin-right: 2.08rpx;
					cursor: pointer;
				}

				&_text {
					color: #86909C;
					font-size: 6.25rpx;
					font-weight: 400;
          white-space: nowrap;
				}

				&_link {
          flex:1;
					color: #165DFF;
					cursor: pointer;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
				}
			}

			.logo{
				max-width: 70.8rpx;
				max-height: 35.4rpx;
				// width: 26.04rpx;
				// height: 26.04rpx;
				margin-top: 5.21rpx;
			}
		}
	}

	.disabled_btn {
		opacity: .4;
	}

	/deep/ .uni-input-input {
		color: #000;
	}

	/deep/ .is-input-border {
		border: none !important;
	}

	/deep/ .uni-easyinput__content-input {
		padding-left: 4.69rpx !important;
	}

	/deep/ .u-modal {
		width: 160rpx !important;
	}

	/deep/ .u-modal__button-group__wrapper--only-confirm {
		cursor: pointer;
	}
</style>
