<template>
  <el-row class="mianBox">
    <el-row class="headerBox">
      <el-col class="title">
        <img src="../../../assets/image/arrow.png" alt="" />
        {{resInfo.typeName || ''}}
      </el-col>
      <el-col class="btn">
        <span :class="{'clickBtn':isCheck === 'alarm'}" @click="enidCheck('alarm')">告警信息</span>
        <span :class="{'clickBtn':isCheck === 'deviceStatus'}" @click="enidCheck('deviceStatus')">设备工况</span>
      </el-col>
    </el-row>
    <el-row class="content">
        <div ref="echartD" style="width:100%;height:100%;"></div>
    </el-row>
    <el-row class="bot">
        <el-col class="leftBot">
            <el-col>{{annormalNumber}}</el-col>
            <el-col>已处理</el-col>
        </el-col>
        <el-col class="rightBot">
            <el-col>{{totleNumber}}</el-col>
            <el-col>待处理</el-col>
        </el-col>
    </el-row>
  </el-row>
</template>

<script>
import * as echarts from "echarts";
import echartsGet from './echart'
export default {
  props:['resInfo'],
  data() {
    return {
      isCheck: "alarm",
      resList:{alarm:[],deviceStatus:[]},
      totleNumber:0,
      annormalNumber:0,
    };
  },
  watch: {
    "$store.state.windowWidth"() {
      echarts.init(this.$refs.echartD).resize();
    },
    resInfo(){
      this.getData()
    }
  },
  mounted(){
    this.getData()
  },
  methods:{
    async getData(){
       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
        applicationCode: this.resInfo.applicationCode
      }))
      if(res.success){
        this.resList = res.data
        this.enidCheck()
      }
    },
    enidCheck(val){
      val && (this.isCheck = val)
      this.totleNumber = this.resList[this.isCheck].length > 0 && this.resList[this.isCheck].reduce((a, b) => a + b.normal, 0) || 0;
      this.annormalNumber = this.resList[this.isCheck].length > 0 && this.resList[this.isCheck].reduce((a, b) => a + b.annormal, 0) || 0;
      echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList[this.isCheck],this.isCheck))
    },
    resize() {
      echarts.init(this.$refs.echartD).resize();
    },
  }
};
</script>

<style lang="scss" scoped>
.mianBox {
  background: url("../../../assets/image/view1.png") no-repeat;
  background-size: 100% 100%;
  .el-row {
    flex: none;
  }
  .content {
    flex: 1;
    width: 100%;
  }
  .bot {
    height: 90px;
    width: 100%;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    & > .el-col {
      width: 45%;
      color: #FFF;
      background: url("../../../assets/image/box1.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .el-col{
          width: auto;
      }
    }
    .leftBot{
        &>.el-col:first-child{
            color: #00FE24;
            font-size: 28px;
            font-family: Impact Regular, Impact Regular-Regular;
        }
        &>.el-col:last-child{
            font-size: 16px;
        }
    }
    .rightBot{
        &>.el-col:first-child{
            color: #FF7112;
            font-size: 28px;
            font-family: Impact Regular, Impact Regular-Regular;
        }
        &>.el-col:last-child{
            font-size: 16px;
        }
    }
  }
}
</style>