<template>
	<view id="device">
		<nav-bar :is-back="true" title="设备数据实时监控" :title-width="285" ></nav-bar>
		<view class="device-list">
			<view class="device-item" @click="goUrl(1)">
				<view class="device-bg">
					<view class="device-num">
						<text>{{productCount}}</text>个
					</view>
				</view>
				<view class="device-title">总产品数量</view>
			</view>
			<view class="device-item" @click="goUrl(2)">
				<view class="device-bg">
					<view class="device-num">
						<text>{{deviceCount}}</text>个
					</view>
				</view>
				<view class="device-title">总设备数量</view>
			</view>
			<view class="device-item" @click="goUrl(3)">
				<view class="device-bg">
					<view class="device-num">
						<text>{{activeCount}}</text>个
					</view>
				</view>
				<view class="device-title">激活设备数量</view>
			</view>
			<view class="device-item" @click="goUrl(4)">
				<view class="device-bg">
					<view class="device-num">
						<text>{{onlineCount}}</text>个
					</view>
				</view>
				<view class="device-title">在线设备数量</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '../../common/components/navbar/NavBar.vue'
	export default {
		data() {
			return {
				productCount:0,
				deviceCount:0,
				activeCount:0,
				onlineCount:0,
			}
		},
		components:{
			NavBar
		},
		onLoad() {
			this.getDeviceData();
		},
		onShow() {
			
		},
		methods:{
			goUrl(type){
				if(type == 1){
					// uni.switchTab({
					// 	url:'./product'
					// })
					uni.navigateTo({
						url:'./product'
					})
				}else if(type == 2){
					uni.navigateTo({
						url:'../device/list'
					})
				}else if(type == 3){
					uni.navigateTo({
						url:'../device/list'
					})
				}else if(type == 4){
					uni.navigateTo({
						url:'../device/list?deviceStateIndex=0'
					})
				}
			},
			// 获取设备数据
			getDeviceData(){
				let opt = {
					url: '/prod-api/iot/device/all/count',
					method: "GET",
				}
				this.$request.TokenRequest(opt,{}).then(res => {
					console.log("getDeviceData",res);
					if(res.code==200){
						this.productCount=res.data.productCount;
						this.deviceCount=res.data.deviceCount;
						this.activeCount=res.data.activeCount;
						this.onlineCount=res.data.onlineCount;
						
					}else{
						this.$u.toast(res.msg);
					}
					
				}, error => {
					this.$u.toast('服务器开小差了呢，请您稍后再试')
					console.log(error);
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.device-list{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 85rpx;
		.device-item{
			padding-top: 53rpx;
			&:nth-child(1) .device-bg{
				background: url(https://am-img.gkiiot.com/iotos/app/img/device/device1.png) no-repeat;
				background-size: 100% 100%;
			}
			&:nth-child(2) .device-bg{
				background: url(https://am-img.gkiiot.com/iotos/app/img/device/device2.png) no-repeat;
				background-size: 100% 100%;
			}
			&:nth-child(3) .device-bg{
				background: url(https://am-img.gkiiot.com/iotos/app/img/device/device3.png) no-repeat;
				background-size: 100% 100%;
			}
			&:nth-child(4) .device-bg{
				background: url(https://am-img.gkiiot.com/iotos/app/img/device/device4.png) no-repeat;
				background-size: 100% 100%;
			}
			.device-bg{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 215rpx;
				height: 215rpx;
				
				.device-num{
					color: #fff;
					font-size: 22rpx;
					font-weight: bold;
					line-height: 38rpx;
					text{
						font-size: 50rpx;
						line-height: 53rpx;
					}
				}
			}
			.device-title{
				margin-top: 10rpx;
				text-align: center;
				font-size: 28rpx;
				color: #333333;
				line-height: 48rpx;
			}
		}
	}
</style>
