<template>
  <div id="index3">
    <containerCmp v-if="agencies" :titHeader="agencies.name" active="index3">
      <div class="centerCmp">
        <mapCmp :agencies="agencies"></mapCmp>
      </div>
      <div class="leftCmp">
          <a v-if="agencies" target="_blank" style="margin-bottom: 10px;display: block;border-radius: 5px;background-color: rgba(255, 255, 255, 0.1);border:1px solid #36a2e1;font-size: 16px;color: #fff;text-align: center;height: 40px;line-height: 40px;width: 100%;font-weight: bold;">
            {{agencies.name}}管理 >
          </a>
        <headerData2 :agencyStatistic="agencyStatistic"></headerData2>
        <dv-border-box-12 class="leftCmp-3">
          <moreCmp2></moreCmp2>
        </dv-border-box-12>
      </div>
      <div class="rightCmp">
        <dv-border-box-6 class="rightCmp-1">
          <videoCmp></videoCmp>
        </dv-border-box-6>
        <dv-border-box-6 class="rightCmp-2">
          <moreCmp></moreCmp>
        </dv-border-box-6>
        <dv-border-box-6 class="rightCmp-3">
          <alarmScrollBoard listRowNum="5" @onEmit="handleClick"></alarmScrollBoard>
        </dv-border-box-6>
      </div>
    </containerCmp>
  </div>
</template>

<script>
  import containerCmp from "./common/containerCmp.vue"
import alarmScrollBoard from './components/alarmScrollBoard.vue'
import scrollBoard from './components/scrollBoard.vue'
import moreCmp from './components/moreCmp.vue'
import moreCmp2 from './components/moreCmp2.vue'
import videoCmp from './components/video.vue'
import headerData2 from './components/headerData2.vue'
import mapCmp from './components/map.vue'
import {getResidentialDetail} from "../../api/grid/index"
import {getUserInfo} from "../../util/util.js"
export default {
  name: 'index3',
  components: {
    containerCmp,
    scrollBoard,
    moreCmp,
    moreCmp2,
    videoCmp,
    headerData2,
    mapCmp,
    scrollBoard,
    alarmScrollBoard
  },
  data () {
    return {
      config6: {
        header: ['设备', '类型', '数据', '时间'],
        data: [
        ['消防栓-861878041367316', '碰撞告警', 'oMpa', '2020-12-09 18:51:21'],
        ['消防栓-861878041367316', '碰撞告警', 'oMpa', '2020-12-09 18:51:02'],
        ['消防栓-861878041367316', '碰撞告警', 'oMpa', '2020-12-09 18:48:45'],
        ['消防栓-861878041367316', '碰撞告警', 'oMpa', '2020-12-09 18:48:28'],
        ['消防栓-861878041367316', '碰撞告警', 'oMpa', '2020-12-09 18:45:09'],
        ['消防栓-861878041367316', '碰撞告警', 'oMpa', '2020-12-09 18:43:38'],
        ['消防栓-861878041367316', '碰撞告警', 'oMpa', '2020-12-09 18:43:26'],
        ['消防栓-861878041367316', '碰撞告警', 'oMpa', '2020-12-09 18:43:26'],
        ['消防栓-861878041367316', '碰撞告警', 'oMpa', '2020-12-09 18:42:57'],
        ['消防栓-861878041367316', '碰撞告警', 'oMpa', '2020-12-09 18:39:50'],
        ['消防栓-861878041367316', '碰撞告警', 'oMpa', '2020-12-09 18:39:17'],
        ['消防栓-861878041367316', '碰撞告警', 'oMpa', '2020-12-09 18:37:05'],
        ['消防栓-861878041367316', '碰撞告警', 'oMpa', '2020-12-09 18:36:19'],
        ['消防栓-861878041367316', '碰撞告警', 'oMpa', '2020-12-09 18:35:32'],
        ],
        index: false,
        align: ['center'],
        rowNum: 5,
        headerBGC: 'rgba(6, 30, 93, 0.1)',
        headerHeight: 30,
        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
        evenRowBGC: 'rgba(10, 29, 50, 0.8)',
        // path:'/jobs/devicejob'
        path:''
        },
      config: {
              header: ['设备', '状态', '位置', '时间'],
              data: [
                ['门磁0619', '未处理', '11栋301', '2020-11-28 19:25:00'],
                ['烟感0002', '已处理', '05栋404', '2020-11-28 19:25:00'],
                ['门磁0619', '未处理', '08栋505', '2020-11-28 19:25:00'],
                ['消防栓01', '已处理', '09栋030', '2020-11-28 19:25:00'],
                ['停车监控3', '已处理', '停车A区', '2020-11-28 19:25:00'],
                ['井盖0001', '未处理', '小区西路', '2020-11-28 19:25:00'],
                ['路灯0101', '未处理', '小区东路', '2020-11-28 19:25:00'],
                ['门磁0619', '已处理', '01栋101', '2020-11-28 19:25:00'],
                ['燃气0020', '未处理', '11栋505', '2020-11-28 19:25:00'],
                ['烟感0030', '已处理', '10栋101', '2020-11-28 19:25:00'],
                ['门磁0619', '已处理', '05栋101', '2020-11-28 19:25:00'],
                ['充电桩001', '未处理', '停车B区', '2020-11-28 19:25:00'],
              ],
              index: false,
              align: ['center'],
              rowNum: 5,
              headerBGC: 'rgba(6, 30, 93, 0.1)',
              headerHeight: 30,
              oddRowBGC: 'rgba(0, 44, 81, 0.8)',
              evenRowBGC: 'rgba(10, 29, 50, 0.8)',
              // path:'/jobs/devicejob',
              path:''
            },
            agencies:null,
            userInfo:false,
            agencyStatistic:null

    }
  },
  mounted() {
    this.userInfo = getUserInfo();
    if(getUserInfo()){
          this.config = this.config6
        }
      this.agencies = JSON.parse(localStorage.getItem('agencies2'))
      this.getResidentialDetailData()
  },
  methods:{
    handleClick(row,params){
      this.$datavAlert({
        title:params.title,
        showType:params.type,
        detailData:row
      })
    },
    getResidentialDetailData(){
      var _this = this;
      getResidentialDetail(this.agencies.id).then((res)=>{
        _this.agencyStatistic = res.data
      }).catch((err)=>{
      })
    }
  }
}
</script>

<style lang="less">
#index3 {
  .leftCmp-3{
    height:43%;
  }
  .rightCmp-1{
    height:25%;
  }
  .rightCmp-2{
    height:40%;
  }
  .rightCmp-3 {
    height:35%;
  }

}
</style>
