<!-- 试用用户 -->
<template>
	<div class="userTrial">
		<p class="userTitle">可试用产品</p>
		<div class="trialBox">
			<div class="felx">
				<!-- 一行1 -->
				<div class="flex_item" v-for="item in items" :key="item.key" :label="item.name" :value="item.key">
					<div>
						<div class="leftC">
							<div :class="['productTi',{'grays':item.isUsed == 'N'}]">
								<!-- {{item.name}} -->
								<!-- <span class="title"> -->
									<el-tooltip class="item" :disabled= "item.name.length < 32 ? true : false" effect="dark" :content="item.name" placement="top">
										<span class="title">{{item.name}}</span>
									</el-tooltip>
								<!-- </span> -->
								<span v-if="item.isUsed == 'Y' && item.startingDate != null">试用剩余时间: {{item.surplusTime}}</span>
							</div>
							<div :class="['pattern',{'grays':item.isUsed == 'N'}]">
								<span>服务模式 :</span>
								<span :class="['type',{'grays':item.isUsed == 'N'}]">{{item.accessTypeMsg}}</span>
							</div>
						</div>
						<div class="endAg" v-if="item.isUsed == 'N'"><img src="../../images/trial_end.png" /></div>
					</div>
					<div calss="clear"></div>
					<div class="userBtn">
						<button class="trialBtn grayto" v-if="item.isUsed == 'N'">试用</button>
						<button class="trialBtn cur" v-else-if="item.isUsed == 'Y'" @click="trialOpen(item.id)">试用</button>
						<!-- <button class="trialBtn cur" v-else-if="item.isUsed == 'Y' && item.appKeyId != null" @click="trialUrl(item.trialUrl,item.appKeyId,item.appKeySecret)">试用</button> -->
						<button class="trialOpen" @click="toOpen()">咨询开通</button>
					</div>
				</div> <!-- 一行1 -->
			</div>
		</div>
	</div>
</template>
<script>
	import userApi from '@api/user.js';
	import encode from '@api/base64.js';
	import '@api/utils.js';

	export default {
		template: '',
		data() {
			return {
				isGray: false,
				isGrayTo: false,
				items: [],
			}
		},
		created: function() {
			this.getConsoleOnTrial();
		},
		methods: {
			getConsoleOnTrial() {
				userApi.getConsoleOnTrial().then((res) => {
					if (res.data.code == '0') {
						this.items = res.data.data;
					}
				}).catch((error) => {
					console.log(error)
				});
			},
			contrast(o){
				console.log(o)
			},
			toOpen() {
				this.$router.push({
					path: 'YH-GDFW'
				});
			},
			/*openWin(url){//创建a标签打开新窗口
				let abtn = document.createElement('a');
				abtn.id = "openPro";
				abtn.href = url;
				abtn.target = "_blank";
				document.body.appendChild(abtn);
				// document.getElementById("openPro").click();
				if(document.all){//IE
					document.getElementById("openPro").click();
				}else {//其他浏览器
					let e = document.createEvent("MouseEvents");
					e.initEvent("click",true,true);
					document.getElementById("openPro").dispatchEvent(e);
				}
				document.body.removeChild(abtn);
			},*/
			trialOpen(proId) {
				//试用接口
				const params = {
					'productId' : proId
				}
				let newWindow = window.open();
				const tempTime = new Date().getTime().toString();//加密时间戳
    		const securityCode = encode(tempTime);
				userApi.openUpOnTrial(params).then((res) => {
					if (res.data.code == '0') {
						const result = res.data.data;

						const appKeyId = result.appKeyId;
						const appKeySecret = result.appKeySecret;
						const trialUrl = result.trialUrl;
						const linkURL = trialUrl.indexOf("?")>-1? trialUrl + "&appI="+appKeyId+"&appS="+appKeySecret + "&code=" + securityCode : trialUrl + "?appI="+appKeyId+"&appS="+appKeySecret + "&code=" + securityCode;
						
						newWindow.location.href = linkURL;
						// window.open(openUrl); //此方式会遭到拦截，故改成a标签形式 
						// this.openWin(openUrl); //a标签形式的形式也会被拦截
						 
						this.$message({
							message: '试用成功！',
							type: 'success',
							duration:1000,
							onClose: function () {
								this.items=[];
								this.getConsoleOnTrial()
							}.bind(this)
						});
						
					}else{
						newWindow.close();
						this.$message({
							message: res.data.msg,
							type: 'warning',
							duration:1000,
							onClose: function () {
								window.location.reload();
							}.bind(this)
						})
						
					}
				}).catch((error) => {
					console.log(error)
				});
			},
		}
	};
