<template lang="pug">
    el-container(style="height:77vh")
        el-aside( width="350px" v-loading="leftLoading" style="z-index:1000;")
            div.left_aside(style="height:auto")
                el-header.left_header 报警统计
                el-main.left_main
                    div.left_main_body
                        div.left_col_header 报警处理情况
                        el-row.row_style()
                            el-col(:span="12")
                                div(style="color:#F56C6C;font-size:18px;font-weight:400;font-family:Microsoft YaHei;") {{status.oneCount}}
                                div(style="font-size:12px;color:#656565;font-family:Microsoft YaHei;font-weight:400;") 未处理
                            //- el-col(:span="8")
                            //-     div(style="color:#E6A23C;font-size:18px;font-weight:400;font-family:Microsoft YaHei;")  {{status.twoCount}}
                            //-     div(style="font-size:12px;color:#656565;font-family:Microsoft YaHei;font-weight:400;") 处理中
                            el-col(:span="12")
                                div(style="color:#409EFF;font-size:18px;font-weight:400;font-family:Microsoft YaHei;")  {{status.threeCount}}
                                div(style="font-size:12px;color:#656565;font-family:Microsoft YaHei;font-weight:400;") 已处理
                    div.left_main_body
                        div.left_col_header 报警等级统计
                        el-row.row_style()
                            el-col(:span="8")
                                div(style="color:#F56C6C;font-size:18px;font-weight:400;font-family:Microsoft YaHei;") {{level.oneCount}}
                                div(style="font-size:12px;color:#656565;font-family:Microsoft YaHei;font-weight:400;") 特别重大
                            el-col(:span="8")
                                div(style="color:#E6A23C;font-size:18px;font-weight:400;font-family:Microsoft YaHei;")  {{level.twoCount}}
                                div(style="font-size:12px;color:#656565;font-family:Microsoft YaHei;font-weight:400;") 重大
                            el-col(:span="8")
                                div(style="color:#409EFF;font-size:18px;font-weight:400;font-family:Microsoft YaHei;")  {{level.threeCount}}
                                div(style="font-size:12px;color:#656565;font-family:Microsoft YaHei;font-weight:400;") 一般
            div.left_aside(style="height:auto;margin-bottom:10px;")
                el-header.left_header 等级分布
                div(id="myCharts" style="height:227px;background:#ffffff")

            div.left_aside(style="height:auto;margin-bottom:0px;")
                el-header.left_header 报警分布
                div(id="alarms" style="height:175px;background:#ffffff")
        el-main(style="padding:0px;z-index:1001;height:78vh" class="alarms-untreated-main")
            el-tabs(v-model="activeName" type="border-card" @tab-click="handleClick")
                el-tab-pane(label="报警列表" name="0")
                    query-list(v-if="activeName == 0" ref="queryList")
