<template>
  <div id="fireControl">
    <div v-if="isSearchLine" style="background: rgba(29,73,178,0.5);display: flex;align-items: center;justify-content: center;z-index: 9999999;position: fixed;top: 0;left: 0;right:0;bottom: 0;overflow: hidden;">
        <div style="position: relative;width: 90%;height: 90%;">
          <dv-border-box-11 title="消防路线" backgroundColor="black" style="width: 100%;height: 100%;padding: 60px 20px 20px 20px;">
            <mapCmp ref="maps" mapStyle="amap://styles/darkblue" :detailData="detailData"></mapCmp>
          </dv-border-box-11>
          <div  @click="closeMapPopup" style="z-index: 9999;position: absolute;top: 0;right: 0;color: #fff;padding:5px 10px;margin-right: .3rem;border-radius: 5px;cursor: pointer;">关闭</div>
        </div>
    </div>
    <containerCmp :titHeader="titHeader" :index="3" :visitBoMenu="false">
      <div class="centerCmp">
        <mapCmp ref="map" :devicesData="devicesData" @onEmit="handleClick"></mapCmp>
      </div>
      <div class="leftCmp">
        <dv-border-box-12 style="height:32%;width: 100%;">
          <roseChart></roseChart>
        </dv-border-box-12>
        <dv-border-box-12 style="height:68%">
          <alarmScrollBoard type="fireCmp" @onEmit="handleClick"></alarmScrollBoard>
        </dv-border-box-12>
      </div>
      <div class="rightCmp">
        <div style="height:33%;">
          <dv-border-box-12 class="item" v-for="(item,index) in digitalFlopData" :key="index" @click.native="jump(item)" background-color="rgba(16,42,117,0.3)">
              <div style="height: 100%;height: 100%;display: flex;flex-direction: column;align-content: space-between;justify-content: space-between;">
                <div class="title">{{item.title}}</div>
                <div class="bottom">
                  <div class="bottom-number">
                    <div class="bottom-title">{{item.normalTit}}</div>
                    <dv-digital-flop class="digital" :config="item.number1" />
                  </div>
                  <div class="bottom-number">
                    <div class="bottom-title">{{item.exceptionTit}}</div>
                    <dv-digital-flop class="digital" :config="item.number2" />
                  </div>
                </div>
              </div>
          </dv-border-box-12>
        </div>
        <dv-border-box-13 style="height:33%;">
         <TopMiddleCmp :option="option" title="近月告警率"></TopMiddleCmp>
        </dv-border-box-13>
        <dv-border-box-13 style="height:33%;">
         <TopRightCmp :option="option1" title="近月离线率"></TopRightCmp>
        </dv-border-box-13>
      </div>
    </containerCmp>
  </div>