</script>
<style lang="less">
	html {
		min-width: 1280px;
	}

	.el-container[data-v-2c8bad12] {
		height: 100%;
	}

	.userTrial {
		/*margin-left: 20px !important;
		min-width: 1127px;*/
		display: inline-block;
		.userTitle {
			margin: 20px 0 15px 20px;
			font-size: 14px;
			color: #999;
		}

		.trialBox {
			width: 100%;

			.felx {
				width: 100%;
				display: flex;
				display: -webkit-flex;
				flex-wrap: wrap;
				-webkit-flex-wrap: wrap;
				flex-direction: row;

				.flex_item {
					// -webkit-box-flex: 1;
					// -webkit-flex: 1;
					// flex: 1;
					list-style-type: none;
					background: #fff;
					margin-left: 20px;
					width: 31%;
					min-width: 348px;
					max-width: 31%;
					margin-bottom: 20px;
					height: 150px;
					position: relative;
				}

			}
		}

		.trialCk {
			width: 47.9%;
			height: 150px;
			background: #fff;
			/*margin-left: 20 px;*/
			margin-right: 25px;
			margin-bottom: 20px;
			display: inline-block;
		}

		.productTi {
			width: 89%;
			font-size: 12px;
			padding-left: 20px;
			margin-top: 15px;
			height: 36px;
			display:flex;
			justify-content: space-between;
			.title{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				font-size: 14px;
				height: 36px;
				overflow: hidden;
				font-weight: bold;
				color: #000;
			}
		}

		.pattern {

			/*margin-top: 20 px;*/

			span {
				display: block;
				font-size: 12px;
				margin-left: 20px;
			}

			.type {
				color: #1774f0;
				font-size: 12px;
				margin-top: 10px;
				margin-bottom: 20px;
			}

		}

		.userBtn {
			height: 44px;
			line-height: 44px;
			border-top: 1px solid #c9c9c9;
			text-align: right;
			position: absolute;
			bottom: 0;
			width: 100%;
		}

		.trialBtn {
			width: 74px;
			height: 26px;
			border: 1px solid #1774f0;
			background: #fff;
			color: #1774f0;
			font-size: 12px;
			-webkit-transform: scale(0.9);
			border-radius: 4px;
			outline: none;
			// cursor: pointer;
		}

		.trialOpen {
			width: 70px;
			height: 24px;
			border: 0px;
			background: #1774f0;
			color: #fff;
			border-radius: 4px;
			font-size: 12px;
			margin-right: 20px;
			margin-left: 10px;
			outline: none;
			cursor: pointer;
		}

		.el-col {
			border-radius: 4px;
			margin-right: 20px;
			padding: 0 !important;
			margin-right: 30px;
		}

		.bg-purple-dark {
			background: #99a9bf;
		}

		.bg-purple {
			background: #d3dce6;
		}

		.bg-purple-light {
			background: #e5e9f2;
		}

		.grid-content {
			border-radius: 4px;
			min-height: 36px;
		}

		.grays {
			color: #aaa !important;
		}

		.grayto {
			color: #aaa !important;
			border: 1px solid #aaa !important;
			outline: none;
		}

		.clear {
			clear: both;
		}

		.endAg {
			display: inline-block;
			float: right;
			margin-top: -90px;
			margin-right: 15px;

			img {
				width: 50px;
				height: 50px;
				display: inline-block;
			}
		}
    /*.endDate {
    			display: inline-block;
    			float: right;
    			margin-top: 15px;
    			margin-right: 15px;
					font-size: 12px;
					color: #424243;
    		}*/
		.leftC {
			width: 100%;
			float: left;
		}
		.cur{
			cursor: pointer;
		}
	}
</style>
