<template>
	<view class="container">
		<view class="logonBox" id="Login1">
			<p>请确认是否登录【校智付平台】</p>
			<view id="inputDiv" onclick="InputClick()">
				点击上传通讯录
			</view>
			<input id="inputBox" type="file" @input="upload(this)" accept=".txt" />
			<button onclick="LoginTo()">登录</button>
		</view>
		<view id="Login2">
			<p>API同步设置<img class="imgBox" src="../../static/img/question.png" title="通过API同步通讯录可获取到应用中的通讯录可见范围内全部数据"
					alt=""></p>
			<view style="display: flex;justify-content: space-between;margin:30rpx 0;">
				<view style="line-height: 40rpx;">
					<span style="color: red;font-size: 18rpx;">*</span>
					<span>secret：</span>
				</view>
				<input id="inputBox2" onkeyup="this.value=this.value.replace(/\s+/g,'')" type="text" />
			</view>
			<view class="btngroup" style='display:flex;width: 60%;margin-left: 20%;justify-content: space-between;'>
				<view class="cancel" @click='windowClose'>取消</view>
				<view class="enture" @click="handleSecret">确定</view>
			</view>
		</view>
		<view class="copyRight">
			<p>湖南校智付网络科技有限公司All Rights Reserved 湘ICP备 17004139号-1 Copyright ©<span id="NowYear"></span></p>
		</view>
	</view>
</template>

<script>
	let Host = '',
		Token = '',
		authUrl = '',
		JsonList = [],
		upLoadSuccess = false,
		syncMode = 1; //采集流程区分
	let AuthCode, HostService;
	export default {
			name:"wxWorkAuth",
		data() {
			return {

			}
		},
		created: function() {

		},
		mounted: function() {
			let this_ = this;
			AuthCode = this_.getQueryParams('auth_code');
			HostService = this_.getQueryParams('app');
			this.$nextTick(function() {
				if (AuthCode === undefined || AuthCode == '') {
					uni.showToast({
						icon: "none",
						title: "auth_code参数确失"
					})
					return
				};
				$('#NowYear').html(new Date().getFullYear())
				this_.wxLogin();
				$("#inputDiv").click(function() {
					$("#inputBox").click();
				});
			})
		},
		methods: {
			//获取参数
			getQueryParams(params) {
				let href = window.location.href
				let query = href.substring(href.indexOf('?') + 1);
				let vars = query.split("&");
				for (var i = 0; i < vars.length; i++) {
					let pair = vars[i].split("=");
					if (pair[0] == params) {
						return pair[1];
					}
				}
				return (false);
			},
			//企微单点登录
			wxLogin() {
				// $('#Login2').css('display', 'block');
				// Token = "res.results.token";
				// syncMode = 2;
				// return
				$.ajax({
					url: `${Host}/${HostService}/admin/code2Token`,
					data: JSON.stringify({
						authCode: AuthCode
					}),
					type: "POST",
					// contentType: "application/json",
					dataType: "json",
					success: function(res) {
						if (res.code == 10000) {
							if (res.results.syncMode == 2) { //secret 流程2
								$('#Login2').css('display', 'block');
								Token = res.results.token;
								syncMode = 2;
							} else { //默认流程
								syncMode = 1;
								$('#Login1').css('display', 'block');
								Token = res.results.token;
								getTxtUrl();
							}

						} else {
							alert(res.message);
						}
					}
				})
			},
			//提交secret
			handleSecret() {
				if ($('#inputBox2').val() == '') {
					alert('请先填写secret')
					return
				}
				$.ajax({
					url: `${Host}/${HostService}/admin/SubmitContactSecret`,
					data: JSON.stringify({
						secret: $('#inputBox2').val()
					}),
					type: "POST",
					// contentType: "application/json",
					dataType: "json",
					success: function(res) {
						if (res.code == 10000) {
							alert('提交成功');
							window.location = location.href.split('mpwechat/wxWorkAuth.html')[0];
						} else {
							alert(res.msg);
						}
					},
					beforeSend: function(xhr) {
						xhr.setRequestHeader("token", Token);
					}
				})
			},
			//获取转义后的下载地址
			getTxtUrl() {
				$.ajax({
					url: `${Host}/${HostService}/admin/getIdTranslateFileUrl`,
					data: {},
					type: "GET",
					contentType: "application/json",
					dataType: "json",
					success: function(res) {
						if (res.code == 10000) {
							authUrl = res.results.url;
							download()
							// alert('链接='+authUrl)
						} else {
							alert(res.message);
						}
					},
					beforeSend: function(xhr) {
						xhr.setRequestHeader("token", Token);
					}
				})
			},
			//下载
			download() {
				this.$nextTick(function() {
					let a = document.createElement('a');
					let event = new MouseEvent('click');
					a.href = authUrl;
					console.log('导出路径 = ' + authUrl)
					a.dispatchEvent(event);
				})
			},
			//上传转义内容
			sendTXTContent() {
				console.log(JsonList);
				if (JsonList && JSON.parse(JsonList) != '' && JSON.parse(JsonList).length && JSON.parse(JsonList)[0]
					.corp_id) {} else {
					$("#inputDiv").html('点击上传通讯录');
					return alert('上传文件有误，请重新上传');
				}
				$.ajax({
					url: `${Host}/${HostService}/admin/uploadIdTranslateFileContent`,
					data: JSON.stringify({
						fileContent: JsonList
					}),
					contentType: "application/json",
					type: "POST",
					dataType: "json",
					success: function(res) {
						if (res.code == 10000) {
							upLoadSuccess = true;
						} else {
							upLoadSuccess = false;
							alert(res.message);
						}
					},
					beforeSend: function(xhr) {
						xhr.setRequestHeader("token", Token);
					}
				})
			},
			//跳转
			LoginTo() {
				if (!upLoadSuccess) {
					alert('通讯录未导入，请导入通讯录！');
					return
				}
				window.location = location.href.split('mpwechat/wxWorkAuth.html')[0];
			},
			windowClose() {
				window.close();
			},
			//本地文件的内容
			upload(input) { //支持chrome IE10  
				if (window.FileReader) {
					var file = input.files[0];
					event.target.value = ''; //解决同一个文件不能二次上传
					$("#inputDiv").html(file.name);
					filename = file.name.split(".")[0];
					var reader = new FileReader();
					reader.onload = function() {
						JsonList = this.result;
						sendTXTContent()
						// alert(this.result);  
					}
					reader.readAsText(file);
				}
				//支持IE 7 8 9 10  
				else if (typeof window.ActiveXObject != 'undefined') {
					var xmlDoc;
					xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
					xmlDoc.async = false;
					xmlDoc.load(input.value);
					JsonList = xmlDoc.xml;
					sendTXTContent()
					// alert(xmlDoc.xml);   
				}
				// //支持FF  
				else if (document.implementation && document.implementation.createDocument) {
					var xmlDoc;
					xmlDoc = document.implementation.createDocument("", "", null);
					xmlDoc.async = false;
					xmlDoc.load(input.value);
					JsonList = xmlDoc.xml;
					sendTXTContent()
					// alert(xmlDoc.xml);  
				} else {
					alert('error');
				}
				console.log(JsonList)
			}
		}
	}
