<template>
	<div class="bottom-menu-normal">
		<div v-for="(fastMenu,index) in fastMenu" :key="index" class="btm-m-con"
			@click.stop="showDialog(fastMenu.click)">
			<a><i :class="fastMenu.icon"></i>{{fastMenu.name}}
				<div v-if="showChild && fastMenu.click == 'layerSwitching'" class="nav-child">
					<el-button type="primary" @click.stop="choseLayerSwitching('http://121.37.83.100:8090/iserver/services/map-sipingshi/rest/maps/tiedong_lunkuo')" class="nav-child-btn" plain>铁东</el-button>
					<el-button type="primary" @click.stop="choseLayerSwitching('http://121.37.83.100:8090/iserver/services/map-sipingshi/rest/maps/tiexi_lunkuo')" class="nav-child-btn" plain>铁西</el-button>
<!--					<el-button type="danger" icon="el-icon-close" style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"-->
<!--						@click.stop="closeChild"></el-button>-->
				</div>
			</a>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				eventLocationVisible: false,
				showChild: false,
				fastMenu: [{
						name: '事件定位',
						icon: 'iconfont sj-icon-sjdw',
						click: 'eventLocation'
					},
					{
						name: '图层切换',
						icon: 'iconfont sj-icon-tcqh',
						click: 'layerSwitching'
					},
					{
						name: '测量工具',
						icon: 'iconfont sj-icon-clgj',
						click: 'editableLayers'
					},
					{
						name: '林班',
						icon: 'iconfont sj-icon-lbzy',
						click: ''
					},
					
					{
						name: '林场',
						icon: 'iconfont sj-icon-lczy',
						click: ''
					},
					{
						name: '电视墙',
						icon: 'el-icon-s-grid',
						click: 'TVWall'
					}
				]
			}
		},
		methods: {
			showDialog(click) {
				window.showDialog(click)
			},
      choseLayerSwitching(url) {
        window.choseLayerSwitching(url);
			},
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';

	.bottom-menu-normal {
		max-width: 90%;
		padding: 0 3rem;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		z-index: 999;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
		background-size: cover;

		.btm-m-con {
			position: relative;
			color: $inBlue;
			font-size: .5rem;
			padding: 1rem 1.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			-webkit-transform: translateY(0);
			transform: translateY(0);
			transition: all 0.2s ease-in-out;
			cursor: pointer;
			white-space: nowrap;

			i {
				font-size: 1rem;
				color: $inBlue;
				text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
				margin-right: 0.2rem;
			}

			.nav-child {
				position: absolute;
				top: -3.3rem;
				border: 1px solid saddlebrown;
				padding: .5rem;
				-moz-border-radius-topleft: 0;
				-moz-border-radius-bottomright: 0;
				background-color: $barBgc;
				box-shadow: $barShadow;
				border: 1px $barBorder;
				left: 50%;
				transform: translateX(-50%);
				.nav-child-btn{
					padding: .2rem;
				}

			}
		}

		.btm-m-con:hover {
			text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
			-webkit-transform: translateX(0.2rem);
			transform: translateX(0.2rem);
			transition: all 0.2s ease-in-out;

			i {
				color: $inBlueHover;
				text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
			}
		}

	}
</style>
