<template>
	<div class="tab-container" :style="{ height: tabHeight + 'px' }">
		<iframe
			:src="href_token"
			class="iframe-url"
			width="100%"
			frameborder="no"
			border="0"
			marginwidth="0"
			marginheight="0"
			scrolling="auto"
			allowtransparency="yes"
			runat="server"
		></iframe>
	</div>
</template>

<script>
import haloseeUiUtil from '@/halosee-ui-util.js';

export default {
	name: 'templateHref',
	props: ['alias', 'href'],
	data() {
		return {
			tabHeight: 800,
			href_token: '', //url菜单地址
		};
	},
	watch: {
		href: {
			handler(newVal) {
				if (newVal) {
					if (newVal.indexOf('?token=') == -1) {
						this.href_token =
							newVal + '?token=' + this.$store.state.login.currentUser.token;
					} else {
						this.href_token = newVal;
					}
          this.href_token = haloseeUiUtil.replaceBaseUrl(this.href_token);
				}
			},
			deep: true,
			immediate: true,
		},
	},
	mounted() {
		// this.open()
		console.log(
			'flow_table_title',
			$('.el-main').height(),
			$('.flow_table_title').innerHeight()
		);
		this.tabHeight =
			$('.el-main').height() - $('.flow_table_title').innerHeight() - 30;
	},
	methods: {
		open() {
			window.open(this.href_token, '_blank');
		},
	},
	beforeRouteEnter(to, from, next) {
		next(vm => {
			let Base64 = require('js-base64').Base64;
			if (vm.$route.query.href) {
				if (vm.href && vm.href.indexOf('?token=') == -1) {
					vm.href =
						Base64.decode(vm.$route.query.href) +
						'?token=' +
						vm.$store.state.login.currentUser.token;
				} else {
					vm.href = Base64.decode(vm.$route.query.href);
				}
			}
		});
	},
	beforeRouteUpdate(to, from, next) {
		next();
		const vm = this;
		let Base64 = require('js-base64').Base64;
		if (vm.href && vm.href.indexOf('?token=') == -1) {
			vm.href =
				Base64.decode(vm.$route.query.href) +
				'?token=' +
				vm.$store.state.login.currentUser.token;
		} else {
			vm.href = Base64.decode(vm.$route.query.href);
		}
	},
};
</script>

<style lang="scss" scoped>
.iframe-url {
	height: 100%;
	background-color: #fff;
}
.tab-container {
	height: 100%;
	background-color: #fff;
	padding: 10px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
}
.tab-container h3 {
	color: #dbd8d4;
	font-size: 18px;
}
</style>
