<template>
	<view>
		<match-media :min-width="900">
			<view class="header_top">
				<view style="color: #7e541f;">孵化精品游戏 <text style="margin-left: 10px;">助力企业发展</text></view>
				<view class="top_r">
					<p @tap="active({url: 'asset'})">资产确权</p>
					<p @tap="active({url: 'blockchainquery'})">资产核验</p>
					<p @tap="active({url:'https://data.scszsj.com/#/'})">数字大屏</p>
					<p @tap="active({url: 'game'})">资产中心</p>
					<p @tap="active({url: 'news'})">关于我们</p>
					<p @tap="active({url: 'login'})" v-if="!token">登录</p>
					<p v-if="token"><text style="margin-right: 10px;color: #FF8B29;" @tap="active({url: 'member'})">个人中心</text>  |  <text @tap="loginout()"  style="margin-left: 10px;">退出</text></p>
				</view>
				 
			</view>
			<view class="header">
				<view class="header-title">
					<image class="logo" src="../../static/img/home/dlogo.png" @tap="goPath('/')"></image>
				</view>
				<ul>
					<li v-for="(item,index) in list" class="pointer" :class="{'active-hover':num==index}" :key="index" >
						<a @tap="active(item)">{{item.text}}</a>
					</li>
				</ul>
				<view class="apply" @tap="active({url: 'apply'})">
					立即免费申请
				</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>
		
	</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.token = uni.getStorageSync('token');
			// this.num ='';
			this.nums ='';
			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()}`; // 防止缓存
			    },
			loginout(){
				uni.clearStorageSync();
				this.token = "";
				uni.showToast({
					icon:'none',
					title: '退出成功',
					duration:1500
				})
				setTimeout(() => {
					uni.reLaunch({
					        url: '/pages/index' // 替换为你实际的首页路径
					    });
				   // this.$router.replace({
				   // 	path: '/'
				   // });
				}, 1500);
				
			},
			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: 42%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			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;
					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>
