<template>
	<div class="main-content">
		<div class="main-content-title">
			<span>地图打印</span>
			<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
		</div>
		<div class="btn-operate">
			<el-button type="primary" @click="downLoadImg">存为图片</el-button>
			<el-button type="primary" @click="printImg">打印</el-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
//引入cesium基础库
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "mars3d-cesium";
//导入mars3d主库
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import { GlobalStore } from "@/stores";
import printJS from "print-js";
const importRef = ref();
const globalStore = GlobalStore();
const props = defineProps(["mapInstance"]);
const emits = defineEmits(["hiddenConfim"]);
let map: any = props.mapInstance;
onMounted(() => {});
// 打印
const printImg = () => {
	printJS({
		printable: "mars3dContainer",
		type: "html",
		targetStyles: ["*"],
		maxWidth: 2500,
		style: "@page{size:auto; margin: 0;}" + "@media print { @page {size: landscape } }"
	});
};
// 导出图片
const downLoadImg = () => {
	map.expImage();
};
const closeDiv = () => {
	emits("hiddenConfim");
};
onUnmounted(() => {
	map = null;
});
</script>

<style scoped lang="scss">
@mixin flex {
	display: flex;
	align-items: center;
}
// 菜单弹框出现动画
@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
.main-content {
	position: absolute;
	top: 142px;
	right: 28px;
	padding-bottom: 10px;
	background-image: none !important;
	border: 1px solid #008aff70;
	border-radius: 2px !important;
	background-color: rgba(23, 49, 71, 0.8);
	width: 300px;
	box-shadow: 0 4px 15px 1px #02213bb3;
	animation: fadeIn 1s;
	&-title {
		@include flex;
		width: 100%;
		height: 40px;
		padding: 0 5px 0 10px;
		background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		span {
			font-size: 16px;
			color: #0089fe;
			margin-right: auto;
		}
		:deep() {
			.el-icon {
				cursor: pointer;
			}
		}
	}
	.btn-operate {
		@include flex;
		justify-content: center;
		margin-top: 10px;
		:deep() {
			.el-button {
				margin-left: 10px;
			}
		}
	}
}
</style>
