<template lang="pug">
    el-container(style="height:77vh")
        el-aside( width="18vw" 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="8")
                                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="8")
                                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="xx" 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()
  },
  methods: {
    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;
}

.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: 1rem;
  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>
