
<!-- 
/**
  * 表单通用组件
  *	@example1: 
		1, 引入
			import Slider from '@/components/Slider';

		2, 注册
			
		
		3, 创建
			<Carousel
				ref="Carousel" 
			/>

  * @author: Kimber
  * @createtime: 2021/12/21(周二)
  */
-->
<template>
	<div class="center-flx">
		<nav v-if="list.length > 1">
			<a v-for="(child, i) in list" :class="{'actv': viewActive === i}" @click="navEvent(i, child.type)">{{child.sumtitle}}</a>
		</nav>
		<div class="b2a2_a" id="agentFigure">
			<div class="list-wrap" v-for="(child, i) in list" :class="{'show':viewActive === i}">
				<div class="b2a2_a1" v-if="child.type === 't_15'" >
					<div id="figure" class="figure">
						<div class="img-box" id="pictureArea">
							<img id="drawingImg">
						</div>
						<div id="pointsLayer" class="cview_ctn wkk-ctn" :data-index="i" :class="child.className" :data-item="JSON.stringify(child)" :id="child.id">
							<ul></ul>
						</div>
					</div>
				</div>
				<div v-else>
					<div class="cview_ctn ctn-absfull" :data-index="i" :class="child.className" :data-item="JSON.stringify(child)" :id="child.id">
						<EZUIKitJs ref="EZUIKit" selectSeat="none" autoPlayer="false"/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
//import {Carousel, CarouselItem} from 'element-ui';
//import cuAmap from '@/components/AMap';
import EZUIKitJs from '@/components/EZUIKitJs'