</template>
<script>
import containerCmp from "./common/containerCmp.vue"
import alarmScrollBoard from './components/alarmScrollBoard'
import TopMiddleCmp from './components/TopMiddleCmp'
import TopRightCmp from './components/TopRightCmp'
import mapCmp from './components/devicesMap.vue'
import roseChart from './components/roseChart.vue'
import {getSmartdeviceAll} from "../../api/grid/index.js"
import {getUserInfo} from "../../util/util.js"
export default {
  name: 'fireControl',
  components: {
    containerCmp,
    alarmScrollBoard,
    TopMiddleCmp,
    TopRightCmp,
    mapCmp,
    roseChart,
  },
  data () {
    return {
      digitalFlopData : [],
      option1: {
        legend: {
          data: [
            {
              name: '设备离线率',
              color: '#00baff'
            },
          ],
          textStyle: {
            fill: '#fff'
          }
        },
        xAxis: {
          data: [
            '2020/06/02', '2020/07/02', '2020/08/02', '2020/09/02', '2020/10/02',
          ],
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999',
              interval:0,
              rotate:20
            },

          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          data: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
          axisTick: {
            show: false
          },
        },
        series: [
          {
            name: '车辆通行量趋势',
            data: [
              50, 100, 160,200,150
            ],
            type: 'bar',
            barStyle: {
              fill: 'rgba(0, 186, 255, 0.4)'
            },
            barWidth:20
          },

        ]
      },
        detailData:null,
        isSearchLine:false,
        alarmType:'',
        option: {
                legend: {
                  data: ['告警率'],
                  textStyle: {
                    fill: '#fff'
                  }
                },
                xAxis: {
                  data: [
                    '2020/06/02', '2020/07/02', '2020/08/02', '2020/09/02', '2020/10/02',
                  ],
                  boundaryGap: false,
                  axisLine: {
                    style: {
                      stroke: '#999'
                    }
                  },
                  axisLabel: {
                    style: {
                      fill: '#999'
                    }
                  },
                  axisTick: {
                    show: false
                  }
                },
                yAxis: {
                  data: 'value',
                  splitLine: {
                    show: false
                  },
                  axisLine: {
                    style: {
                      stroke: '#999'
                    }
                  },
                  axisLabel: {
                    style: {
                      fill: '#999'
                    },
                  },
                  axisTick: {
                    show: false
                  },
                },
                series: [
                  {
                    data: [
                      90, 80, 100,90,95
                    ],
                    type: 'line',
                    name: '告警率',
                    smooth: true,
                    lineArea: {
                      show: true,
                      gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
                    },
                    linePoint: {
                      radius: 4,
                      style: {
                        fill: '#00db95'
                      }
                    }
                  }
                ]
              },
              devicesData:[],
              devicesCount:{},
              titHeader:'',
              residentialId:'',
              residentialList:[],
              xiaofangtype:'100004',
              yangantype:'960417',

    }
  },
  created() {
    this.reqSmartdeviceAll();
  },
  mounted() {
    if(getUserInfo()){
      this.titHeader = "园区消防态势"
    }else{
      this.titHeader = "数字社区消防态势"
    }
  },
  methods:{
    reqSmartdeviceAll(){
      var _this = this;
          let obj1 = {
                title: '智能消防',
                normalTit:'正常',
                exceptionTit:'异常',
                path:'/smartapplication/smartfirefighting',
                number1: {
                  content: '20',
                  textAlign: 'left',
                  style: {
                    fill: '#3de7c9',
                    fontSize:30,
                    fontWeight:'bold'
                  }
                },
                number2: {
                  content: '1',
                  textAlign: 'left',
                  style: {
                    fill: '#ff4300',
                    fontSize:30,
                    fontWeight:'bold'
                  }
                }
              }
              let obj2 = {
                title: '智能烟感',
                normalTit:'正常',
                exceptionTit:'异常',
                path:'/smartapplication/cover',
                number1: {
                  content: '30',
                  textAlign: 'left',
                  style: {
                    fill: '#3de7c9',
                    fontSize:30,
                    fontWeight:'bold'
                  }
                },
                number2: {
                  content: '1',
                  textAlign: 'left',
                  style: {
                    fill: '#ff4300',
                    fontSize:30,
                    fontWeight:'bold'
                  }
                }
              }
      let deviceTypes = this.xiaofangtype+","+this.yangantype
      getSmartdeviceAll(deviceTypes,this.residentialId).then((res)=>{
        _this.devicesData.length = 0
        _this.residentialList.length = 0
        _this.residentialList = res.data.data.residentialList
        _this.devicesData = res.data.data.smartDeviceList;
        let yanganOnline = 0;
        let yanganOffline = 0;
        let xiaofangOnline = 0;
        let xiaofangOffline = 0;
        if(_this.devicesData.length>0){
          _this.devicesData.map((item)=>{
            if(item.deviceType==100004){
              if(item.deviceStatus==1){
                yanganOnline++
              }
              if(item.deviceStatus==2){
                yanganOffline++
              }
            }
            if(item.deviceType==960417){
              if(item.deviceStatus==1){
                xiaofangOnline++
              }
              if(item.deviceStatus==2){
                xiaofangOffline++
              }
            }
          })
           _this.devicesCount['yanganOnline'] = yanganOnline
           _this.devicesCount['yanganOffline'] = yanganOffline
           _this.devicesCount['xiaofangOnline'] = xiaofangOnline
           _this.devicesCount['xiaofangOffline'] = xiaofangOffline
           obj1.number1.content = xiaofangOnline +""
           obj1.number2.content = xiaofangOffline +""
           obj2.number1.content = yanganOnline +""
           obj2.number2.content = yanganOffline +""
           _this.digitalFlopData.push(obj1)
           _this.digitalFlopData.push(obj2)
        }
      })
    },
    jump(item){
      // this.$refs.map.clearLine()
    },
    closeMapPopup(){
      this.isSearchLine=false
    },
    handleClick(row,params){
      var _this = this
      this.detailData = row
      this.$datavAlert({
        title:params.title,
        showType:params.type,
        detailData:row,
        a_searchLine(){
          setTimeout(()=>{
            _this.isSearchLine = true
            _this.$nextTick(()=>{
              _this.$refs.maps.drawLine()
            })
          },500)
        }
      })
    },
  }
}
</script>

<style lang="less">
#fireControl {
    .item{
      width: 100%;
      height: 50%;
      box-sizing: border-box;
      color: #fff;
      display: flex;
      padding-top: 10px;
    }
    .item:hover{
      cursor: pointer;
      .title{
        text-shadow:0 0 20px #fff,0 0 30px #fff,0 0 40px #00a67c,0 0 70px #00a67c,
      }
    }
    .title{
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        font-size: 16px;
        font-weight: bold;
      }
      .bottom{
        width: 100%;
        display: flex;
      }
      .bottom-number{
        width: 50%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
      }
      .bottom-title{
        width: 30%;
        font-size: 14px;
      }
      .digital{
        box-sizing: border-box;
        padding-left: 10px;
      }
}
</style>
