<template>
	<view class="iots-home">
		<view class="iots-header">
			<view class="main-item alarm-item" @click="goNoticeList">
				<view class="main-header alarm-header">
					<view class="main-title alarm-title">
						<view class="title-box alarm-title-box">
							<view class="iconfont icon-baojingguanli"></view>
						</view>
						<text>报警统计</text>
					</view>
					<view class="iconfont icon-xiangyou1"></view>
				</view>
				<view class="alarm-content">
					<view class="content-left">
						<view class="item-num">{{deviceInfo.alarmCount}}</view>
						<view class="item-name">报警总数</view>
					</view>
					<view class="content-right">
						<view class="content-right-item">
							<view class="item-num">{{deviceInfo.applyCount}}</view>
							<view class="item-name">已处理</view>
						</view>
						<view class="content-right-item">
							<view class="item-num">{{deviceInfo.notApplyCount}}</view>
							<view class="item-name">未处理</view>
						</view>
					</view>
				</view>
			</view>
			<view class="main-item device-item" @click="goDeviceList">
				<view class="main-header device-header">
					<view class="main-title device-title">
						<view class="title-box device-title-box">
							<view class="iconfont icon-shebei1"></view>
						</view>
						<text>设备统计</text>
					</view>
					<view class="iconfont icon-xiangyou1"></view>
				</view>
				<view class="main-content device-content">
					<view class="content-item">
						<view class="content-item-left">
							<view class="iconfont icon-shebeizongshu"></view>
						</view>
						<view class="content-item-right">
							<text class="item-num">{{deviceInfo.deviceCount}}</text>
							<text class="item-name">设备总数</text>
						</view>
					</view>
					<view class="content-item">
						<view class="content-item-left">
							<view class="iconfont icon-shebeizaixian"></view>
						</view>
						<view class="content-item-right">
							<text class="item-num">{{deviceInfo.onlineCount}}</text>
							<text class="item-name">在线数</text>
						</view>
					</view>
					<view class="content-item">
						<view class="content-item-left">
							<view class="iconfont icon-shebeilixian"></view>
						</view>
						<view class="content-item-right">
							<text class="item-num">{{deviceInfo.offlineCount}}</text>
							<text class="item-name">离线数</text>
						</view>
					</view>
				</view>
			</view>
			<u-tabs :list="productList" name="label" :current="tabIndex" @change="tabChange"></u-tabs>
		</view>

		<mescroll-uni ref="mescrollRef" :top="top" :height="mescrollHeight" :bottom="bottom" @init="mescrollInit" @down="downCallback"
			:up="upOption" @up="upCallback">
			<view class="device-box">
				<!-- 设备列表 -->
				<view class="device-list">
					<view class="device-item" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
						<view class="device-name">
							{{item.devName}}
						</view>
						<view class="device-status">
							<view class="device-status-item">
								<u-icon name="wifi" :color="item.devState==1?'#10CC70':item.devState==2?'#FF2B38':'#999999'"
									size="26"></u-icon>
								<text
									:style="{marginLeft:'10rpx',color:item.devState==1?'#10CC70':item.devState==2?'#FF2B38':'#999999'}">{{item.devState==1?'在线':item.devState==2?'离线':'未激活'}}</text>
							</view>
							<!-- <view class="device-status-item notice-tag">
								<u-icon name="warning" color="#F6A582" size="26"></u-icon>
								<text
									:style="{marginLeft:'10rpx',color:'#F6A582'}">告警未处理</text>
							</view> -->
						</view>
						<view class="device-img-box">
							<image v-if="item.devImage" :src="imgPath + item.devImage" mode=""></image>
							<!-- #ifdef MP-WEIXIN -->
							<image v-else src="https://file.iot-fast.com/wxapp/static/image/device/device-default.png" mode=""></image>
							<!-- #endif -->
							<!-- #ifndef MP-WEIXIN -->
							<image v-else src="/static/app-plus/image/device/device-default.png" mode=""></image>
							<!-- #endif -->
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		<u-tabbar class="tabbar-box" v-model="tabbarIndex" active-color="#1890ff" :list="tabbarList" @change="tabbarChange"></u-tabbar>
	</view>
</template>

