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

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

  * @author: Kimber
  * @createtime: 2021/12/21(周二)
  */
-->
<template>
	<Carousel class="cu-slider" indicator-position="outside" height="100%" :interval="config.interval" :autoplay="config.autoplay">
		<Carousel-item v-for="(item, i) in list">
			<h3><i class="el-icon-s-data"></i>{{item.sumtitle}}</h3>
			<!-- 设备信息 -->
			<div v-if="item.type==='t_10'" class="sli-ctn t_10">
				<div class="ctn-absfull">
					<div class="chart_ctn" :data-index="i" :class="item.className" :data-item="JSON.stringify(item)" :id="item.id">
					</div>
					<div class="info">
						<ul class="list">
							<li>
								<h5>设备总数</h5>
								<div>
									<span>{{Cache.t_10.sum}}</span>
									<font>个</font>
								</div>
							</li>
							<li>
								<h5>设备在线数量</h5>
								<div>
									<span>{{Cache.t_10.online}}</span>
									<font>个</font>
								</div>
							</li>
							<li>
								<h5>设备离线数量</h5>
								<div>
									<span>{{Cache.t_10.offline}}</span>
									<font>个</font>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 实时数据(new) -->
			<div v-else-if="item.type==='t_11'" class="sli-ctn t_11">
				<div class="ctn-absfull scrolling4">
					<div class="chart_ctn" :data-index="i" :class="item.className" :data-item="JSON.stringify(item)" :id="item.id">
						<ul class="info-list">
						</ul>
					</div>
				</div>
			</div>
			<!-- 报警记录(new) -->
			<div v-else-if="item.type==='t_12'" class="sli-ctn t_12">
				<div class="ctn-absfull scrolling4">
					<div class="chart_ctn" :data-index="i" :class="item.className" :data-item="JSON.stringify(item)" :id="item.id">
						<ul class="info-list">
							<!-- <li><h5><i class="level2"></i>浸润线1</h5><span> 4 </span><font>报警时间(4)</font></li> -->
						</ul>
					</div>
				</div>
			</div>
			<!-- 实时数据(discard)
			<div v-else-if="item.type==='t_11'" class="sli-ctn t_1">
				<div class="ctn-absfull">
					<div class="info">
						<ul class="list">
							<li>
								<h5>降雨量</h5>
								<div>
									<span>{{Cache.t_10.sum}}</span>
									<font>个</font>
								</div>
							</li>
							<li>
								<h5>表面位移</h5>
								<div>
									<span>{{Cache.t_10.online}}</span>
									<font>个</font>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div> -->
			<!-- 水质 -->
			<div v-else-if="item.type==='t_8'" class="sli-ctn t_8">
				<div class="ctn-absfull">
					<div class="chart_ctn" :data-index="i" :class="item.className" :data-item="JSON.stringify(item)">
						<!-- <ul class="info">
							<li>
								<div>
									<span>{{'896'}}</span>
									<font>浊度</font>
								</div>
								<div>
									<font>镉</font>
									<span>{{'14890'}}</span>
								</div>
							</li>
						</ul> -->
					</div>
				</div>
			</div>
			<div v-else class="sli-ctn">
				<div class="chart_ctn ctn-absfull" :data-index="i" :class="item.className" :data-item="JSON.stringify(item)" :id="item.id"></div>
			</div>			
		</Carousel-item>
	</Carousel>
</template>
<script>
import {Carousel, CarouselItem} from 'element-ui';

