<style lang='scss' scoped>
@keyframes myrotate{
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.rotateAction{
	animation:myrotate 2s linear infinite;  
}
.smoke{
	
	width: 100%;
	/* height: 100%; */
	/* background-color: #eee; */
	&-top{
		width: 100%;
		height: 450rpx;
		position: relative;
		&-bottom-wave{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 1;
		}
		&-circle{
			width: 300rpx;
			height: 300rpx;
			position: relative;
			margin: 0 auto;
			&-bg{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}
			&-line{
				width: 260rpx;
				height: 260rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -130rpx;
				margin-top: -130rpx;
				/* transform: translate(-50%,-50%); */
				z-index: 2;
			}
			&-text{
				position: absolute;
				left: 0;
				top: 50%;
				width: 100%;
				/* height: 60rpx; */
				font-size: 50rpx;
				z-index: 99;
				transform: translate(0,-50%);
				text-align: center;
				color: #1C87FF;
				font-weight: bold;
			}
		}
	}
	&-alarm-list{
		padding: 30rpx $paddingLR;
	}
	&-alarm-box{
		background-color: #fff;
		padding: 20rpx;
		border-radius: 16rpx;
		box-shadow: $box-shadow;
		margin-bottom: 30rpx;
		&-info{
			padding: 0 10rpx;
			
		}
	}
	&-normal{
		width: 100%;
		text-align: center;
		&-img{
			width: 200rpx;
			height: 200rpx;
			margin: 0 auto;
			margin-top: 100rpx;
		}
		&-text{
			padding-top: 20rpx;
			width: 200rpx;
			margin: 0 auto;
			color: #96BBF3;
		}
	}
}
</style>
<template>
	<view class="smoke">
		<!-- <u-navbar back-text="返回" title="剑未配妥，出门已是江湖" :background="background" :border-bottom="false"></u-navbar> -->
		<view class="smoke-top" :style="{backgroundColor:getCurrentMainColor}">
			<view class="smoke-top-circle">
				<u-image class="smoke-top-circle-bg" width="100%" height="100%" src="http://static.drgyen.com/app/hc-app-power/images/home/smoke/circle.png"></u-image>
				<view class="smoke-top-circle-line">
					
				</view>
				<u-image class="rotateAction" width="100%" height="100%" src="http://static.drgyen.com/app/hc-app-power/images/home/smoke/line.png"></u-image>
				<view class="smoke-top-circle-text" :style="{color:getCurrentMainColor}">{{currentState}}</view>
			</view>
			<u-image class="smoke-top-bottom-wave" width="100%" height="128rpx" src="http://static.drgyen.com/app/hc-app-power/images/home/smoke/wave.png"></u-image>
		</view>
		<view class="smoke-normal" v-if="currentState=='正常'">
			<view class="smoke-normal-img">
				<u-image width="100%" height="100%" src="/static/images/home/smoke/normal.png"></u-image>
			</view>
			<view class="smoke-normal-text">
				场所很安全暂无设备异常
			</view>
		</view>
		<mescroll-body v-else top="0" ref="mescrollRef" bottom="100" height="400" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="smoke-alarm-list">
				<view class="smoke-alarm-box flex-center" v-for="(item,index) in 3" :key="index">
					<tuiIcon name="huozai" color="#FA5E42" size="60"></tuiIcon>
					<view class="smoke-alarm-box-info">
						<view class="smoke-alarm-box-info-name">火警为最高级报警，提示头部：已火警为首</view>
						<view class="smoke-alarm-box-info-subtitle text--mini--grey">福建省福州市闽侯县上街镇乌龙江中青大厦</view>
					</view>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>
<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		data() {
			return {
				currentState:"故障",
				currentMainColor:""
			}
		},
		mixins:[MescrollMixin],
		computed:{
			getCurrentMainColor(){
				switch (this.currentState){
					case "正常":
						return "#1C9AFF";
						break;
					case "火警":
						return "#FF4E2D";
						break;
					case "故障":
						return "#FFAE2E";
						break;
					default:
						return "#1C9AFF";
						break;
				}
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: this.getCurrentMainColor,
			})
		},
		methods: {}
	}
</script>
