<template>
	<view class="notice-box">
		<view class="notice-box-main">
			<view class="notice-item">
				<view class="item-header">
					<view class="item-header-title">
						未处理
					</view>
					<view class="item-header-txt">{{alarmCount.alarmUnCount}}</view>
				</view>
				<view class="item-bottom">
					<view class="bottom-item">
						<view class="bottom-item-left">
							<view class="item-bg bg-green"></view>
							<view class="bottom-item-name">当日</view>
						</view>
						<view class="bottom-item-right">
							{{alarmCount.alarmToday}}
						</view>
					</view>
					<view class="bottom-item">
						<view class="bottom-item-left">
							<view class="item-bg bg-red"></view>
							<view class="bottom-item-name">当月</view>
						</view>
						<view class="bottom-item-right">
							{{alarmCount.alarmMonth}}
						</view>
					</view>
				</view>
			</view>
			<view class="notice-item">
				<view class="item-header">
					<view class="item-header-title">
						告警配置
					</view>
					<view class="item-header-txt">{{alarmCount.ruleCount}}</view>
				</view>
				<view class="item-bottom">
					<view class="bottom-item">
						<view class="bottom-item-left">
							<view class="item-bg bg-green"></view>
							<view class="bottom-item-name">正常</view>
						</view>
						<view class="bottom-item-right">
							{{alarmCount.ruleEnabled}}
						</view>
					</view>
					<view class="bottom-item">
						<view class="bottom-item-left">
							<view class="item-bg bg-red"></view>
							<view class="bottom-item-name">禁用</view>
						</view>
						<view class="bottom-item-right">
							{{alarmCount.ruleDisable}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="main-item">
			<view class="main-header device-header" @click="goAlarmList">
				<view class="main-title device-title">
					<view class="title-box device-title-box">
						<view class="iconfont icon-baojingguanli"></view>
					</view>
					<text>最新告警</text>
				</view>
				<view class="main-header-right">
					<view class="header-other">
						更多
					</view>
					<view class="iconfont icon-xiangyou1"></view>
				</view>
			</view>
			<view class="main-content">
				<view class="content-item" v-if="nowAlarmList.length>0" v-for="item in nowAlarmList" :key="item.id">
					<view class="content-item-header">
						{{item.alarmName}}<u-tag :text="item.applyState === 2?'已忽略':item.applyState === 1?'已处理':'未处理'" :type="item.applyState === 2?'info':item.applyState === 1?'success':'error'" mode="light" size="mini" style="margin-left: 10rpx;" />
					</view>
					<view class="content-body-item">
						<view class="content-body-label">
							告警内容：
						</view>
						<view class="content-body-value">
							{{item.alarmContent}}
						</view>
					</view>
					<view class="content-body-item">
						<view class="content-body-label">
							告警等级：
						</view>
						<view class="content-body-value">
							{{item.alarmLevel}}
						</view>
					</view>
					<view class="content-body-item">
						<view class="content-body-label">
							告警设备：
						</view>
						<view class="content-body-value">
							{{item.devName}}
						</view>
					</view>
					<view class="content-body-item">
						<view class="content-body-label">
							告警时间：
						</view>
						<view class="content-body-value">
							{{item.createdAt}}
						</view>
					</view>
				</view>
				<u-empty v-else margin-top="50" text="告警为空" mode="list"></u-empty>
			</view>
		</view>
		
		<view class="chart-box">
			<view class="chart-header">
				<view class="main-title device-title">
					<view class="title-box device-title-box">
						<view class="iconfont icon-line-chart"></view>
					</view>
					<text>告警统计</text>
				</view>
				<view class="chart-right">
					<uni-data-select
						v-model="statisticsParams.alarmLevel"
						:localdata="alarmLevelList"
						placeholder="选择告警等级"
						@change="changeLevel"
					></uni-data-select>
					<uni-data-select
						style="margin-left: 10rpx;"
						v-model="statisticsParams.dateType"
						:localdata="dateTypeList"
						:clear="false"
						placeholder="选择类型"
						@change="changeType"
					></uni-data-select>
					<view class="select-item" @click="openTimeModel">
						<text v-if="statisticsParams.dateType==='date'" class="select-item-left">{{timeNum.year + '-' + timeNum.month + '-' + timeNum.day}}</text>
						<text v-if="statisticsParams.dateType==='month'" class="select-item-left">{{timeNum.year + '-' + timeNum.month}}</text>
						<text v-if="statisticsParams.dateType==='year'" class="select-item-left">{{timeNum.year}}</text>
						<text class="iconfont icon-calendar11"></text>
					</view>
				</view>
			</view>
			<view class="chart-main">
				<qiun-data-charts
					type="line"
					:opts="opts"
					:chartData="chartData"
					:canvas2d="true"
					:reshow="charShow"
				/>
			</view>
		</view>
		<u-picker mode="time" v-model="timeShow" :params="timeParams" @confirm="changeTime"></u-picker>
		<u-tabbar class="tabbar-box" v-model="tabbarIndex" active-color="#1890ff" :list="tabbarList" @change="tabbarChange"></u-tabbar>
	</view>
</template>

<script>
	import IotsTabbarMixin from "../iotsTabbarMixins.js"
	import {numberfilter} from "@/static/common/js/util/number-to-chinese.js"
	export default {
		mixins: [IotsTabbarMixin],
		 filters: {
		    numberfilter
		  },
		data() {
			return {
				tabbarIndex:3,
				opts: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,15,15,5],
					enableScroll: false,
					legend: {show:false},
					xAxis: {
						disableGrid: true,
						// format: "xAxisDemo2"
						scrollShow: true,
						// itemCount: 6,
						fontSize:10,
						// rotateAngle:60,
						// rotateLabel:true,
						labelCount: 6, //默认显示个数
						// itemCount:24  //x轴数据的长度
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						splitNumber:5,
						data:[{tofix:2,min:0}]
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					},
					update:true
				},
				
				// 告警数量
				alarmCount:{
					alarmUnCount: 0,
					alarmToday: 0,
					alarmMonth: 0,
					ruleCount: 0,
					ruleEnabled: 0,
					ruleDisable: 0
				},
				// 最新告警
				nowAlarmList:[],
				// 告警等级
				levelShow:false,
				alarmLevelList:[],
				statisticsParams:{
					alarmLevel:null,
					dateType:null,
					dateValue:null,
				},
				dateTypeList:[
					{
						text:'天',
						value:'date'
					},
					{
						text:'月',
						value:'month'
					},
					{
						text:'年',
						value:'year'
					}
				],
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				timeShow: false,
				timeNum:{
					year: null,
					month: null,
					day: null,
				},
				chartData: {},
				charShow: true,
			}
		},
		onLoad() {
			this.statisticsParams.dateType = 'date';
			let newTime = new Date().getTime();
			let today = new Date();
			this.timeNum.year = today.getFullYear();
			this.timeNum.month = today.getMonth() + 1; // 月份是从 0 开始的，所以需要加1
			this.timeNum.day = today.getDate();
			if(this.$u.os()=='ios'){
				this.statisticsParams.dateValue = this.$u.timeFormat(new Date(), 'yyyy/mm/dd');
			}else{
				this.statisticsParams.dateValue = this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
			}
		},
		onShow() {
			this.getAlarmReacordCount();
			this.getAlarmReacordList();
			this.getAlarmLevelList();
			this.getAlarmRecordStat();
		},
		methods: {
			getAlarmReacordCount(){
				this.$api.iotsApi.getAlarmReacordCount({}).then(res => {
					console.log("获取告警数量为", res)
					if (res.code == 0) {
						this.alarmCount = res.data;
					}else{
						this.alarmCount = {
							alarmUnCount: 0,
							alarmToday: 0,
							alarmMonth: 0,
							ruleCount: 0,
							ruleEnabled: 0,
							ruleDisable: 0
						}
					}
				}, error => {})
			},
			// 获取最新告警
			getAlarmReacordList(){
				let params = {
					page: 1,
					pageSize: 2,
					"Sorters": {
							"sorters": [
								{"columnKey":"id","order":"descend"}
							]
					},
				}
				this.$api.iotsApi.getAlarmReacordList(params).then(res => {
					console.log("获取最新告警为", res)
					if (res.code == 0) {
						this.nowAlarmList = res.data.list ? res.data.list : [];
					}else{
						this.nowAlarmList = [];
					}
				}, error => {})
			},
			// 获取告警等级
			getAlarmLevelList(){
				this.$api.iotsApi.getAlarmLevelList({page:1,pageSize:999}).then(res => {
					console.log("获取告警等级为", res)
					if (res.code == 0 && res.data.list) {
						this.alarmLevelList = res.data.list.map(item=>{
							return {
								text:item.name,
								value:item.level,
							}
						});
						console.log("alarmLevelList",this.alarmLevelList)
					}else{
						this.alarmLevelList = [];
					}
				}, error => {})
			},
			changeLevel(e){
				console.log("e",e)
				// this.statisticsParams.alarmLevel = e;
				this.getAlarmRecordStat()
			},
			changeType(e){
				// this.statisticsParams.dateType = e;
				if(e === 'date'){
					this.timeParams={
						year: true,
						month: true,
						day: true,
						hour: false,
						minute: false,
						second: false
					}
				}else if(e === 'month'){
					this.timeParams={
						year: true,
						month: true,
						day: false,
						hour: false,
						minute: false,
						second: false
					}
				}else if(e === 'year'){
					this.timeParams={
						year: true,
						month: false,
						day: false,
						hour: false,
						minute: false,
						second: false
					}
				}
				this.getAlarmRecordStat()
			},
			openTimeModel(){
				this.timeShow = true;
			},
			changeTime(e){
				console.log("选择时间",e)
				this.timeNum.year = e.year;
				if(e.month){
					this.timeNum.month = e.month;
				}
				if(e.day){
					this.timeNum.day = e.day;
				}
				this.getAlarmRecordStat()
			},
			
			// 获取概览页统计(图表)
			getAlarmRecordStat(){
				let params = {
					alarmLevel: this.statisticsParams.alarmLevel,
					dateType: this.statisticsParams.dateType,
					dateValue: this.timeNum.year + '-' + this.timeNum.month + '-' + this.timeNum.day,
				}
				this.$api.iotsApi.getAlarmRecordStat(params).then(res => {
					console.log("获取概览页统计", res)
					if (res.code == 0) {
						this.chartData = {
							categories:res.data.xdata,
							series:[{
								name:'告警数量',
								data:res.data.ydata
							}]
						}
					}else{
						// this.alarmLevelList = [];
					}
				}, error => {})
			},
			goAlarmList(){
				uni.navigateTo({
					url:'/pages/iots/notice/list'
				})
			}
			
		}
	}
