<style lang='scss' scoped>
.allAlarm{
	width: 100%;
	/* height: 100%; */
	background-color: #F9F9F9;
	&-header{
		display: flex;
		border-bottom: 1px solid #dcdcdc;
		background-color: #fff;
		&-picker{
			border-left: 1px solid #dcdcdc;
		}
		&-date,&-picker{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;
		}
	}
	.allAlarm-chart-ctn{
		padding:30rpx $paddingLR;
	}
	.allAlarm-chart{
		width: 100%;
		background-color: #fff;
		box-shadow: $box-shadow;
		border-radius: $uni-border-radius-lg;
		padding: 30rpx;
		&-header{
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #eee;
		}
	}
	
	.alrmAnalysis-content {
		display: flex;
		width: 100%;
		padding-top: 10rpx;
	
		.alrmAnalysis-title {
			width: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		.alrmAnalysis-info {
			width: 100%;
			font-size: 22rpx;
			display: grid;
			grid-template-columns: repeat(2, 50%);
			grid-auto-columns: repeat(2, 50%);
		}
		.alrm-row {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
		
			&-circle {
				width: 22rpx;
				height: 22rpx;
				border-radius: $uni-border-radius-circle;
				/* background-color: #C93548; */
				margin-top: 2rpx;
			}
		}
	}
	.allAlarm-list-picker{
		background-color: #fff;
		display: flex;
		box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.08);
		&-alarm{
			border-right: 1px solid #eee;
		}
		&-alarm,&-state{
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 26rpx 0;
		}
	}
}