export default {
	components: { EZUIKitJs },
	data() {
		return {
			list:[],
			Cache:{
			},
			config:{
			},
			amapinfo:{
				zoom:6,
				//longitude: 120.651884,
				//latitude: 36.962533,
			},
			viewActive:0,
			/* gis:{
				isShow:0,
			}, */
		}
	},
	props:{
	},
	beforeCreate(){
	},
	created(){
	},
	mounted() {
	},
	methods: {
		createViews(item){
			var that = this;
			this.list = item.children;this.config.interval = item.interval;
			var carouselCtn = this.$el.firstElementChild;
			return new Promise((resolve, reject) => {
				this.$nextTick(() => {
					var chartEls = carouselCtn.querySelectorAll('.cview_ctn');
					var panelList = this.setAttribute(chartEls);
					resolve(panelList);
				});
			})
		},
		setAttribute(charts){
			var panelList = [];
			for(var el of charts){
				var item = JSON.parse(el.dataset.item), type = item.type;
				var setData = type === 't_15' ? this.showPointView : this.setPlayInfo;
				panelList.push({info:this.Cache[type], el:el, item:item, type:type, setData:setData});
			}; return panelList;
		},
		showPointView(data, Tools, pageApi, initModule){
			var that = this;
			var agentFigure = this.$el.querySelector("#agentFigure");
			this.mapWidget = new qf.UI.pointCharts({
				chartsBox:this.$el.querySelector("#figure"),
				width:agentFigure.offsetWidth,
				height:agentFigure.offsetHeight,
				isRelieveAlarm:true,
				itemClick: function(id){
					var params = {equipno:id};
					that.$parent.openRelieveAlarm(params, function(){
						initModule()
					});
				},
			});
			this.mapWidget.setBackground(data.chart.picture);
			this.mapWidget.createPoints(data.points, data.chart);
		},
		setPlayInfo(param){
			var EZUIKit = this.$refs.EZUIKit[0];
			EZUIKit.playerToParam(param);
		},
		navEvent(id, key){
			this.viewActive = ~~id;
		},
	},
}
</script>
<style lang="scss" scope>
	.center-flx{
		height:100%;width:100%;
		display:flex;flex-direction:column;padding:.12rem 0.12rem 0.12rem;
		/* padding:0 0.08rem 0.08rem; */
		
		nav{
			height:.26rem;text-align:center;color:#89B7C6;font-size:0;user-select:none;margin-top:-0.12rem;
			a{
				display:inline-block;font-size:.15rem;line-height:.22rem;padding:0 .10rem;
				cursor:pointer;border-radius:.05rem .05rem 0 0;
			}
			.actv{color:#0CE2CE;background-color:#2271C6;};
		}
		
		.b2a2_a1{
			height:100%;width:100%;position:relative;
			>div{
				/* display:none; */
			}
			>div.show{display:block;}
			>div:first-child{}
			>div:last-child{}

			.figure{
				position:relative;top:0;left:0;height:100%;width:100%;
				user-select:none;font-family:serif;color:#444;
			}
			.figure{
				.img-box{
					position:absolute;top:0;left:0;height:100%;width:100%;z-index:10;
					img{display:block;border:0;max-height:100%;max-width:100%;}

					&:before {
						position: absolute;
						content: '';
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						box-shadow: inset 0rem 0rem 0.55rem 0.20rem rgba(0,31,60, .8);
					}
				}
				.wkk-ctn{
					position:absolute;top:0;left:0;height:100%;width:100%;z-index:20;
				}
			}
			.figure .wkk-ctn{position:absolute;top:0;left:0;height:100%;width:100%;}
			.figure .wkk-ctn li{position:absolute;}
			.figure .wkk-ctn li::marker{content:close-quote;}
			.figure .wkk-ctn li i{
				position:absolute;top:0;left:0;height:100%;width:100%;
				background-repeat:no-repeat;background-position:center bottom;background-size:contain;
			}
			.figure .wkk-ctn li.d_01 i{background-image:url('~@/assets/images/icon/d_01.png');}
			.figure .wkk-ctn li.d_02 i{background-image:url('~@/assets/images/icon/d_02.png');}
			.figure .wkk-ctn li.d_03 i{background-image:url('~@/assets/images/icon/d_03.png');}
			.figure .wkk-ctn li.d_04 i{background-image:url('~@/assets/images/icon/d_04.png');}
			.figure .wkk-ctn li.d_05 i{background-image:url('~@/assets/images/icon/d_05.png');}
			.figure .wkk-ctn li.d_06 i{background-image:url('~@/assets/images/icon/d_06.png');}
			.figure .wkk-ctn li.d_07 i{background-image:url('~@/assets/images/icon/d_07.png');}
			.figure .wkk-ctn li.d_08 i{background-image:url('~@/assets/images/icon/d_08.png');}
			.figure .wkk-ctn li>div{position:absolute;display:flex;align-items:center;justify-content:center;}
			.figure .wkk-ctn li>div .text{position:absolute;padding:0.0402rem;background-color:#fff;border-radius:0.0643rem;line-height:1.2;color:#1A688C;font-weight:bold;z-index:1;}

			.figure .wkk-ctn .text h4{text-align:center;color:#1284b3;font-weight:normal;}
			.figure .wkk-ctn .text dd{display:block;line-height:normal;margin-top:3px;}
			.figure .wkk-ctn .text dd:before{font-size:15px;margin-right:3px;}
			.figure .wkk-ctn .text .normal:before{font-size:13px;margin-right:1px;}
			.figure .wkk-ctn .text .red{background-color:red;color:#fff;}
			.figure .wkk-ctn .text .orange{background-color:orange;color:#fff;}
			.figure .wkk-ctn .text .yellow{background-color:#e8cb08;color:#fff;}
			.figure .wkk-ctn .text .blue{background-color:#0991FF;color:#fff;}
			.figure .wkk-ctn .text .relieve{cursor:pointer;}
			.figure .wkk-ctn .text .offline{color:#aaa;}
			.figure .wkk-ctn .text .online{color:#000;}
			/* .figure .wkk-ctn .text .el-icon-info{
				animation:twinkle 1100ms infinite;    
			} */
			.figure .wkk-ctn li>div .text:before{content:'';position:absolute;height:0;width:0;border-style:solid;border-width:0.0643rem;border-color:transparent;}
			.figure .wkk-ctn .up{top:0;left:0;height:0;width:100%;}
			.figure .wkk-ctn .up .text{bottom:0.0804rem;width:max-content;}
			.figure .wkk-ctn .up .text:before{bottom:-0.1287rem;left:50%;margin-left:-0.0643rem;border-color:#fff transparent transparent transparent;}
			.figure .wkk-ctn .down{bottom:0;left:0;height:0;width:100%;}
			.figure .wkk-ctn .down .text{top:0.0804rem;width:max-content;}
			.figure .wkk-ctn .down .text:before{top:-0.1287rem;left:50%;margin-left:-0.0643rem;border-color:transparent transparent #fff transparent;}
			.figure .wkk-ctn .left{top:0;left:0;height:100%;width:0;}
			.figure .wkk-ctn .left .text{right:0.0804rem;width:max-content;}
			.figure .wkk-ctn .left .text:before{top:50%;right:-0.1287rem;margin-top:-0.0643rem;border-color:transparent transparent transparent #fff;}
			.figure .wkk-ctn .right{top:0;right:0;height:100%;width:0;}
			.figure .wkk-ctn .right .text{left:0.0804rem;width:max-content;}
			.figure .wkk-ctn .right .text:before{top:50%;left:-0.1287rem;margin-top:-0.0643rem;border-color:transparent #fff transparent transparent;}

			@keyframes red {
				0% {opacity: 1.0;}
				12.5% {opacity: 0.2;}
				25% {opacity: 1.0;}
			}
			@keyframes orange {
				0% {opacity: 1.0;}
				10% {opacity: 0.2;}
				20% {opacity: 1.0;}
			}
			@keyframes yellow {
				0% {opacity: 1.0;}
				9% {opacity: 0.2;}
				18% {opacity: 1.0;}
			}
			@keyframes blue {
				0% {opacity: 1.0;}
				7.5% {opacity: 0.2;}
				15% {opacity: 1.0;}
			}
		}
	}
	div.screenAlart{
		.el-message-box__header{
			padding:10px 5px 5px 5px;
			.el-message-box__headerbtn{color:#eee;top:10px;right:10px;}
		}
		.kmb-message-box{
			background-color:rgba(0,0,0,.7);border:1px solid #00B2FC;
			.el-message-box__title{color:#eee;}
			.el-message-box__content{color:#ddd;}
		}
		.alert-ctbox{
			.item{line-height:30px;}
			span{display:inline-block;width:115px;}
			input{height:25px;line-height:25px;outline:none;padding:5px 5px;background:transparent;border:1px solid #aaa;color:#fff;}
			input::-webkit-input-placeholder{color:#888;}
		}
	}
</style>