<script>
	let that = null;
	import IotsTabbarMixin from "../iotsTabbarMixins.js"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [IotsTabbarMixin,MescrollMixin],
		data() {
			return {
				upOption: {
					noMoreSize: 4,
					textNoMore: '----  已经到底啦  ----',
					empty: {
						tip: '~ 设备为空 ~' // 提示
					},
					onScroll: true
				},
				tabbarIndex:0,
				top: 738,
				bottom: '50px',
				mescrollHeight: 0,
				dataList: [],
				total: 0,
				productList: [{
					label: '全部产品',
					value: null
				}],
				tabIndex: 0,
				productPk: null,
				deviceInfo: {
					deviceCount: 0,
					onlineCount: 0,
					productCount: 0,
					offlineCount: 0,
					activeCount: 0,
					notActiveCount: 0,
					alarmCount: 0,
					applyCount: 0,
					notApplyCount: 0,
				},
				timer: null,
				imgPath:'',
			};
		},
		props: {
			showToggle: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			hideToggle: {
				type: Boolean,
				default: () => {
					return false
				}
			}
		},
		watch: {
			// showToggle() {
			// 	console.log("show变化")
			// 	clearInterval(this.timer);

			// 	this.timer = setInterval(() => {
			// 		this.mescroll.resetUpScroll();
			// 		console.log("当前起始项Index为", this.showStartIndex, this.showEndIndex);
			// 	}, 5000)
			// },
			// hideToggle() {
			// 	console.log("hide变化")
			// 	clearInterval(this.timer);
			// },
		},
		onLoad() {
			that = this;
			this.getConfigPath();
			this.getDeviceInfo();
			this.getProductList();
			const query = uni.createSelectorQuery().in(this);
			const sys = uni.getSystemInfoSync();
			setTimeout(() => {
				query
					.select(".iots-header")
					.boundingClientRect((data) => {
						console.log("当前值为",data)
						this.top = data.height + 'px';
						// #ifdef APP-PLUS
						this.top = data.height + 'px';
						// #endif
						this.height = (sys.windowHeight - data.height) * 2 - 50;
					})
					.exec();
			}, 0)
		},
		methods: {
			getConfigPath(){
				let configList = uni.getStorageSync('configList');
				let configIndex = uni.getStorageSync('configIndex');
				this.imgPath = configList[configIndex].protocol + configList[configIndex].address;
			},
			getDeviceInfo() {
				this.$api.iotsApi.getDeviceCount({}).then(res => {
					console.log("获取数据为", res)
					if (res.code == 0) {
						this.deviceInfo = res.data;
					}
				}, error => {})
			},
			goDeviceList() {
				uni.redirectTo({
					url: '/pages/iots/device/device-list'
				})
			},
			goDetail(obj){
				uni.navigateTo({
					url:'/pages/iots/device/device-detail?id=' + obj.id + '&devName=' + obj.devName
				})
			},
			goNoticeList() {
				// this.$u.toast('功能未完成')
				uni.redirectTo({
					url:'/pages/iots/notice/index'
				})
			},
			getProductList() {
				this.$api.iotsApi.getProductList({
					page: 1,
					pageSize: 999
				}).then(res => {
					if (res.code == 0 && res.data.list.length > 0) {
						let productList = res.data.list.map((item) => {
							return {
								label: item.prodName,
								value: item.pk
							}
						})
						this.productList = [{
							label: '全部产品',
							value: null,
						}, ...productList];
					} else {
						this.productList = [{
							label: '全部产品',
							value: null,
						}];
					}
				}, error => {})
			},
			tabChange(e) {
				// 记得清除查询设备id
				console.log("当前点击tab", e)
				this.tabIndex = e;
				this.productPk = this.productList[e].value;
				this.mescroll.resetUpScroll();
			},
			changeSwitch(e, index) {
				console.log("当前点击开关", e, index)
			},
			changeSelect(e, index) {
				console.log("选择", e, index)
			},
			upCallback(page) {
				let params = {
					"pk": this.productPk,
					"page": page.num,
					"pageSize": page.size,
					// "Wheres": {
					// 		"wheres": [
					// 				{"field": "prodType","operator": "=","value": null},
					// 				{"field":"devState","operator":"=","value":'null'},
					// 				{"fields": ["devId","devName"],"operator": "keyword","value": ''}
					// 		]
					// },
				}
				this.$api.iotsApi.getDeviceList(params).then(res => {
					if (res.code === 0) {
						let curPageData = res.data && res.data.list;
						// let curPageData = res.data && deviceData;
						let curPageLen = curPageData && curPageData.length || 0;
						let totalSize = res.data.totalCount;

						this.$nextTick(() => {
							// 隐藏下拉刷新和上拉加载的状态;
							this.mescroll.endBySize(curPageLen, totalSize);
						})
						//设置列表数据
						if (page.num == 1) {
							this.dataList = []; //如果是第一页需手动制空列表
						}
						this.dataList = curPageLen > 0 && this.dataList.concat(curPageData); //追加新数据
						this.total = totalSize;
					} else {
						this.$u.toast(res.msg);
						this.mescroll.endErr();
					}
				}, error => {})
			}
		}
	}