/* 列表 */
.allAlarm{
	&-info-list{
		//background-color: #F9F9F9;
		padding: 30rpx $paddingLR;
	}
	&-info-box{
		width: 100%;
		border-radius: $uni-border-radius-lg;
		background-color: #fff;
		box-shadow: $box-shadow;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		&:last-child{
			margin-bottom: 0;
		}
		&-msg{
			padding: 20rpx;
			/* border-bottom: 2px dotted #A1A1A1; */
			border-bottom: 1px dashed #A1A1A1;
			position: relative;
		}
		.box-checkbox{
			position: absolute;
			right: -16rpx;
			top: 14rpx;
		}
		.box-dealwith{
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
		}
		.box-left-line{
			width: 8rpx;
			height: 180rpx;
			background: #93CDFC;
			position: absolute;
			z-index: 1;
			left: 20rpx;
			top: 4rpx;
			// left: 40rpx;
			// top: 20rpx;
		}
		&-msg-row{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			&:last-child{
				margin-bottom: 0;
			}
			.msg-row-icon{
				border-radius: $uni-border-radius-circle;
				/* padding: 10rpx; */
				width: 50rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: $main-color;
				z-index: 10;
			}
			.msg-row-text{
				color: #000;
				width: 480rpx;
			}	
		}
		&-bottom{
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
		}
	}
	&-info-box-msg-row-ctn{
		position: relative;
	}
	&-info-box-msg-content{
		display: flex;
	}
	&-info-box-msg-warning{
		width: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FF3F3F;
		font-size: 32rpx;
	}
}
.canvas-columnChart{
	width: 600rpx;
	height: 500rpx;
}
.canvas-pieChart{
	width: 600rpx;
	height: 350rpx;
}
.alarmInfo-content{
	padding: 70rpx $paddingLR;
	padding-bottom: 40rpx;
	&-row{
		padding-bottom: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	&-bottom-btn{
		padding: 0 30rpx;
		padding-top: 20rpx;
	}
}
</style>
<template>
	<view class="allAlarm">
		<view class="allAlarm-header">
			<!-- <u-dropdown>
				<u-dropdown-item v-model="value2" :title="value2==1?'日':'月'" :options="options2" @change="bindDropdownSwitchFn"></u-dropdown-item>
			</u-dropdown> -->
			<view class="allAlarm-header-date flex1" @click="dateSelectShow = true">
				<text>{{value2==1?"日":"月"}}</text>
				<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
			</view>
			<picker class="allAlarm-header-picker flex1" mode="date" :value="dateVal" :fields="value2==1?'day':'month'" @change="bindDateChange">
			    <text class="uni-input">{{dateVal}}</text>
				<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
			</picker>
		</view>
		<view class="allAlarm-chart-ctn">
			<view class="allAlarm-chart">
				<view class="allAlarm-chart-header">
					<view class="">{{isPieChart?"饼图分析":"柱状图分析"}}</view>
					<view class="">
						<tuiIcon name="tongjifenxi" size="36" class="mr20" :color="!isPieChart?'#FA6400':'#707070'" @click="openColumnChartFn"></tuiIcon>
						<tuiIcon name="bingtu" size="36" :color="isPieChart?'#FA6400':'#707070'" @click="openPieChartFn"></tuiIcon>
					</view>
				</view>
				<view class="allAlarm-chart-info">
					<view class="pie" v-show="isPieChart">
						<view class="" >
							<canvas canvas-id="tradeAnalyzeAlarmId" class="canvas-pieChart"></canvas>
						</view>
						<view class="">
							<view class="alrmAnalysis-content">
								<view class="alrmAnalysis-info">
									<view class="alrm-row" v-for="(item,index) in alarmCategoriesList" :key="item.typeCode">
										<view class="alrm-row-circle" :style="{backgroundColor:item.color}"></view>
										<view class="alrm-row-text pl10">
											<text class="pr10">{{item.typeName}}</text>
											<text class="text--base--grey">|</text>
											<text class="pl10">{{item.ratio}}%</text>
											<text class="pl10" style="color: #999;">{{item.alarmTotal}}</text>
										</view>
									</view>
								</view>
							</view>
							<u-empty v-if="false" class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
						</view>
					</view>
					<view class="column" v-show="!isPieChart">
						<canvas canvas-id="columnChartId" class="canvas-columnChart"></canvas>
					</view>
				</view>
			</view>
		</view>
		<view class="allAlarm-list-picker">
			<view class="allAlarm-list-picker-alarm" @click="alarmSelectShow = true">
				<text>{{alarmSelectValue==2?"预警":"报警"}}</text>
				<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
			</view>
			<view class="allAlarm-list-picker-state" @click="stateSelectShow = true">
				<text>{{stateSelectValue=="UNPROCESS"?"未处理":stateSelectValue=="PROCESSED"?"已处理":"状态"}}</text>
				<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
			</view>
		</view>
		<mescroll-body top="0" ref="mescrollRef" height="860rpx" bottom="80" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="allAlarm-info-list">
				<view class="allAlarm-info-box" v-for="(item,index) in allAlarmList" :key="index">
					<view class="allAlarm-info-box-msg" @click="openDealwithFn(item)">
						<tuiIcon class="box-dealwith" :name="item.processStatus=='PROCESSED'?'yichuli':'weichuli'" size="80" :color="item.processStatus=='PROCESSED'?'#71B943':'#BE2D08'"></tuiIcon>
						<view class="allAlarm-info-box-msg-content">
							<view class="allAlarm-info-box-msg-warning">{{item.alarmDivide=="ALARM"?"报警":item.alarmDivide=="WARNING"?"预警":"-"}}</view>
							<view class="allAlarm-info-box-msg-row-ctn">
								<view class="box-left-line"></view>
								<view class="allAlarm-info-box-msg-row">
									<view class="msg-row-icon">
										<tui-icon color="#fff" name="xiangmu" size="26"></tui-icon>
									</view>
									<text class="msg-row-text pl20">项目：{{item.projectName}}</text>
								</view>
								<view class="allAlarm-info-box-msg-row">
									<view class="msg-row-icon">
										<tui-icon color="#fff" name="ditu2" size="26"></tui-icon>
									</view>
									<text class="msg-row-text pl20">地点：{{item.projectAddress}}</text>
								</view>
								<view class="allAlarm-info-box-msg-row">
									<view class="msg-row-icon">
										<tui-icon color="#fff" name="xinpian" size="26"></tui-icon>
									</view>
									<text class="msg-row-text pl20">线路：{{item.deviceName}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="allAlarm-info-box-bottom">
						<text>时间：{{item.alarmTime}}</text>
						<text>报警类型：{{item.typeName}}</text>
					</view>
				</view>
			</view>
		</mescroll-body>
		<u-select v-model="dateSelectShow" :list="options2" @confirm="onDateConfirmFn"></u-select>
		<u-select v-model="alarmSelectShow" :list="alarmSelectList" @confirm="onAlarmConfirmFn"></u-select>
		<u-select v-model="stateSelectShow" :list="stateSelectList" @confirm="onStateConfirmFn"></u-select>
		<u-popup v-model="alarmShowFlag" mode="center" :closeable="true" width="80%">
			<view class="alarmInfo-content" v-if="currentPickInfoData">
				<view class="alarmInfo-content-row">项目：{{currentPickInfoData.projectName}}</view>
				<view class="alarmInfo-content-row">地址：{{currentPickInfoData.projectAddress}}</view>
				<view class="alarmInfo-content-row">线路：{{currentPickInfoData.deviceName}}</view>
				<view class="alarmInfo-content-row">报警类型：{{currentPickInfoData.typeName}}</view>
				<view class="alarmInfo-content-row">报警时间：{{currentPickInfoData.alarmTime}}</view>
				<!-- <view class="alarmInfo-content-row">联系人：{{currentPickInfoData.alarmTime}}</view>
				<view class="alarmInfo-content-row">联系电话：15860886888</view> -->
				<view class="alarmInfo-content-bottom-btn">
					<u-button type="primary" shape="circle" @click="projectHandleNowFn(currentPickInfoData)">立即处理</u-button>
					<!-- <view class="pt20"></view>
					<u-button type="primary" shape="circle" @click="fiilMaintenanceFn">填写维保</u-button> -->
				</view>
			</view>
		</u-popup>
		
	</view>
</template>
<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import allAlarmMixins from "./allAlarmMixins.js"
	let _self;
	export default {
		data() {
			return {
				dateSelectShow:false,
				value2: 2,
				options2: [{
						label: '日',
						value: 1,
					},
					{
						label: '月',
						value: 2,
					},
				],
				
				allAlarmList:[], // 警告列表
				isPieChart:null,
				
				stateSelectValue:"",
				stateSelectShow: false, // 状态弹框
				stateSelectList: [
					{
						value: "",
						label: '全部'
					},
					{
						value: "UNPROCESS",
						label: '未处理'
					},
					{
						value: "PROCESSED",
						label: '已处理'
					}
				],
				alarmSelectValue:1,
				alarmSelectShow: false, // 报警预警弹框
				alarmSelectList: [
					{
						value: 1,
						label: '报警'
					},
					{
						value: 2,
						label: '预警'
					}
				],
								
				dateVal:"", // 日期值
				currentCanvasType:"pie",
				pixelRatio:1,
				tradeAnalyzeWidth:"",// 饼图宽
				tradeAnalyzeHeight:"",// 饼图高
				
				columnChartWidth:"",// 柱状图宽
				columnChartHeight:"",// 柱状图高
				
				alarmColorList: ["#C93548", "#5E5490", "#52B249", "#F7A23E", "#EA9B87", "#A94791", "#F1DF31", "#DE5654", "#2DAEE5"],
				alarmCategoriesList:[], // 图表数据
				canvaRing:null,
				
				alarmShowFlag:false, // 报警信息弹框开关
				currentPickInfoData:null, // 报警信息数据
				projectId: null, // 项目ID
			}
		},
		mixins:[allAlarmMixins],
		components:{},
		onLoad(e) {
			_self = this;
			this.projectId = e.projectId;
			this.isPieChart = true;
			console.log(this.alarmSelectValue,"alarmSelectValue");
			this.alarmSelectValue = 1;
			// this.allAlarmList = [{
			// 	checkedFlag:false,
			// 	name:'上海德润谷云物联科技有限公司',
			// 	address:"A区18栋高新产业园",
			// 	totalLineFlag:true
			// },{
			// 	checkedFlag:false,
			// 	name:'上海德润谷云物联科技有限公司',
			// 	address:"A区18栋高新产业园",
			// 	totalLineFlag:false
			// }];
			this.tradeAnalyzeWidth = uni.upx2px(600);
			this.tradeAnalyzeHeight = uni.upx2px(350);
			this.columnChartWidth = uni.upx2px(600);
			this.columnChartHeight = uni.upx2px(500);
			
			this.dateVal = this.$u.timeFormat(new Date().getTime(), this.value2==1?'yyyy-mm-dd':'yyyy-mm');
			
			// this.getAlarmListFn();
			this.getAlarmCategoriesListFn();
		},
		methods: {
			// 切换饼图
			openPieChartFn(){
				this.currentCanvasType = "pie";
				this.isPieChart = true;
				this.showIndustryAlarmAnalysisFn(this.alarmCategoriesList);
			},
			// 获取报警数据
			getAlarmCategoriesListFn(){
				let query = {
					 createDate:this.dateVal,
					projectId: this.projectId
				}
				this.$get("/app/alarm/alarm-categories",query).then((res)=>{
					console.log(res,"Ressss");
					this.alarmCategoriesList = res.data.map((item, index, arr) => {
						item.color = this.alarmColorList[index];
						if (index + 1 > this.alarmColorList.length) {
							item.color = this.alarmColorList[index - this.alarmColorList.length];
						}
						return item;
					});
					if(this.currentCanvasType == 'pie'){
						this.showIndustryAlarmAnalysisFn(this.alarmCategoriesList);
					} else{
						this.openColumnChartFn();
					}
				})
			},
			// 状态选择
			onStateConfirmFn(arr){
				this.stateSelectValue = arr[0].value;
				this.mescroll.resetUpScroll();
			},
			// 报警预警选择
			onAlarmConfirmFn(arr){
				this.alarmSelectValue = arr[0].value;
				this.mescroll.resetUpScroll();
			},
			// 切换柱状图
			openColumnChartFn(){
				// console.log();
				this.isPieChart = false;
				this.currentCanvasType = "column";
				let Column={
					categories:[],
					series:[],
				}
				let	chartData = [];
				this.alarmCategoriesList.map((item)=>{
					Column.categories.push(item.typeName);
					chartData.push(item.alarmTotal)
				})
				Column.series = [{
						// area: [74.95, 284, 155, 295],
						color: "#1890ff",
						data: chartData,
						index: 0,
						legendShape: "rect",
						name: "报警分析",
						pointShape: "circle",
						show: true,
						type: "column"
					}]				
				this.showColumn("columnChartId",Column);
			},
			// 日月切换
			onDateConfirmFn(arr){
				console.log(arr,"ee");
				this.value2 = arr[0].value;
			},
			// 点击处理图标
			openDealwithFn(item){
				console.log(item,"item");
				if(item.processStatus == 'UNPROCESS'){
					this.alarmShowFlag = true;
					this.currentPickInfoData = item;
				}
			},
			// 渲染饼图分析
			showIndustryAlarmAnalysisFn(data) {
				// let data = [{
				// 	industryName: "学校",
				// 	total: 1
				// },{
				// 	industryName: "短路",
				// 	total: 2
				// }]
				let series = data.map((item) => {
					return {
						name: item.typeName,
						data: item.alarmTotal
					}
				})
				// 自定义文案示例，需设置format字段
				for (let i = 0; i < series.length; i++) {
					series[i].format = () => {
						return series[i].name + series[i].data
					};
				}
				// _self.textarea = JSON.stringify(res.data.data.Ring);
				this.showRing("tradeAnalyzeAlarmId", {
					series: series
				})
			},
			showColumn(canvasId,chartData){
				let canvaColumn=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					padding:[15,5,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid:true,
					},
					yAxis: {
						data:[{
							position:'right',
							axisLine:false,
							format:(val)=>{return val.toFixed(0)},
						}]
					},
					dataLabel: true,
					width: _self.columnChartWidth*_self.pixelRatio,
					height: _self.columnChartHeight*_self.pixelRatio,
					extra: {
						column: {
							type:'group',
							width: _self.columnChartWidth*_self.pixelRatio*0.45/chartData.categories.length
						}
					  }
				});
			},
			toJSON(){},
			// 环形
			showRing(canvasId, chartData) {
				let totalValue = 0;
				chartData.series.forEach((item)=>{
					totalValue += item.data;
				})
				console.log(totalValue,"totalValue");
				this.canvaRing = new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'ring',
					fontSize:11,
					padding:[5,5,5,5],
					// legend:{
					// 	show:true,
					// 	position:'right',
					// 	float:'center',
					// 	itemGap:10,
					// 	padding:5,
					// 	lineHeight:26,
					// 	margin:5,
					// 	borderWidth :1
					// },
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.tradeAnalyzeWidth * _self.pixelRatio,
					height: _self.tradeAnalyzeHeight * _self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
					title: {
						name: '报警数量',
						color: '#666666',
						fontSize: 11*_self.pixelRatio,
					},
					subtitle: {
						name: `${totalValue}条`,
						color: '#7cb5ec',
						fontSize: 11*_self.pixelRatio,
					},
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 15*_self.pixelRatio,
						  labelWidth:15
						}
					},
				});
			},
			// 日期切换
			bindDateChange(e){
				console.log(e,"e");
				this.dateVal = e.detail.value;
				this.getAlarmCategoriesListFn();
				this.mescroll.resetUpScroll();
			},
			projectHandleNowFn(data) {
				this.$post('/app/alarm/batch-update', {recordIds: [data.recordId]}).then(res => {
					if(res.code == 200) {
						this.$tui.toast('处理成功', 3000, true);
						this.mescroll.resetUpScroll();
						this.alarmShowFlag = false;
					}
				})
			},
		}
	}
</script>
