<template>
	<view>
		<match-media :min-width="900">
			<view class="header_top">
				<view style="color: #D5C6B2;">孵化精品游戏 <text style="margin-left: 10px;">助力企业发展</text></view>
				<view class="top_r">
					<p @tap="active({url: '/'})">回到首页</p>
				</view>
				 
			</view>
		</match-media>
		<match-media :max-width="900">
			<view class="headers">
				<view class="header-titles">
					<image class="logos" src="../../static/img/index/blogo.png"></image>
				</view>
				<view class="header-right" @tap="open('drawer')">
					<uni-icons type="bars" size="24" color="#f18b37"></uni-icons>
				</view>
			</view>
		</match-media>
		<uni-drawer mode="right" ref="drawer">
			<view class="drawer-box">
				<ul>
					<li v-for="(item,index) in list" :class="{'active-hover':num==index}" :key="index"
						@tap="active(item)">
						<span href="./">{{item.text}}</span>
					</li>
					
					<li @tap="active9({url: 'apply'})" :class="{'active-hover':nums==9}">
						<span href="./">立即申请</span>
					</li>
					
					<!-- <li  @tap="active10({url: 'blockchainquery'})" :class="{'active-hover':currentRoute=='/blockchainquery'}">
						<span href="./">资产核验</span>
					</li> -->
				</ul>
			</view>
		</uni-drawer>
		
		<uni-popup mode="center" ref="login">
			<view class="login-box">
				<image class="logos" src="../../static/img/index/blogo.png"></image>
				<view class="login_type">
					<text class="login_text" :class="{'check':l_type==1}" @tap="check(1)">登录</text>
					<text class="login_text">|</text>
					<text class="login_text" :class="{'check':l_type==2}" @tap="check(2)">注册</text>
				</view>
				<view class="login_desc" v-if="l_type==1">
					欢迎回来～
				</view>
				<view class="login_descs" v-else>
					快速开始尽享COG可信资产服务平台榜单，你可申请游戏评分、申请融资或处理游戏投融资业务
				</view>
				<view class="input-wrap" v-if="l_type==1">
					<input class="input" v-model="formData.mobile" type="text" placeholder="请输入手机号" placeholder-class="placeholder-class" maxlength="20">
					<input class="input" v-model="formData.password" type="password" placeholder="请输入登录密码" placeholder-class="placeholder-class"/>
				</view>
				
				<!-- <img :src="captchaUrl" @tap="refreshCaptcha" alt="Captcha" /> -->
				<view class="login_bt" v-if="l_type==1" @tap="login()">
					<text>登录</text>
				</view>
				<view class="login_check" v-if="l_type==1">
					<label class="radio"><radio value="r1" :checked="checkedss" @tap="select()" activeBackgroundColor="#f48612" borderColor="#f48612" color="#f48612" style="transform:scale(0.65);border-radius: 100%;" /></label>
					登录即代表同意《用户协议》
				</view>
				<view class="input-wrap mg-t-30" v-if="l_type==2">
					<input class="input" v-model="formData.mobile" type="text" placeholder="请输入手机号"  maxlength="20" placeholder-class="placeholder-class" >
					<input class="input" v-model="formData.password" type="password" placeholder="请输入登录密码" placeholder-class="placeholder-class" />
					<view class="login_code mg-b-30">
						<input class="input2" v-model="formData.code" type="text" placeholder="请输入短信验证码" placeholder-class="placeholder-class" />
						<view class="dynacode"  @click="sendMobileCode">{{dynacodeData.codeText }}</view>
					</view>
				</view>
				<view class="login_bt" v-if="l_type==2" @tap="register()">
					注册并登录
				</view>
				<view class="login_checks" v-if="l_type==2">
					<label class="radio"><radio value="r1" :checked="checkedss" @tap="select()" activeBackgroundColor="#f48612" borderColor="#f48612" color="#f48612" style="transform:scale(0.65);border-radius: 100%;" /></label>
					注册即代表同意《用户协议》
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { err } from '../../js_sdk/hhyang-uni-simple-router/helpers/warn';
	export default {
		props: {
			index: {
				type: Number,
				default: 0
			},
			name: {
				type: String,
				default: 'COG可信资产服务平台'
			}
		},
		data() {
			return {
				list: [{
						text: '首页',
						url: '/',
						path: '/pages/index',
					},
					{
						text: '我要资金',
						url: 'invest',
						path: '/pages/invest',
					},
					{
						text: '我要发行',
						url: 'publish',
						path: '/pages/publish',
					},
					{
						text: '我要出海',
						url: 'oversea',
						path: '/pages/oversea',
					},
					{
						text: '我要版号',
						url: 'versionNumber',
						path: '/pages/versionNumber',
					},{
						text: '我要版权',
						url: 'copyright',
						path: '/pages/copyright',
					},
					{
						text: '我要技术',
						url: 'development',
						path: '/pages/development',
					},
					{
						text: '我要参展',
						url: 'expo',
						path: '/pages/expo',
					},
					{
						text: '我要补贴',
						url: 'subsidy',
						path: '/pages/subsidy',
					},
					//首页

				],
				num: 0,
				nums: 0,
				l_type:1,
				formData:[],
				dynacodeData: {
					seconds: 120,
					timer: null,
					codeText: '获取验证码',
					isSend: false
				},
				checkedss:true,
				token:'',
				currentRoute:'',
				captchaUrl:''
			}
		},
		created() {
			// this.num ='';
			this.nums ='';
			this.token = uni.getStorageSync('token');
			this.num = this.index;
			// console.log(this.num ,222)
			this.currentRoute = this.$route.path;
			// console.log(currentRoute,222)
			// if(this.currentRoute=='/blockchainquery'){
			// 	this.nums = 10;
			// 	this.num ='';
			// }
			if(this.currentRoute=='/apply'){
				this.nums = 9;
				this.num =-1;
			}
			// if(this.currentRoute=='/subsidy'){
			// 	this.num = 8;
			// }
			//this.refreshCaptcha();
		},
		watch: {
			'dynacodeData.seconds': {
				handler(newValue, oldValue) {
					if (newValue == 0) {
						clearInterval(this.dynacodeData.timer);
						this.dynacodeData = {
							seconds: 120,
							timer: null,
							codeText: '获取验证码',
							isSend: false
						};
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			refreshCaptcha() {
				this.captchaUrl ='';
			      this.captchaUrl = `http://gg.com/index.php/api/user.code?${new Date().getTime()}`; // 防止缓存
			    },
			select(){
				if(this.checkedss==true){
					this.checkedss=false;
				}else{
					this.checkedss=true;
				}
			},
			check(e){
				this.l_type=e;
			},
			login(){
				if(this.checked==false){
					uni.showToast({
						icon:'none',
						title: '请同意用户协议',
						duration:1500
					})
					return;
				}
				if(this.formData.mobile==''){
					uni.showToast({
						icon:'none',
						title: '请输入手机号',
						duration:1500
					})
					return;
				}
				if(this.formData.password==''){
					uni.showToast({
						icon:'none',
						title: '请输入密码',
						duration:1500
					})
					return;
				}
				this._post('user.Useropen/phonelogin',{
					mobile: this.formData.mobile,
					password: this.formData.password,
					
				},res=>{
					uni.setStorageSync('token',res.data.token)
					uni.showToast({
						icon:'none',
						title: '登录成功',
						duration:1500
					})
					this.token =res.data.token;
					this.close('login');
				}
				,err=>{
					uni.showToast({
						icon:'none',
						title: err.data.msg
					})
					return;
					// this.$message(err.data.msg);
				}
				);
			},
			sendMobileCode(){
				if(this.checked==false){
					uni.showToast({
						icon:'none',
						title: '请同意用户协议',
						duration:1500
					})
					return;
				}
				if(!this.formData.mobile){
					uni.showToast({
						icon:'none',
						title: '请输入手机号',
						duration:1500
					})
					return;
				}
				if(!this.formData.password){
					uni.showToast({
						icon:'none',
						title: '请输入密码',
						duration:1500
					})
					return;
				}
				this._post('user.Useropen/sendCode',{
					mobile: this.formData.mobile,
					type: 'register',
				},res=>{
					this.dynacodeData.timer = setInterval(() => {
						this.dynacodeData.seconds--;
						this.dynacodeData.codeText = this.dynacodeData.seconds + 's后重发';
					}, 1000);
					uni.showToast({
						icon:'none',
						title: '发送成功',
						duration:1500
					})
				}
				,err=>{
					uni.showToast({
						icon:'none',
						title: err.data.msg
					})
					return;
					// this.$message(err.data.msg);
				}
				);
			},
			register(){
				if(this.checked==false){
					uni.showToast({
						icon:'none',
						title: '请同意用户协议',
						duration:1500
					})
					return;
				}
				if(this.formData.mobile==''){
					uni.showToast({
						icon:'none',
						title: '请输入手机号',
						duration:1500
					})
					return;
				}
				if(this.formData.password==''){
					uni.showToast({
						icon:'none',
						title: '请输入密码',
						duration:1500
					})
					return;
				}
				this._post('user.Useropen/register',{
					mobile: this.formData.mobile,
					password: this.formData.password,
					code: this.formData.code,
					corporate_idcard: 'arguments11',
					company_code: 'arguments11',
					name: 'arguments11',
					legal_person: 'arguments11',
				},res=>{
					uni.setStorageSync('token',res.data.token)
					uni.showToast({
						icon:'none',
						title: '注册成功',
						duration:1500
					})
					this.token =res.data.token;
					this.close('login');
				}
				,err=>{
					uni.showToast({
						icon:'none',
						title: err.data.msg
					})
					return;
					// this.$message(err.data.msg);
				}
				);
			},
			
			active(e) {
				const path = this.$route.path;
				// const query = this.$route.query;
				if(path=='/'+e.url){
					return;
				}
				if(e.url.includes("http")){
					window.open(e.url, '_blank');
					// window.location.href = '';
				}
				else{
					this.$router.replace({
						path: e.url
					});
				}
			},
			active9(e) {
				// this.num =9;
				// console.log(this.num,222)
				const path = this.$route.path;
				// const query = this.$route.query;
				if(path=='/'+e.url){
					return;
				}
				if(e.url.includes("http")){
					window.open(e.url, '_blank');
					// window.location.href = '';
				}
				else{
					this.$router.replace({
						path: e.url
					});
				}
			},
			active10(e) {
				this.nums =10;
				console.log(this.nums,222)
				const path = this.$route.path;
				// const query = this.$route.query;
				if(path=='/'+e.url){
					return;
				}
				if(e.url.includes("http")){
					window.open(e.url, '_blank');
					// window.location.href = '';
				}
				else{
					this.$router.replace({
						path: e.url
					});
				}
			},
			open(name){
				this.$refs[name].open();
			},
			close(name){
				this.$refs[name].close();
			}
		}
	}
</script>

<style lang="scss">
	.login-box{
		width: 640px;
		min-height: 768px;
		background: #282627;
		box-shadow: 0px 0px 57px 0px rgba(239,131,18,0.15);
		text-align: center;
		.logos{
			width: 380px;
			height: 56px;
			margin: 48px auto;
		}
		.login_type{
			width: 541px;
			border-bottom: 1px solid #383838;
			padding:15px 0;
			margin: 0 auto;
			
			.login_text{
				width: 45px;
				height: 21px;
				font-size: 21px;
				font-weight: 400;
				color: #9E9E9E;
				line-height: 32px;
				padding:25px 22px;
				cursor: pointer;
			}
			.check{
				font-size: 24px;
				color: #FFFFFF;
			}
			
		}
		.login_descs{
			margin-top: 20px;
			height: 55px;
			font-size: 21px;
			font-weight: 400;
			color: #9E9E9E;
			text-align: center;
			padding: 0 60px;
			text-align: left;
		}
		.login_desc{
			margin-top: 20px;
			height: 55px;
			font-size: 21px;
			font-weight: 400;
			color: #9E9E9E;
			text-align: center;
			padding: 0 60px;
		}
		.login_bt{
			width: 85%;
			height: 53px;
			background: #383838;
			border-radius: 5px;
			line-height: 53px;
			margin: 0 auto;
			color: #9E9E9E;
			cursor: pointer;
			margin-top: 40px;
		}
		.login_bt:hover{
			background: #F48612;
			color: #ffffff;
		}
		.login_check{
			font-size: 19px;
			font-weight: 400;
			color: #9E9E9E;
			margin-top: 60px;
		}
		.login_code{
			width: 85%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin:0 auto
		}
		.login_checks{
			font-size: 19px;
			font-weight: 400;
			color: #9E9E9E;
			margin-top: 10px;
		}
		.uni-checkbox-input{
			border-radius: 100% !important;
		}
		.input{
			width: 81%;
			height: 53px;
			border: 1px solid #383838;
			border-radius: 5px;
			margin: 0 auto;
			color: #ffffff;
			margin-bottom: 25px;
			text-align: left;
			padding: 0 2%;
		}
		.input2{
			width: 60%;
			height: 53px;
			border: 1px solid #383838;
			border-radius: 5px;
			color: #ffffff;
			padding: 0 2%;
			text-align: left;
		}
		.dynacode{
			width: 30%;
			height: 53px;
			background: #F48612;
			border-radius: 5px;
			color: #ffffff;
			line-height: 53px;
			cursor: pointer;
		}
		.input:hover{
			border: 1px solid #F48612;
		}
		.input2:hover{
			border: 1px solid #F48612;
		}
		.placeholder-class{
			font-size: 21px;
			font-weight: 400;
			color: #9E9E9E;
			text-align: left;
		}
	}
	.header_top{
		padding: 0 300px;
		height: 36px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #2b2b29;
		color: #D5C6B2;
		font-size: 13px;
		letter-spacing: 1px;
		.top_r{
			width: 320px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			 flex-direction: row-reverse; /* 从右到左排列 */
			letter-spacing: 0px;
			font-size: 15px;
			p{
				cursor: pointer;
			}
		}
	}
	.headers {
	    padding: 0 2%;
		height: 300px;
		margin: 0 auto;
	    display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #140D08;
		.header-titles {
			font-size: 36px;
			font-weight: bold;
			line-height: 100px;
			 display: flex;
			align-items: center;
			.logos{
				width: 1000px;
				height: 125px;
				cursor: pointer;
			}
		}
	}
	.header {
        padding: 0 300px;
		height: 70px;
		margin: 0 auto;
        display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #140D08;
		.header-title {
			font-size: 36px;
			font-weight: bold;
			line-height: 100px;
			 display: flex;
			align-items: center;
			.logo{
				width: 310px;
				height: 37px;
				cursor: pointer;
			}
		}
		.apply{
			width: 113px;
			height: 34px;
		    background-image: url('../../static/img/home/apply.png');
			background-size: 100%;
			font-size: 15px;
			color: #070707;
			line-height: 34px;
			text-align: center;
			font-weight: bold;
			cursor: pointer;
		}
		
		&>ul {
			// float: right;
            // margin-left: 30px;
			&>li {
				list-style: none;
				float: left;
				position: relative;

				a,
				span {
					display: inline-block;
					padding: 0 14px;
					font-weight: 400;
					line-height: 100px;
					font-size: 16px;
					text-decoration: none;
					color: #ffffff;
				}
			}

			.active-hover {
				a,
				span {
					font-weight: bold;
					color: #F48612;
				}
				
				// &::before {
				// 	content: '';
				// 	width: calc(100% - 40px);
				// 	height: 4px;
				// 	background-color: #1ab44d;
				// 	position: absolute;
				// 	left: 20px;
				// 	bottom: 20px;
				// }
			}
		}

		.header-right {
			padding: 0 30px;
			font-size: 40px;
			height: 100px;
			line-height: 100px;
			float: right;
			.icon-caidan{
				color: #ffffff;
			}
		}
	}
	.drawer-box{
		width: 30vw;
		height: 100vh;
		background-color: #FFFFFF;
		&>ul {
			width: 100%;
			float: right;
		
			&>li {
				width: 100%;
				list-style: none;
				float: left;
				position: relative;
				text-align: center;
				a,
				span {
					display: inline-block;
					padding: 0 20px;
					line-height: 150px;
					font-size: 20px;
					text-decoration: none;
					color: #000;
				}
			}
		
			.active-hover {
				a,
				span {
					font-weight: bold;
					color: #F48612;
				}
				&::before {
					content: '';
					width: calc(100% - 40px);
					height: 4px;
					background-color: #F48612;
					position: absolute;
					left: 20px;
					bottom: 0;
				}
			}
		}
	}
	
	
</style>