</script>
<style>
	page,.notice-box{
		background: #f5f5f5;
	}
</style>

<style scoped lang="scss">
	.notice-box{
		// background: #ebeef5;
		// height: 100%;
		// display: flex;
		// flex-direction: column;
		padding: 20rpx;
		padding-bottom: 50px;
	}
	.notice-box-main{
		display: flex;
		align-items: center;
		.notice-item{
			flex: 1;
			border: 1px solid #f0f0f0;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			box-shadow: 0px 0px 15rpx 0px rgba(201, 201, 201, 0.4);
			&:first-child{
				margin-right: 20rpx;
			}
			.item-header{
				border-bottom: 1px solid #e8e8f2;
				.item-header-txt{
					line-height: 80rpx;
					font-size: 40rpx;
					font-weight: bold;
				}
			}
			.item-bottom{
				margin-top: 20rpx;
				// line-height: 40rpx;
				display: flex;
				align-items: center;
				.bottom-item{
					flex: 1;
					display: flex;
					// justify-content: center;
					align-items: center;
					
					.bottom-item-left{
						display: flex;
						align-items: center;
						margin-right: 20rpx;
						.item-bg{
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}
					}
					
				}
			}
		}
	}
	.bg-green{
		background-color: #52c41a;
	}
	.bg-red{
		background-color: red;
	}
	
	.main-item{
		background-color: #fff;
		border-radius: 20rpx;
		// height: 200rpx;
		box-shadow: 0px 0px 15rpx 0px rgba(201, 201, 201, 0.4);
		margin-bottom: 20rpx;
		.main-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70rpx;
			padding: 0 20rpx;
			border-bottom: 1px solid #e8e8f2;
			.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%;
					background: linear-gradient(180deg, #FFE99E, #FA9930);
					box-shadow: 0px 6rpx 10rpx 0px rgba(255,206,142,0.81);
					.iconfont{
						font-size: 26rpx;
						line-height: 26rpx;
						color: #fff;
					}
				}
				>text{
					font-weight: 600;
				}
			}
			.main-header-right{
				display: flex;
				align-items: center;
				color: #939393;
				.header-other{
					font-size: 26rpx;
				}
			}
		}
		
		.main-content{
			padding:20rpx;
			.content-item{
				&:not(:first-child){
					border-top: 1px solid #e8e8f2;
					padding-top: 20rpx;
					margin-top: 20rpx;
				}
				.content-item-header{
					font-weight: 600;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					
				}
				.content-body-item{
					display: flex;
					margin-top: 5rpx;
					.content-body-label{
						color: #888888;
					}
				}
			}
		}
	}
	
	.chart-box{
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0px 0px 15rpx 0px rgba(201, 201, 201, 0.4);
		.chart-header{
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			border-bottom: 1px solid #e8e8f2;
			.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%;
					background: linear-gradient(180deg, #9EDAFF, #5D96FF);
					box-shadow: 0px 6px 10px 0px rgba(142,181,255,0.81);
					.iconfont{
						font-size: 26rpx;
						line-height: 26rpx;
						color: #fff;
					}
				}
				>text{
					font-weight: 600;
				}
			}
			.chart-right{
				display: flex;
				.select-item{
					margin-left: 10rpx;
					border: 1px solid #e5e5e5;
					border-radius: 10rpx;
					padding: 0 10rpx;
					width: 190rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #666;
					font-size: 24rpx;
					height: 60rpx;
				}
			}
		}
		.chart-main{
			height: 600rpx;
		}
	}
	/deep/.uni-select{
		padding: 0 10rpx;
		height: 60rpx;
	}
	
	.notice-top{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
		border-bottom: 1px solid #f4f6f8;
		z-index: 999;
		.iconfont{
			transform: rotate(90deg);
			margin-left: 10rpx;
		}
	}
	.notice-list{
		padding: 24rpx 24rpx 0;
		.notice-item{
			width: 702rpx;
			min-height: 381rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 24rpx;
			.item-header{
				// height: 104rpx;
				// padding-left: 28rpx;
				// padding-top: 23rpx;
				padding: 20rpx 25rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #e8e8f2;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.item-header-left{
					.header-title{
						font-size: 28rpx;
						line-height: 28rpx;
						color: #444444;
					}
					.header-time{
						font-size: 26rpx;
						line-height: 26rpx;
						color: #999;
						margin-top: 15rpx;
					}
				}
				.item-header-right{
					
				}
			}
			.item-body{
				padding: 18rpx 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				.item-body-left{
					.body-txt{
						font-size: 26rpx;
						line-height: 42rpx;
						color: #0053A2;
						text{
							color: #444;
						}
					}
				}
				.item-body-right{
					
				}
				
			}
		}
	}
</style>
