<template>
	<view class="iots-home">
		<u-navbar title="物联网" :is-back="false"></u-navbar>
		<!-- <view class="menu-list">
			<view class="menu-item" @click="goDeviceList">
				<view class="iconfont icon-hdd"></view>
				<view class="menu-txt">
					设备
				</view>
			</view>
			<view class="menu-item" @click="goNoticeList">
				<view class="iconfont icon-bell"></view>
				<view class="menu-txt">
					告警
				</view>
			</view>
		</view> -->
		<view class="menu-list menu-list-three">
			<view class="menu-item" @click="goDeviceList">
				<view class="iconfont icon-hdd"></view>
				<view class="menu-txt">
					设备
				</view>
			</view>
			<view class="menu-item" @click="goDeviceMap">
				<view class="iconfont icon-ditu1"></view>
				<view class="menu-txt">
					地图
				</view>
			</view>
			<view class="menu-item" @click="goNoticeList">
				<view class="iconfont icon-bell"></view>
				<view class="menu-txt">
					告警
				</view>
			</view>
		</view>
		
		<view class="alarm-box">
			<text class="alarm-box-num">{{deviceInfo.notApplyCount}}</text>
			<text class="alarm-box-name">未处理报警数</text>
		</view>
		
		<view class="main-item">
			<view class="main-header">
				<view class="main-title">
					报警统计
				</view>
				<view class="main-other" @click="goNoticeList">
					更多
				</view>
			</view>
			<view class="main-content">
				<view class="content-item">
					<text class="item-num">{{deviceInfo.alarmCount}}</text>
					<text class="item-name">报警总数</text>
				</view>
				<view class="content-item">
					<text class="item-num">{{deviceInfo.applyCount}}</text>
					<text class="item-name">已处理报警数</text>
				</view>
				<view class="content-item">
					<text class="item-num">{{deviceInfo.notApplyCount}}</text>
					<text class="item-name">未处理报警数</text>
				</view>
			</view>
		</view>
		
		
		
		<!-- <view class="main-item">
			<view class="main-header">
				<view class="main-title">
					产品统计
				</view>
				<view class="main-other">
					更多
				</view>
			</view>
			<view class="main-content">
				<view class="content-item">
					<text class="item-num">{{deviceInfo.productCount}}</text>
					<text class="item-name">产品总数</text>
				</view>
				<view class="content-item">
					<text class="item-num">0</text>
					<text class="item-name">激活数</text>
				</view>
			</view>
		</view> -->
		<view class="main-item">
			<view class="main-header">
				<view class="main-title">
					产品设备统计
				</view>
				<view class="main-other" @click="goDeviceList">
					更多
				</view>
			</view>
			<view class="main-content content-three">
				<view class="content-item">
					<text class="item-num">{{deviceInfo.productCount}}</text>
					<text class="item-name">产品总数</text>
				</view>
				<view class="content-item">
					<text class="item-num">{{deviceInfo.deviceCount}}</text>
					<text class="item-name">设备总数</text>
				</view>
				<view class="content-item">
					<text class="item-num">{{deviceInfo.onlineCount}}</text>
					<text class="item-name">设备在线数</text>
				</view>
				<view class="content-item">
					<text class="item-num">{{deviceInfo.offlineCount}}</text>
					<text class="item-name">设备离线数</text>
				</view>
				<view class="content-item">
					<text class="item-num">{{deviceInfo.activeCount}}</text>
					<text class="item-name">已激活数量</text>
				</view>
				<view class="content-item">
					<text class="item-num">{{deviceInfo.notActiveCount}}</text>
					<text class="item-name">未激活数量</text>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceInfo:{
					deviceCount:0,
					onlineCount:0,
					productCount:0,
					offlineCount:0,
					activeCount:0,
					notActiveCount:0,
					alarmCount:0,
					applyCount:0,
					notApplyCount:0,
				}
			};
		},
		created() {
			this.getDeviceInfo();
		},
		methods:{
			getDeviceInfo(){
				this.$api.iotsApi.getDeviceCount({}).then(res => {
					console.log("获取数据为",res)
					if(res.code == 0){
						this.deviceInfo = res.data;
					}
				}, error => {
				})
			},
			goDeviceList(){
				uni.navigateTo({
					url:'/pages/iots/device/device-list'
				})
			},
			goDeviceMap(){
				uni.navigateTo({
					url:'/pages/iots/map/device-map'
				})
			},
			goNoticeList(){
				this.$u.toast('功能未完成')
				// uni.navigateTo({
				// 	url:'/pages/iots/notice/index'
				// })
			}
		}
	}
</script>


<style lang="scss" scoped>
	.iots-home{
		height: 100%;
		background-color: #f5f5f5;
		padding: 10rpx;
		font-family: Georgia, 'Times New Roman', Times, serif;
	}
	.menu-list{
		display: flex;
		.menu-item{
			flex: 1;
			margin: 20rpx 10rpx;
			background-color: #fff;
			border-radius: 20rpx;
			height: 130rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 0 50rpx;
			box-shadow: 0px 0px 15rpx 0px rgba(201,201,201,0.4);
			.iconfont{
				font-size: 70rpx;
				background-image: -webkit-linear-gradient(90deg, #3BBCFF, #006CFF);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			.menu-txt{
				font-size: 50rpx;
				font-family: Georgia, 'Times New Roman', Times, serif;
				font-weight: bold;
			}
		}
		&.menu-list-three{
			.menu-item{
				padding: 0 15rpx;
			}
		}
	}
	
	.alarm-box{
		margin: 0rpx 10rpx 20rpx;
		height: 200rpx;
		border-radius: 20rpx;
		background-image: -webkit-linear-gradient(135deg, #3BBCFF, #006CFF);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		box-shadow: 0px 0px 15rpx 0px rgba(201,201,201,0.4);
		.alarm-box-num{
			font-size: 50rpx;
			font-weight: bold;
		}
		.alarm-box-name{
			margin-top: 10rpx;
			font-size: 30rpx;
			// font-family: Georgia, 'Times New Roman', Times, serif;
			font-weight: bold;
		}
	}
	
	.main-item{
		margin: 20rpx 10rpx;
		background-color: #fff;
		border-radius: 20rpx;
		// height: 200rpx;
		box-shadow: 0px 0px 15rpx 0px rgba(201,201,201,0.4);
		.main-header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70rpx;
			padding: 0 20rpx;
			.main-title{
				font-size: 28rpx;
				font-weight: bold;
			}
			.main-other{
				color: #666;
			}
		}
		.main-content{
			height: 160rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.content-item{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.item-num{
					font-size: 46rpx;
					font-weight: bold;
				}
				.item-name{
					margin-top: 10rpx;
					font-size: 26rpx;
				}
			}
			// &.content-two{
			// 	height: 320rpx;
			// 	flex-wrap: wrap;
			// 	.content-item{
			// 		width: 50%;
			// 	}
			// }
			&.content-three{
				height: 480rpx;
				flex-wrap: wrap;
				.content-item{
					width: 50%;
					.item-num{
						font-size: 50rpx;
					}
					.item-name{
						font-size: 28rpx;
					}
				}
			}
		}
	}
	
</style>
