<template>
	<div id="mars3dContainer" class="mars3d-container"></div>
	<!-- 图层添加 -->
	<div class="layer-add">
		<span class="layer-add-title">图层添加</span>
		<el-scrollbar style="margin-top: 10px" :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }">
			<el-tree
				:default-expanded-keys="expandedKeys"
				:default-checked-keys="checkedKeys"
				:data="treeData"
				:props="props"
				show-checkbox
				@check-change="handleCheckChange"
			/>
		</el-scrollbar>
	</div>
	<div class="option-list">
		<span class="option-list-title">功能选择</span>
		<el-scrollbar style="margin-top: 10px" :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }">
			<div class="option-list-item">
				<span>雨天气：</span>
				<div class="item-classify">
					<div class="item-classify-item">
						<span>是否开启：</span>
						<el-switch v-model="yuProperty.enabled" @change="e => yuOperate(e, 'enabled')" />
					</div>
					<div class="item-classify-item">
						<span>粒子速度：</span>
						<el-slider v-model="yuProperty.speed" @change="e => yuOperate(e, 'speed')" />
					</div>
					<div class="item-classify-item">
						<span>粒子大小：</span>
						<el-slider v-model="yuProperty.size" @change="e => yuOperate(e, 'size')" />
					</div>
					<div class="item-classify-item">
						<span>粒子方向：</span>
						<el-slider v-model="yuProperty.direction" @change="e => yuOperate(e, 'direction')" />
					</div>
				</div>
			</div>
			<div class="option-list-item">
				<span>雾天气：</span>
				<div class="item-classify">
					<div class="item-classify-item">
						<span>是否开启：</span>
						<el-switch v-model="wuProperty.enabled" @change="e => wuOperate(e, 'enabled')" />
					</div>
					<div class="item-classify-item">
						<span>雾颜色：</span>
						<el-color-picker v-model="wuProperty.color" @change="e => wuOperate(e, 'color')" />
					</div>
					<div class="item-classify-item">
						<span>近距离：</span>
						<el-slider v-model="wuProperty.fogByDistanceX" @change="e => wuOperate(e, 'fogByDistanceX')" />
					</div>
					<div class="item-classify-item">
						<span>远距离：</span>
						<el-slider v-model="wuProperty.fogByDistanceZ" @change="e => wuOperate(e, 'fogByDistanceZ')" />
					</div>
				</div>
			</div>
			<div class="option-list-item">
				<span>雪天气：</span>
				<div class="item-classify">
					<div class="item-classify-item">
						<span>是否开启：</span>
						<el-switch v-model="xueProperty.enabledSnow" @change="e => xueOperate(e, 'enabled')" />
					</div>
					<div class="item-classify-item">
						<span>下雪速度：</span>
						<el-slider v-model="xueProperty.speed" @change="e => xueOperate(e, 'speed')" />
					</div>
				</div>
			</div>
			<div class="option-list-item">
				<span>积雪效果：</span>
				<div class="item-classify">
					<div class="item-classify-item">
						<span>是否开启：</span>
						<el-switch v-model="xueProperty.enabledCover" @change="e => jxOperate(e, 'enabled')" />
					</div>
					<div class="item-classify-item">
						<span>积雪程度：</span>
						<el-slider v-model="xueProperty.alpha" :step="0.1" :max="1" @change="e => jxOperate(e, 'alpha')" />
					</div>
				</div>
			</div>
			<div class="option-list-item">
				<span>日照效果：</span>
				<div class="item-classify">
					<div class="item-classify-item">
						<span>日期选择：</span>
						<el-date-picker v-model="sunProperty.timeVal" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
					</div>
					<div class="item-classify-item">
						<span>时间选择：</span>
						<el-slider v-model="sunProperty.currDate" :min="0" :max="1440" :step="1" @change="timeChange" />
					</div>
					<div class="item-classify-item">
						<span>当前时间：</span>
						<span>{{ sunProperty.timeVal }} {{ hours }} 时 {{ minutes }}分</span>
					</div>
				</div>
			</div>
		</el-scrollbar>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeMount, computed } from "vue";
