<style lang='scss' scoped>
	.alrmWarning-content {
		width: 100%;
		/* padding: 40rpx $paddingLR; */
		text-align: center;
		.alrmWarning-alam {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #eee;
			padding-bottom: 20rpx;
	
			&-title {
				color: #D9382A;
				/* width: 140rpx; */
				/* display: flex; */
				/* justify-content: center; */
				/* align-items: center; */
			}
		}
		.alrmWarning-warning {
			padding-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		&.hide{
			.alrmWarning-alam,.alrmWarning-warning{
				position: absolute;
				left: -999rpx;
				min-height: 180rpx;
			}
			
		}
	}
	.canvas-yesterdayAlrmId,
	.canvas-todayAlrmId {
		width: 120rpx;
		height: 120rpx;
	}
</style>
<template>
	<view class="alrmWarning-content" :class="hide?'hide':''">
		<view class="alrmWarning-alam" v-if="alarmAnalysisStatisticsData">
			<view class="alrmWarning-alam-title">报警 ></view>
			<view class="alrmWarning-alam-today-alrm">
				<canvas canvas-id="todayAlrmId" class="canvas-todayAlrmId"></canvas>
				<view class="" style="color: #D9382A;">今日报警</view>
			</view>
			<view class="alrmWarning-alam-yesterday-alrm">
				<canvas canvas-id="yesterdayAlrmId" class="canvas-yesterdayAlrmId"></canvas>
				<view class="">昨日报警</view>
			</view>
			<view class="alrmWarning-alam-trend">
				<view>
					<text class="pr10">{{alarmAnalysisStatisticsData.dayOnDay}}%</text>
					<u-icon :name="parseFloat(alarmAnalysisStatisticsData.dayOnDay)>0?'arrow-upward':'arrow-downward'" :color="parseFloat(alarmAnalysisStatisticsData.dayOnDay)>0?'#E23F34':'#45A63E'"
					 size="40"></u-icon>
				</view>
				<view>同比</view>
			</view>
		</view>
		<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
		<view class="alrmWarning-warning" v-if="warningAnalysisStatisticsData">
			<view style="color: #D18820;">预警 ></view>
			<view class="alrmWarning-warning-today-alrm">
				<canvas canvas-id="todayWarningId" class="canvas-todayAlrmId"></canvas>
				<view class="" style="color: #D9382A;">今日报警</view>
			</view>
			<view class="alrmWarning-warning-yesterday-alrm">
				<canvas canvas-id="yesterdayWarningId" class="canvas-yesterdayAlrmId"></canvas>
				<view class="">昨日报警</view>
			</view>
			<view class="alrmWarning-warning-trend">
				<view class="">
					<text class="pr10">{{warningAnalysisStatisticsData.dayOnDay}}%</text>
					<u-icon :name="parseFloat(warningAnalysisStatisticsData.dayOnDay)>0?'arrow-upward':'arrow-downward'" :color="parseFloat(warningAnalysisStatisticsData.dayOnDay)>0?'#E23F34':'#45A63E'"
					 size="40"></u-icon>
				</view>
				<view class="">同比</view>
			</view>
		</view>
		<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
	</view>
</template>
<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	export default {
		data() {
			return {
				alarmTodayWidth:"",
				alarmTodayHeight:"",
				alarmTodayArcbarWidth:"",
				// warningAnalysisStatisticsData:{
				// 	alarmDivide: "ALARM",
				// 	dayOnDay: "0.00",
				// 	todayAlarmTotal: 0,
				// 	yesterdayAlarm: 0
				// },
				// alarmAnalysisStatisticsData:{
				// 	alarmDivide: "WARNING",
				// 	dayOnDay: "0.00",
				// 	todayAlarmTotal: 0,
				// 	yesterdayAlarm: 0
				// }
			}
		},
		props:{
			warningAnalysisStatisticsData:{
				type:Object,
				default:null
			},
			alarmAnalysisStatisticsData:{
				type:Object,
				default:null
			},
			hide:{
				type:Boolean,
				default:false
			},
		},
		watch:{
			warningAnalysisStatisticsData(newVal,oldVal){
				if (!!newVal) {
					this.showWarningAnalysisStatisticsFn();
				}
			},
			alarmAnalysisStatisticsData(newVal,oldVal){
				console.log(newVal,"newVal");
				console.log(!!newVal,"!!newVal");
				if (!!newVal){
					this.showAlarmAnalysisStatisticsFn();
				}
			},
		},
		created() {
			this.alarmTodayWidth = uni.upx2px(120);
			this.alarmTodayHeight = uni.upx2px(120);
			this.alarmTodayArcbarWidth = uni.upx2px(20);
			console.log(this.alarmAnalysisStatisticsData,"alarmAnalysisStatisticsData");
			if(this.warningAnalysisStatisticsData){
				this.showWarningAnalysisStatisticsFn();
			}
			if(this.alarmAnalysisStatisticsData){
				this.showAlarmAnalysisStatisticsFn()
			}
			
		},
		methods: {
			toJSON(){},
			// 渲染预警分析模块
			showWarningAnalysisStatisticsFn(){
				if(!this.warningAnalysisStatisticsData) return;
				// 预警总数
				let warningTotalValue = this.warningAnalysisStatisticsData.todayAlarm + this.warningAnalysisStatisticsData.yesterdayAlarm;
				// 今日预警数据
				let todayWarningData = {
					title: this.warningAnalysisStatisticsData.todayAlarm + "",
					series: [{
						color: "#D9382A",
						data: this.warningAnalysisStatisticsData.todayAlarm / warningTotalValue || 0.01,
						index: 0,
						legendShape: "circle",
						name: "",
						pointShape: "circle",
						show: true,
						type: "arcbar"
					}]
				}
				// 昨日预警数据
				let yesterdayWarningData = {
					title: this.warningAnalysisStatisticsData.yesterdayAlarm + "",
					series: [{
						color: "#2DAEE5",
						data: this.warningAnalysisStatisticsData.yesterdayAlarm / warningTotalValue || 0.01,
						index: 0,
						legendShape: "circle",
						name: "",
						pointShape: "circle",
						show: true,
						type: "arcbar"
					}]
				}
				console.log(todayWarningData,"todayWarningData");
				console.log(yesterdayWarningData,"yesterdayWarningData");
				this.showArcbar("todayWarningId", {
					width: this.alarmTodayWidth,
					height: this.alarmTodayHeight
				}, todayWarningData);
				this.showArcbar("yesterdayWarningId", {
					width: this.alarmTodayWidth,
					height: this.alarmTodayHeight
				}, yesterdayWarningData);
			},
			// 渲染报警分析模块
			showAlarmAnalysisStatisticsFn() {
				if(!this.alarmAnalysisStatisticsData) return;
				console.log('this.alarmAnalysisStatisticsData', this.alarmAnalysisStatisticsData)
				// 报警总数
				let alarmTotalValue = this.alarmAnalysisStatisticsData.todayAlarm + this.alarmAnalysisStatisticsData.yesterdayAlarm;
				// 今日报警数据
				let todayAlrmData = {
					title: this.alarmAnalysisStatisticsData.todayAlarm + "",
					series: [{
						color: "#D9382A",
						data: this.alarmAnalysisStatisticsData.todayAlarm / alarmTotalValue  || 0.01,
						index: 0,
						legendShape: "circle",
						name: "",
						pointShape: "circle",
						show: true,
						type: "arcbar"
					}]
				}
				// 昨日报警数据
				let yesterdayAlrmData = {
					title: this.alarmAnalysisStatisticsData.yesterdayAlarm + "",
					series: [{
						color: "#2DAEE5",
						data: this.alarmAnalysisStatisticsData.yesterdayAlarm / alarmTotalValue || 0.01,
						index: 0,
						legendShape: "circle",
						name: "",
						pointShape: "circle",
						show: true,
						type: "arcbar"
					}]
				}
				// 找到id为todayAlrmId的块
				this.showArcbar("todayAlrmId", {
					width: this.alarmTodayWidth,
					height: this.alarmTodayHeight
				}, todayAlrmData);
				this.showArcbar("yesterdayAlrmId", {
					width: this.alarmTodayWidth,
					height: this.alarmTodayHeight
				}, yesterdayAlrmData);
			},
			// 进度圆环图 接收参数:一个块的id,一个数据
			showArcbar(canvasId, sizeObj, chartData) {
				let canvaLineA = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 11,
					legend: false,
					title: {
						name: chartData.title,
						color: chartData.series[0].color,
						fontSize: 18
					},
					subtitle: {
						// name: chartData.series[0].name,
						// color: '#666666',
						// fontSize: 15*_self.pixelRatio
					},
					extra: {
						arcbar: {
							type: 'circle', //整圆类型进度条图
							width: 4, //圆弧的宽度
							startAngle: 1.5 //整圆类型只需配置起始角度即可
						}
					},
					background: '#FFFFFF',
					pixelRatio: 1,
					series: chartData.series,
					animation: true,
					width: sizeObj.width,
					height: sizeObj.height,
					dataLabel: true,
				});
			
			},
		}
	}
</script>