export default {
	components: { Carousel, CarouselItem },
	data() {
		return {
			list:[],
			Cache:{
				t_10:{
					sum:0,
					online:0,
					offline:0,
				},
			},
			config:{
				interval:6000,
				autoplay:true,
			},
		}
	},
	props:{
	},
	beforeCreate(){
	},
	created(){
	},
	mounted() {
	},
	methods: {
		createViews(item){
			this.list = item.children;this.config.interval = item.interval;
			(item.autoplay !== void 0) && (this.config.autoplay = item.autoplay);
			var carouselCtn = this.$el.firstElementChild;
			return new Promise((resolve, reject) => {
				this.$nextTick(() => {
					var chartEls = carouselCtn.querySelectorAll('.chart_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;
				panelList.push({info:this.Cache[type], el:el, item:item, type:type});
			}; return panelList;
		},
	},
}
</script>
<style lang="scss" scope>
	.cu-slider{
		position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;
		
		.el-carousel{
			width:100%;height:100%;
		}
		
		.el-carousel__container{
			.el-carousel__item{
				display:flex;flex-direction:column;
				h3{
					margin:.05rem .08rem .02rem .08rem;color:#00fff0;padding-left:.08rem;
					background-image:linear-gradient(to right, #2967AA 15%, transparent 60%);
					font-size:.16rem;font-weight:normal;height:.28rem;max-height:.25rem;
					display:flex;align-items:center;font-weight:bold;
					i{
						display:inline-block;margin-right:6px;color:#E29A23;font-size:.20rem;
					}
				}
				.sli-ctn{
					flex:1;position:relative;margin:0 .08rem .05rem;
					//border:1px solid green;
				}
				.t_10{
					>div{display:flex;}
					.chart_ctn{flex:1;}
					.info{
						display:flex;align-items:center;width:2.04rem;max-width:175px;
						ul{width:100%;}
						li{
							display:flex;justify-content:space-between;height:.49rem;line-height:.47rem;
							border:1px solid #0f5680;margin:.06rem 0;background-color:#13286b;padding:0 .04rem;
							h5{font-weight:normal;color:#5fbfef;font-size:.14rem;}
							>div{color:#35ecfa;}
							span{font-size:.22rem;}
							font{font-size:.14rem;}
						}
					}
				}

				.t_11, .t_12{
					>div{
						height:100%;overflow-y:scroll;user-select:none;
					}
				}

				.t_1{
					.info{
						display:flex;color:#fff;height:100%;
						ul{
							flex:1;display:flex;flex-direction:row;flex-wrap:wrap;padding:.10rem 0 .15rem;
							li{
								display:flex;flex-direction:column;justify-content:center;width:33.33%;
								>div{
									border:1px solid #04a3b8;height:.36rem;line-height:.36rem;margin:0 .04rem;text-align:center;color:#01fdfe;font-size:.14rem;
									box-shadow:inset 0rem 0rem 0.10rem 0.02rem rgba(4,163,184, .8);
								}
							}
							h5{
								position:relative;display:flex;align-items:center;color:#5ebded;font-size:.15rem;
								margin:0 .04rem;
								&:before{
									content:"";height:.10rem;width:.08rem;background-color:#02ffff;margin-right:.10rem;
								}
							}
						}
					}
				}
				.t_8{
					>div{
						display:flex;align-items:center;
					}
					.chart_ctn{
						height:1.5rem;width:100%;display:flex;
						background:no-repeat center center url('~@/assets/images/layout/view_2.png');background-size:auto 100%;
						ul{
							flex:1;display:flex;margin:.09rem 0;flex-direction:column;
							li{
								display:flex;justify-content:space-between;line-height:0.44rem;padding:0 .4rem;
								&:last-child{margin-bottom:0;}
								>div{
									display:flex;align-items:center;color:#fff;font-size:.15rem;
								}
								div:first-child{
									//margin-right:2rem;justify-content:end;
									span{margin:0 .15rem 0 .1rem;}
								}
								div:last-child{
									//text-align:right;justify-content:start;
									span{margin:0 .1rem 0 .15rem;}
								}
							}
						}
					}
				}

				.t_12{
					h5{
						display:flex;align-items:center;
						i{
							position:relative;width:.30rem;height:.24rem;margin-right:.06rem;
							display:flex;justify-content:center;
							&:before{
								content:"";position:absolute;height:0;width:0;bottom:0;
								border-width:.24rem .14rem;border-style:solid;
							}
							&:after{
								content:"!";position:absolute;font-style:normal;line-height:.30rem;font-size:.14rem;color:black;
							}
						}
						.level1{
							&:before{
								border-color:transparent transparent #F93C58 transparent;
							}
						}
						.level2{
							&:before{
								border-color:transparent transparent #FA953A transparent;
							}
						}
						.level3{
							&:before{
								border-color:transparent transparent #E9FA3C transparent;
							}
						}
						.level4{
							&:before{
								border-color:transparent transparent #3BAFFB transparent;
							}
						}
					}
				}

				.info-list{
					li{
						display:flex;justify-content:space-between;height:.49rem;line-height:.47rem;
						border:1px solid #0f5680;margin:.06rem 0;padding:0 .10rem;
						background-image:linear-gradient(to right, transparent 30%, #13286b 80%);color:#35ecfa;
						h5{font-weight:normal;color:#fff;font-size:.14rem;margin-right:5px;}
						span{font-size:.16rem;display:inline-block;margin-right:5px;}
						font{font-size:.14rem;}
						>div{display:flex;}
						h5, span, font, div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
					}
				}
			}
		}

		//.el-carousel__arrow{display:none;}
	}
</style>