//引入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 ConfigJson from "@/views/goverment/largeScreen/config.json";
const title = ref("");
const yuProperty = ref({
	enabled: false,
	speed: 10,
	size: 20,
	direction: 10
});
const wuProperty = ref({
	enabled: false,
	color: "#ffffff",
	fogByDistanceX: 100,
	fogByDistanceZ: 9000
});
const xueProperty = ref({
	enabledSnow: false,
	enabledCover: false,
	speed: 20,
	alpha: 0.6
});
const sunProperty = ref({
	timeVal: null,
	currDate: 420
});
const checkedKeys = ref<any[]>([]);
const expandedKeys = ref<any>([]);
const layersObj: any = {};
const treeData = ref<any>([]);
const props = {
	label: "title",
	children: "children"
};
const hours = computed(() => Math.floor(sunProperty.value.currDate / 60));
const minutes = computed(() => Math.floor(sunProperty.value.currDate / 60));
onMounted(async () => {
	// const configUrl = "http://182.90.224.147:6080/file/config/config.json";
	// const configUrl = "../config.json";
	// mars3d.Util.fetchJson({ url: configUrl }).then(data => {
	// 	console.log(data);
	// 	initMars3d(data.map3d);
	// });
	await initMars3d(ConfigJson.map3d);
	await initTree();
});
let map: any;
let rainEffect: any; // 雨天气
let fogEffect: any; // 雾天气
let snowEffect: any; // 雪天气
let snowCover: any; // 积雪
let shadows: any; // 日照效果
const initMars3d = (option: any) => {
	map = new mars3d.Map("mars3dContainer", option);
	// map.scene.moon.show = true; // 太阳
	// map.scene.sun.show = true; // 月亮
	rainEffect = new mars3d.effect.RainEffect({
		speed: 10,
		size: 20,
		direction: 10,
		enabled: false
	});
	fogEffect = new mars3d.effect.FogEffect({
		color: Cesium.Color.WHITE,
		fogByDistance: new Cesium.Cartesian4(100, 0.0, 9000, 0.9),
		enabled: false
	});
	snowEffect = new mars3d.effect.SnowEffect({
		enabled: false,
		speed: 10
	});
	snowCover = new mars3d.effect.SnowCoverEffect({
		enabled: false,
		// layer: tiles3dLayer, // 如果传值3dtiles图层，只对该模型生效
		alpha: 0.6,
		maxHeight: 8000 // 大于此高度后不显示
	});
	shadows = new mars3d.thing.Shadows({
		multiplier: 1600
	});
	map.addEffect(rainEffect);
	map.addEffect(fogEffect);
	map.addEffect(snowEffect);
	map.addEffect(snowCover);
	map.addThing(shadows);
};

const handleCheckChange = (e: any, isCheck: any) => {
	const layer = layersObj[e.key];

	if (layer) {
		if (!layer.isAdded) {
			map.addLayer(layer);
		}

		// 处理子节点
		if (e.children && e.children.length) {
			renderChildNode(isCheck, e.children);
		}

		if (isCheck) {
			layer.show = true;
			layer.flyTo();
		} else {
			layer.show = false;
		}
	}
};
const renderChildNode = (isCheck: any, children: any[]) => {
	children.forEach(child => {
		const layer = layersObj[child.key];
		if (layer) {
			if (!layer.isAdded) {
				map.addLayer(layer);
			}

			if (isCheck) {
				layer.show = true;
			} else {
				layer.show = false;
			}
			if (child.children) {
				renderChildNode(isCheck, child.children);
			}
		}
	});
};
// 初始化树结构
const initTree = () => {
	const layers = map.getLayers({
		basemaps: true, // 是否取config.json中的basempas
		layers: true // 是否取config.json中的layers
	});
	console.log(layers);
	// 遍历出config.json中所有的basempas和layers
	for (let i = layers.length - 1; i >= 0; i--) {
		const layer = layers[i];

		if (layer && layer.pid === -1) {
			const node: any = {
				title: layer.name,
				key: layer.id,
				id: layer.id,
				pId: layer.pid,
				group: layer.type === "group"
			};
			node.children = findChild(node, layers);
			treeData.value.push(node);
			layersObj[layer.id] = layer;
			expandedKeys.value.push(node.key);
		}
	}
};
const findChild = (parent: any, list: any[]) => {
	return list
		.filter((item: any) => item.pid === parent.id)
		.map((item: any) => {
			const node: any = {
				title: item.name,
				key: item.id,
				id: item.id,
				pId: item.pid,
				group: item.type === "group"
			};
			layersObj[item.id] = item;
			expandedKeys.value.push(node.key);

			if (item.hasEmptyGroup || item.hasChildLayer) {
				node.children = findChild(node, list);
			}
			if (item.isAdded && item.show) {
				checkedKeys.value.push(node.key);
			}
			return node;
		});
};

