
<!-- 
/**
  * 表单通用组件
  *	@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 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};
					var html = '<div class="item"><span>解除时长(小时)：</span><input data-name="jchours" value=12 placeholder="请输入解除时长"/></div><div class="item"><span>报警原因：</span><input data-name="reason" placeholder="报警原因"/></div><div class="item"><span>解除报警原因：</span><input data-name="jcreason" placeholder="解除报警原因"/></div>';
					qf.UI.popupLayer({
						title:'解除报警',
						className:'screenAlart',
						closeBtnColor:'#eee',
						html:html,
						confirm: function(el){
							var inputs = el.querySelectorAll("input");
							for(var el of inputs){
								var key = el.dataset.name;
								var val = el.value;
								if(key === 'jchours'){
									val = parseInt(val) || 12;
								}else{
									val = val || '默认原因！';
								};
								params[key] = val;
							};
							// 解除
							pageApi.relieveAlarm(params).then((res)=>{
								if(res.code === 200){
									initModule()
								};
							});
						},
					});

					/* Tools.culayer({
						title:'解除报警',
						className:'screenAlart',
						html:html,
						confirm: function(el){
							var inputs = el.querySelectorAll("input");
							for(var el of inputs){
								var key = el.dataset.name;
								var val = el.value;
								if(key === 'jchours'){
									val = parseInt(val) || 12;
								}else{
									val = val || '默认原因！';
								};
								params[key] = val;
							};
							// 解除
							pageApi.relieveAlarm(params).then((res)=>{
								if(res.code === 200){
									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:0 0.08rem 0.08rem;
		
		nav{
			height:.26rem;text-align:center;color:#89B7C6;font-size:0;user-select:none;
			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%;}
				}
				.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:100% auto;
			}
			.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;}

			.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 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;}
		}
	}
	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>