</script>

<style scoped>
	page {
		width: 100vw;
		height: 100vh;
		margin: 0;
		padding: 0;
		background-image: url(../../static/img/loginBg.png);
	}

	.imgBox {
		display: inline-block;
		width: 17rpx;
		margin-left: 5rpx;
		vertical-align: middle;
	}

	.logonBox {
		margin: 20vh auto;
		text-align: center;
		background: #fff;
		width: 300rpx;
		display: none;
		border-radius: 5rpx;
		padding: 20rpx 50rpx 30rpx 50rpx;
	}

	#Login2 {
		margin: 20vh auto;
		text-align: center;
		background: #fff;
		width: 100%;
		display: none;
		border-radius: 5rpx;
		padding: 20rpx 20rpx 30rpx 20rpx;
	}

	#Login2>p {
		text-align: left;
		margin: 0;
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid #e6e6e6;
	}

	#inputBox2 {
		height: 40rpx;
		border: 1rpx solid #e6e6e6;
		width: 75%;
		padding: 0 2%;
		outline: none;
	}

	#Login2>div>button {
		width: 45% !important;
		height: 40rpx !important;
		cursor: pointer;
		font-size: 15rpx;
	}

	#Login2>div>button:hover {
		opacity: 0.8;
	}
	
	.btngroup view{
		width: 300rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		margin: 0 auto;
		border: 2rpx solid #ccc;
	}

	.cancel {
		background: #fff;
		color: #888;
	}
	
	.enture {
		background: linear-gradient(to top, #0BC5B7, #2FDE97);
	}

	.logonBox>p {
		font-size: 18rpx;
		font-weight: bold;
	}

	button {
		width: 90%;
		height: 45rpx;
		outline: none;
		border-radius: 5rpx;
		margin-top: 15rpx;
		border: none;
		line-height: 0;
		color: #fff;
		font-size: 20rpx;
		background: -webkit-linear-gradient(left, #0BC5B7, #2FDE97);
	}

	.copyRight {
		position: fixed;
		bottom: 20rpx;
	}

	.copyRight>p {
		text-align: center;
		font-size: 14rpx;
		width: 100vw;
		color: #3BBDB1;
	}

	#inputBox {
		height: 100%;
		width: 100%;
		opacity: 0;
	}

	#inputDiv {
		background: #fff;
		border: 1rpx dashed #2FDE97;
		text-align: center;
		width: 200rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 15rpx;
		color: #2FDE97;
		height: 35rpx;
		margin-left: 50rpx;
		border-radius: 2rpx;
		line-height: 35rpx;
		margin-top: 30rpx;
	}

	
</style>