// 雨天气操作
const yuOperate = (e: any, label: any) => {
	console.log(e, label);
	rainEffect[label] = e;
};
// 雾天气操作
const wuOperate = (e: any, label: any) => {
	console.log(e, label);
	switch (label) {
		case "enabled":
			fogEffect[label] = e;
			break;
		case "color":
			fogEffect.color = Cesium.Color.fromCssColorString(e);
			break;
		case "fogByDistanceX":
			fogEffect.fogByDistance.x = e;
			break;
		case "fogByDistanceZ":
			fogEffect.fogByDistance.z = e;
			break;
	}
};
// 雪天气操作
const xueOperate = (e: any, label: any) => {
	console.log(e, label);
	snowEffect[label] = e;
};
// 积雪操作
const jxOperate = (e: any, label: any) => {
	console.log(e, label);
	snowCover[label] = e;
};
// 日照时间操作
const timeChange = (e: any) => {
	const dateTime = new Date(`${sunProperty.value.timeVal} ${hours.value}:${minutes.value}:00`);
	shadows.time = dateTime;
};
</script>

<style lang="scss" scoped>
.mars3d-container {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	overflow: hidden;
	position: relative;
}
.layer-add {
	width: 200px;
	height: 350px;
	position: absolute;
	right: 20px;
	top: 20px;
	background-color: white;
	padding: 20px;
	&-title {
		font-size: 16px;
		font-weight: 700;
	}
}
.option-list {
	width: 200px;
	height: 350px;
	position: absolute;
	right: 20px;
	top: 450px;
	background-color: white;
	padding: 20px;
	display: flex;
	flex-direction: column;
	&-title {
		font-size: 16px;
		font-weight: 700;
	}
	&-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 10px;
		> span {
			font-size: 14px;
			font-weight: 700;
		}
		.item-classify {
			display: flex;
			flex-direction: column;
			&-item {
				display: flex;
				align-items: center;
				:deep() {
					.el-slider,
					.el-date-editor {
						width: 60% !important;
					}
				}
			}
		}
	}
}
:deep() {
	.cesium-viewer-toolbar {
		top: auto;
		bottom: 35px;
		left: 12px;
		right: auto;
	}

	.cesium-toolbar-button img {
		height: 100%;
		vertical-align: middle;
	}

	.cesium-viewer-toolbar > .cesium-toolbar-button,
	.cesium-navigationHelpButton-wrapper,
	.cesium-viewer-geocoderContainer {
		margin-bottom: 5px;
		float: left;
		clear: both;
		text-align: center;
	}

	.cesium-button {
		background-color: rgba(23, 49, 71, 0.7);
		border: none;
		color: #ffffff;
		fill: #e6e6e6;
		line-height: 32px;
	}

	.cesium-button:hover {
		background-color: rgba(0, 138, 255, 0.7);
		box-shadow: none;
		border: none;
	}

	/**cesium åº•å›¾åˆ‡æ¢é¢æ¿*/
	.cesium-baseLayerPicker-dropDown {
		bottom: 0;
		left: 40px;
		max-height: 700px;
		margin-bottom: 5px;
		background-color: rgba(23, 49, 71, 0.7);
	}

	/**cesium å¸®åŠ©é¢æ¿*/
	.cesium-navigation-help {
		top: auto;
		bottom: 0;
		left: 40px;
		transform-origin: left bottom;
	}

	.cesium-navigation-help-instructions,
	.cesium-navigation-button {
		background-color: rgba(23, 49, 71, 0.8);
	}

	.cesium-navigation-button-selected,
	.cesium-navigation-button-unselected:hover {
		background-color: rgba(23, 49, 71, 1);
	}

	/**cesium äºŒç»´ä¸‰ç»´åˆ‡æ¢*/
	.cesium-sceneModePicker-wrapper {
		width: auto;
	}

	.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
		float: right;
		margin: 0 3px;
	}

	/**cesium POIæŸ¥è¯¢è¾“å…¥æ¡†*/
	.cesium-viewer-geocoderContainer .search-results {
		left: 0;
		right: 40px;
		width: auto;
		z-index: 9999;
	}

	.cesium-geocoder-searchButton {
		background-color: rgba(23, 49, 71, 0.8);
	}

	.cesium-viewer-geocoderContainer .cesium-geocoder-input {
		background-color: rgba(63, 72, 84, 0.7);
	}

	.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
		background-color: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
	}

	.cesium-viewer-geocoderContainer .search-results {
		background-color: rgba(23, 49, 71, 0.8);
	}

	/**cesium infoä¿¡æ¯æ¡†*/
	.cesium-infoBox {
		top: 50px;
		background: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
	}

	.cesium-infoBox-title {
		background-color: rgba(23, 49, 71, 0.8);
	}

	/**cesium ä»»åŠ¡æ çš„FPSä¿¡æ¯*/
	.cesium-performanceDisplay-defaultContainer {
		top: auto;
		bottom: 35px;
		right: 50px;
	}

	.cesium-performanceDisplay-ms,
	.cesium-performanceDisplay-fps {
		color: #fff;
	}

	/**cesium tilesetè°ƒè¯•ä¿¡æ¯é¢æ¿*/
	.cesium-viewer-cesiumInspectorContainer {
		top: 10px;
		left: 10px;
		right: auto;
	}

	.cesium-cesiumInspector {
		background-color: rgba(23, 49, 71, 0.8);
	}

	/**è¦†ç›–mars3då†…éƒ¨æŽ§ä»¶çš„é¢œè‰²ç­‰æ ·å¼*/
	.mars3d-compass .mars3d-compass-outer {
		fill: rgba(23, 49, 71, 0.8);
	}

	.mars3d-contextmenu-ul,
	.mars3d-sub-menu {
		background-color: rgba(23, 49, 71, 0.8);
	}

	.mars3d-contextmenu-ul > li > a:hover,
	.mars3d-sub-menu > li > a:hover,
	.mars3d-contextmenu-ul > li > a:focus,
	.mars3d-sub-menu > li > a:focus,
	.mars3d-contextmenu-ul > li > .active,
	.mars3d-sub-menu > li > .active {
		background-color: var(--mars-hover-btn-bg, #3ea6ff);
	}

	.mars3d-contextmenu-ul > .active > a,
	.mars3d-sub-menu > .active > a,
	.mars3d-contextmenu-ul > .active > a:hover,
	.mars3d-sub-menu > .active > a:hover,
	.mars3d-contextmenu-ul > .active > a:focus,
	.mars3d-sub-menu > .active > a:focus {
		background-color: var(--mars-hover-btn-bg, #3ea6ff);
	}

	/* Popupæ ·å¼*/
	.mars3d-popup-color {
		color: var(--mars-text-color, #ffffff);
	}

	.mars3d-popup-background {
		background: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
	}

	.mars3d-tooltip {
		color: var(--mars-text-color, #ffffff);
		background: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
		border: 1px solid var(--mars-bg-base, rgba(63, 72, 84, 0.9));
	}

	.mars3d-tooltip-top:before {
		border-top-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
	}

	.mars3d-tooltip-bottom:before {
		border-bottom-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
	}

	.mars3d-tooltip-left:before {
		border-left-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
	}

	.mars3d-tooltip-right:before {
		border-right-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
	}

	.mars3d-template-content label {
		padding-right: 6px;
	}

	.mars3d-template-titile {
		color: var(--mars-base-color, #ffffff);
		border-bottom: 1px solid var(--mars-hover-btn-bg, #3ea6ff);
	}

	.mars3d-template-titile a {
		font-size: 16px;
		color: var(--mars-msg-title-color, #c7d3dd);
	}

	.mars3d-popup-btn-custom {
		padding: 3px 10px;
		border: 1px solid #209ffd;
		background: #209ffd1c;
	}

	.mars3d-popup-content {
		margin: 15px;
	}

	.mars3d-divGraphic:hover {
		z-index: 999 !important;
	}
}
</style>