</script>
<style>
	page{
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.iots-home {
		height: 100%;
		background-color: #f5f5f5;
		// padding: 10rpx;
		font-family: Georgia, 'Times New Roman', Times, serif;
	}

	.iots-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		background-color: #f5f5f5;
	}

	.device-list {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		// background-color: #f5f5f5;
		.device-item {
			width: 345rpx;
			// height: 300rpx;
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			font-weight: bold;
			padding: 20rpx;
			box-sizing: border-box;

			// overflow: hidden;
			&:nth-child(2n-1) {
				margin-right: 20rpx;
			}

			.device-name {
				font-size: 28rpx;
				line-height: 28rpx;
				display: inline-block;
				width: 310rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.device-status{
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;
				font-size: 22rpx;
				line-height: 22rpx;
				.device-status-item{
					display: flex;
					align-items: center;
					&.notice-tag{
						margin-left:auto;
					}
				}
			}
			.device-img-box {
				margin-left: 10rpx;
				width: 120rpx;
				height: 120rpx;
				// background: #f5f5f5;
				// display: flex;
				// justify-content: center;
				// align-items: center;
				image{
					width: 100%;
					height: 100%;
				}
				
			}
		}
	}

	.menu-list {
		display: flex;

		.menu-item {
			flex: 1;
			margin: 20rpx;
			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: 80rpx;
				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;
			}
		}
	}
	.main-item {
		margin: 20rpx;
		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 {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: 500;
				.title-box{
					width: 40rpx;
					height: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
					border-radius: 50%;
					.iconfont{
						font-size: 26rpx;
						line-height: 26rpx;
						color: #fff;
					}
				}
				>text{
					font-weight: 600;
				}
			}
			.icon-xiangyou1{
				color: #939393;
			}
		}
	}
	.alarm-item{
		.alarm-title{
			.alarm-title-box{
				background: linear-gradient(180deg, #FFE99E, #FA9930);
				box-shadow: 0px 6rpx 10rpx 0px rgba(255,206,142,0.81);
			}
		}
		.alarm-content{
			padding: 20rpx;
			display: flex;
			font-weight: 500;
			.content-left{
				flex: 1;
				margin-right: 10rpx;
				height: 250rpx;
				/* #ifdef MP-WEIXIN */
				background: url('https://file.iot-fast.com/wxapp/static/image/device/alarm1.png') no-repeat right bottom,#FFF8E8;
				/* #endif */
				/* #ifndef MP-WEIXIN */
				background: url('@/static/app-plus/image/device/alarm1.png') no-repeat right bottom,#FFF8E8;
				/* #endif */
				background-size: auto 75%;
				// padding: 25rpx 30rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				>view{
					margin-left: 30rpx;
					margin-top: 25rpx;
					width: 115rpx;
					text-align: center;
					color: #F6A582;
					font-size: 28rpx;
					line-height: 28rpx;
					&:first-child{
						margin-bottom: 24rpx;
					}
				}
			}
			.content-right{
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				line-height: 28rpx;
				.content-right-item{
					flex: 1;
					width: 100%;
					height: 80rpx;
					padding: 25rpx 30rpx 15rpx;
					border-radius: 10rpx;
					box-sizing: border-box;
					&:first-child{
						margin-bottom: 10rpx;
						/* #ifdef MP-WEIXIN */
						background: url('https://file.iot-fast.com/wxapp/static/image/device/alarm2.png') no-repeat right bottom,#ECF2FE;
						/* #endif */
						/* #ifndef MP-WEIXIN */
						background: url('@/static/app-plus/image/device/alarm2.png') no-repeat right bottom,#ECF2FE;
						/* #endif */
						background-size: auto 85%;
						
						>view{
							width: 110rpx;
							text-align: center;
							color: #616FE7;
							
							&:first-child{
								margin-bottom: 16rpx;
							}
						}
					}
					&:last-child{
						/* #ifdef MP-WEIXIN */
						background: url('https://file.iot-fast.com/wxapp/static/image/device/alarm3.png') no-repeat right bottom,#E9F9FF;
						/* #endif */
						/* #ifndef MP-WEIXIN */
						background: url('@/static/app-plus/image/device/alarm3.png') no-repeat right bottom,#E9F9FF;
						/* #endif */
						background-size: auto 85%;
						
						>view{
							width: 110rpx;
							text-align: center;
							color: #319DC6;
							
							&:first-child{
								margin-bottom: 12rpx;
							}
						}
					}
				}
			}
		}
	}
	.device-item{
		.device-title{
			.device-title-box{
				background: linear-gradient(180deg, #9EDAFF, #5D96FF);
				box-shadow: 0px 6px 10px 0px rgba(142,181,255,0.81);
			}
		}
		.device-content{
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			padding: 30rpx;
			.content-item{
				width: 50%;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				&:nth-child(3){
					margin-top: 30rpx;
				}
				.content-item-left{
					width: 62rpx;
					height: 62rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: linear-gradient(0deg, #9EDAFF, #FFFFFF);
					border-radius: 50%;
					color:#0a73ee;
					margin-right: 20rpx;
					.iconfont{
						font-size: 38rpx;
						font-weight: 550;
						// margin-bottom: 4rpx;
						background-image: -webkit-linear-gradient(0deg, #3BBCFF, #006CFF);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
				.content-item-right{
					.item-num{
						font-size: 36rpx;
						font-weight: 550;
					}
					.item-name{
						color: #777;
					}
					>text{
						display: block;
					}
				}
			}
		}
	}



</style>