<template>
    <div style="height: 100%;display: flex;">
		<iframe class="dz-iframe" :src="path" frameborder="0" style="flex: 1;width: 100%;"></iframe>
	</div>
</template>

<script>
export default {
	name: 'DzSys',
	data() {
		return {
			// baseUrl: "http://114.115.138.98:8300/#",
			baseUrl: "/dzsys/index.html#",
			path: ''
		}
	},
	created() {
		this.path = this.getUrl();
	},
	mounted() {
		const iframes = this.$el.querySelectorAll('.dz-iframe')
		iframes.forEach(iframe => {
			if (iframe.attachEvent) {
				iframe.attachEvent("onload", () => {
					this.hideHeadAndSideMenu(iframe)
				})
			} else {
				iframe.onload = () => {
					this.hideHeadAndSideMenu(iframe)
				}
			}
		})
	},
	methods: {
		// 有跨域问题时，获取不到
		hideHeadAndSideMenu(iframe) {
			const header = iframe.contentWindow.document.querySelectorAll('.ant-layout .ant-layout-header');
			if (header.length) {
				header[0].style.display= 'none';
			}
			const sideMenu = iframe.contentWindow.document.querySelectorAll('.ant-layout .sideMenu.ant-layout-sider');
			if (sideMenu.length) {
				sideMenu[0].style.display= 'none';
			}
		},
		getUrl() {
			if (this.$route.params.path === 'login') {
				return this.baseUrl + "/login"
			} else {
				return this.baseUrl + "/business/" + this.$route.params.path
			}
		}
	}
}
</script>

<style>
/* 不生效 */
.dz-iframe .ant-layout .ant-layout-header,
.dz-iframe .ant-layout .ant-layout-header .sideMenu.ant-layout-sider {
	display: none;
}
</style>