</template>
<script>
import QueryList from '../untreated/query-list'
export default {
	data() {
		return {
			leftLoading: false,
			activeName: '0',
			level: {},
			status: {},
			chartData: null
		}
	},
	components: {
		QueryList
	},
	created() {
		this.eventList = []
		this.$nextTick(() => {
			this.$refs.queryList.init('0')
		})
		this.getGroupList()
	},
	mounted() {
		this.alarmsInit()
	},
	methods: {
		alarmsInit() {
			let dom = document.getElementById('alarms')
			if (!dom) return
			let myCharts = this.$echarts.init(dom)
			let option = {
				color: ['#1D82D0'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: ['CO', 'C02', '烟雾浓度', '温度', '音视频'],
						axisTick: {
							alignWithLabel: true
						},
						axisLabel: { interval: 0 }
					}
				],
				yAxis: [
					{
						type: 'value'
					}
				],
				series: [
					{
						name: '直接访问',
						type: 'bar',
						barWidth: '60%',
						data: [7, 4, 3, 5, 6],

						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: {
										//数值样式
										color: 'black',
										fontSize: 16
									}
								}
							}
						}
					}
				]
			}
			myCharts.setOption(option)
		},
		groupInit() {
			let dom = document.getElementById('myCharts')
			if (!dom) return
			let myCharts = this.$echarts.init(dom)
			let option = {
				tooltip: {
					trigger: 'item',
					formatter: '{b}: {c} ({d}%)'
				},
				legend: {
					orient: 'horizontal',
					bottom: 10,
					data: ['特别重大', '重大', '一般']
				},
				series: [
					{
						bottom: 30,
						type: 'pie',
						radius: ['50%', '70%'],
						avoidLabelOverlap: false,
						label: {
							formatter: (element) => {
								//自定义文字
								//return element.name + '：' + element.value + '(' + element.percent + '%)'
								return element.percent + '%'
							}
						},
						itemStyle: {
							normal: {
								color: function(params) {
									//自定义颜色
									let colorList = [
										'#F56C6C',
										'#E6A23C',
										'#409EFF'
									]
									return colorList[params.dataIndex]
								}
							}
						},
						labelLine: {
							show: true
						},
						data: this.chartData
					}
				]
			}
			myCharts.setOption(option)
		},
		//获取按报警等级统计信息
		getGroupList() {
			this.leftLoading = true
			this.$http({
				url: this.$http.adornUrlAlarm(
					`/alarmsInfo/queryGroupUntreated`
				),
				method: 'get',
				params: this.$http.adornParams({
					stationId: localStorage.getItem('stationId')
				})
			}).then((data) => {
				this.leftLoading = false
				if (data && data.code === 0) {
					this.level = data.level
					this.status = data.status

					this.chartData = [
						{ value: this.level.oneCount, name: '特别重大' },
						{ value: this.level.twoCount, name: '重大' },
						{ value: this.level.threeCount, name: '一般' }
					]
					this.groupInit()
				}
			})
		},
		handleClick(tab, event) {
			this.$nextTick(() => {
				this.$refs.queryList.init(this.activeName)
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.left_aside {
	margin-bottom: 10px;
	border: 1px #dcdfe6 solid;
	background: #f4f4f4;
	box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.2);
}

.left_header {
	line-height: 38px;
	height: 38px !important;
	background-color: #e1edf4;
	border-bottom: 1px #e4e7ed solid;
	font-size: 16px;
	font-family: Microsoft YaHei;
	font-weight: bold;
}

.left_main {
	// padding: 0rem 1rem 1rem 1rem;
	overflow: hidden;
	background: #ffffff;
    padding: 15px !important;
}

.left_main_char {
	/*padding:0rem 1rem 1rem 1rem;*/
	/*overflow: hidden;*/
	background: #ffffff;
	/*height: 300px;*/
	.untreated_canvas {
		margin: 0 auto;
		/*transform: translateY(-80px);*/
		top: -80px;
	}
}

.left_main_body {
	margin-top: 5px;
	border: 1px #d1d1d1 solid;
	/*height:120px;*/
	background: #fff;
}

.left_col_header {
	background-color: #e1edf4;
	height: 30px;
	line-height: 30px;
	color: #000000;
	text-align: center;
	font-size: 15px;
	font-family: Adobe Heiti Std;
	font-weight: bold;
}

.row_style {
	line-height: 24px;
	text-align: center;
	/*height:60px;*/
	/*padding:3px;*/
}

.alarms-untreated-main > .el-tabs {
	box-shadow: none;
	border: none;
}

.alarms-untreated-main > .el-tabs > .el-tabs__content {
	padding: 0 !important;
	margin-top: 10px;
}

.el-tanle th {
	background: #eef8ff !important;
}

.el-tabs__nav-scroll {
	height: 42px;
	/*padding-top: 10px;*/
	/*padding-left: 10px;*/
	line-height: 42px;
	background: #f4f4f4;
	border-bottom: 1px solid rgba(196, 196, 196, 1);
	.el-tabs__item {
		border-top-color: #dcdfe6 !important;
	}
}
</style>
