<template>
  <div id="smartCommunity">
    <dv-full-screen-container style="height:100%">
      <topHeader :title="indexTitle" :index="1"></topHeader>
      <dv-border-box-1 class="main-container">
       <div style="width: 100%;">
         <div style="display: flex;position: relative;height: 10%;justify-content: center;align-items: center;">
            <headerData3 :data="communityData"></headerData3>
          </div>
          <div style="display: flex;width:100%;height: 90%;">
            <div class="rmctc-left-container">
              <div class="city-left-top">
                  <div v-for="(item,index) in smartParkData" :key="index" :style="{left:item.left+'px',top:item.top+'px'}" style="animation: 0.2s linear 0s 1 normal forwards running key;">
                      <div class="left1_img">
                        <i class="iconfont" :class="item.icon" style="font-size: 31px;width:31px;height:31px;display: block;color: #19d4ae;"></i>
                        <!-- <img src="./images/left1_logo5.png" style="width:31px;height:31px;display: block;"/> -->
                      </div>
                      <div class="left1_info">{{item.title}}</div>
                      <div class="left1_num">
                         <dv-digital-flop :config="item.number" style="width: 2rem;height: .5rem;" />
                      </div>
                  </div>
                  <!-- <div class="left1_manholeCover" style="animation: 0.2s linear 0.2s 1 normal forwards running key;">
                      <div class="left1_img"></div>
                      <div class="left1_info">智能井盖监控</div>
                      <div class="left1_num">
                         <dv-digital-flop :config="leftData[0].number" style="width: 2rem;height: .5rem;" />
                      </div>
                  </div>
                  <div class="left1_trafficLight" style="animation: 0.2s linear 0.4s 1 normal forwards running key;">
                      <div class="left1_img"></div>
                      <div class="left1_info">红绿灯</div>
                      <div class="left1_num">
                         <dv-digital-flop :config="leftData[0].number" style="width: 2rem;height: .5rem;" />
                      </div>
                  </div>
                  <div class="left1_busStation" style="animation: 0.2s linear 0.6s 1 normal forwards running key;">
                      <div class="left1_img"></div>
                      <div class="left1_info">公交站牌</div>
                      <div class="left1_num">
                         <dv-digital-flop :config="leftData[0].number" style="width: 2rem;height: .5rem;" />
                      </div>
                  </div>
                  <div class="left1_environment" style="animation: 0.2s linear 0.8s 1 normal forwards running key;">
                      <div class="left1_img"></div>
                      <div class="left1_info">环境监测</div>
                      <div class="left1_num">
                         <dv-digital-flop :config="leftData[0].number" style="width: 2rem;height: .5rem;" />
                      </div>
                  </div> -->
              </div>
              <div class="city-left-middle" style="animation: 0.5s linear 0.6s 1 normal forwards running key;height: 48%;">
                  <div class="city_title">
                      <img src="./images/left2_logo.png">
                      <div>智能设备</div>
                  </div>
                  <div class="left2_contain">
                    <dv-scroll-ranking-board :config="smartDeviceData" style="width:5rem;height:4rem;margin: 0 auto;" />
                    <!-- <dv-capsule-chart :config="smartDeviceData" style="margin:0 30px 0 10px" /> -->
                  </div>
              </div>
            </div>
                <div class="rmctc-center-container" >
                    <dv-border-box-7 :color="['#020e33', '#2C99F6']" backgroundColor="#020e33">
                       <video id="VideoID" src="./assets/map_bt1.mp4" autoplay loop muted style="width: 70%;height: 100%;position: absolute;bottom: -16%;height: 80%;left: 50%;transform: translateX(-50%);"></video>
                       <mapCmp :data="mapData" :orgInfo="orgInfo" @onRequest="onRequest"></mapCmp>
                       <mapDeviceMenu :smartDeviceData="smartDeviceData.data" @reqDeviceCount="reqDeviceCount"></mapDeviceMenu>
                     </dv-border-box-7>
                  <!-- <div class="visual_conBot">
                        <img class="visual_conBot_l" src="./images/ksh42.png">
                        <img class="visual_conBot_2" src="./images/ksh43.png">
                        <img class="visual_conBot_3" src="./images/ksh44.png">
                        <img class="visual_conBot_4" src="./images/ksh45.png">
                        <div class="visual_chart">
                          <video id="VideoID" src="./assets/map_bt1.mp4" autoplay loop muted style="width: 100%;height: 100%;position: absolute;"></video>
                          <mapCmp :data="communityData"></mapCmp>
                        </div>
                  </div> -->
                </div>
                <div class="rmctc-right-container">
                  <div class="city-left-middle" style="animation: 0.5s linear 0.6s 1 normal forwards running right;">
                      <div class="city_title">
                          <img src="./images/left2_logo.png">
                          <div>人脸统计</div>
                      </div>
                      <div class="left2_contain">
                          <div class="up">
                            <div class="bg-color-black item" v-for="item in faceCountData" :key="item.title">
                              <p class="colorBlue fw-b" style="margin-bottom: .1rem;">{{item.title}}</p>
                              <div>
                                <dv-digital-flop :config="item.number" style="height:.625rem;text-align: center;" />
                              </div>
                            </div>
                          </div>
                      </div>
                  </div>
                  <div class="city-left-middle" style="animation: 0.5s linear 0.6s 1 normal forwards running right;">
                      <div class="city_title">
                          <img src="./images/left2_logo.png">
                          <div>监控设备</div>
                      </div>
                      <div class="left2_contain" >
                        <div class="bottom-data">
                           <div class="item-box" v-for="(item,index) in vcDeviceData" :key="index">
                             <div class="d-flex">
                               <!-- <span class="coin">￥</span> -->
                               <dv-digital-flop :config="item.number" style="height:.625rem;" />
                             </div>
                             <p class="text" style="text-align: center;">
                               {{item.title}}
                               <!-- <span class="colorYellow">(件)</span> -->
                             </p>
                           </div>
                         </div>
                        <!-- <div class="percent">
                          <div class="item bg-color-black">
                            <span>在线</span>
                            <CenterChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData"/>
                          </div>
                        </div> -->
                      </div>
                  </div>
                  <div class="city-left-middle" style="animation: 0.5s linear 0.6s 1 normal forwards running right;">
                      <div class="city_title">
                           <img src="./images/left2_logo.png">
                           <div>告警事件</div>
                      </div>
                      <div class="left2_contain">
                        <radar :cdata="alarmCountData"></radar>
                      </div>
                  </div>
                </div>
          </div>
       </div>
      </dv-border-box-1>
    </dv-full-screen-container>
    <loadCmp v-if="loadFinish"></loadCmp>
  </div>
</template>
<script>
import topHeader from './components/topHeader.vue'
import digitalFlop from './components/digitalFlop.vue'
import scrollBoard from './components/scrollBoard.vue'
import card from './components/card.vue'
import roseChart from './components/roseChart.vue'
import estateSearch from './components/estateSearch.vue'
import mapCmp from './components/geoMap.vue'
import monitorEntry from './components/monitorEntry.vue'
import times from './components/time.vue'
import headerData3 from "./components/headerData3.vue"
import weather from "./components/weather.vue"
import popup from "./components/popup.vue"
import loadCmp from "./components/loadCmp.vue"
import {getCommunityList,getMultiCount,getDeviceCount} from "../../api/grid/index"
import {getList} from "../../api/order/deviceorder.js"
import {getByTenantId} from "../../api/system/setting.js"
import CenterChart from "./components/echart/center/centerChartRate";
import radar from "./components/echart/radar";
import mapDeviceMenu from "./components/mapDeviceMenu.vue";
  import {
    mapGetters
  } from "vuex";
export default {
  name: 'index',
  components: {
    topHeader,
    digitalFlop,
    roseChart,
    scrollBoard,
    card,
    estateSearch,
    mapCmp,
    monitorEntry,
    times,
    headerData3,
    weather,
    popup,
    loadCmp,
    CenterChart,
    radar,
    mapDeviceMenu
  },
  data () {
    return {
      smartDeviceData:{
        data:[],
      },
      smartParkData:[],
      rate: [
        {
          id: "centerRate1",
          tips: 60,
          colorData: {
            textStyle: "#3fc0fb",
            series: {
              color: ["#00bcd44a", "transparent"],
              dataColor: {
                normal: "#03a9f4",
                shadowColor: "#97e2f5"
              }
            }
          }
        },
        {
          id: "centerRate2",
          tips: 40,
          colorData: {
            textStyle: "#67e0e3",
            series: {
              color: ["#faf3a378", "transparent"],
              dataColor: {
                normal: "#ff9800",
                shadowColor: "#fcebad"
              }
            }
          }
        }
      ],
      alarmCountData:{
        data:[],
        name:[]
      },
     faceCountData: [],
     vcDeviceData:[],
      config:{
         header: ['事件名称', '地点', '时间', '上报人','处理状态'],
          data: [

          ],
          index: false,
          align: ['center'],
          rowNum: 4,
          headerBGC: 'rgba(6, 30, 93, 0.1)',
          headerHeight: 30,
          oddRowBGC: 'rgba(0, 44, 81, 0.1)',
          evenRowBGC: 'rgba(10, 29, 50, 0.1)',
          path:''
      },
      searchConfig:{
         header: ['姓名', '身份证', '车牌'],
          data: [],
          index: false,
          align: ['center'],
          rowNum: 4,
          headerBGC: 'rgba(6, 30, 93, 0.1)',
          headerHeight: 30,
          oddRowBGC: 'rgba(0, 44, 81, 0.1)',
          evenRowBGC: 'rgba(10, 29, 50, 0.1)',
          path:''
          // path:'/community/permanentPeople'
      },
      communityData:null,
      deviceList:[],
      indexTitle:'',
      alarmDetailData:null,
      alarmData:null,
      popupShow:false,
      loadFinish:true,
      alarmType:1,
      alarmTit:'',
      adCode:'',
      deviceType:'',
      mapData:[],
      orgInfo:''
    }
  },
  created() {
    // var bodyData = {};
    // bodyData.grant_type = 'password';
    // bodyData.scope = 'all';
    // bodyData.username = 'admin';
    // bodyData.password = '21232f297a57a5a743894a0e4a801fc3';
    // bodyData.tenantId = '000000';
    // console.log(bodyData)
    // $.ajax(
    //     {
    //         url:'http://192.168.2.164:9527/blade-auth/oauth/token',
    //         type:'get',
    //         dateType:'jsonp',
    //         jsonpCallback:'mytest',
    //         // beforeSend: function(xhr) {
    //         //     xhr.setRequestHeader("organId:'1333333333'");
    //         // },
    //         headers:{'Authorization':'Basic YWdlbmN5OmFnZW5jeV9zZWNyZXQ=','Tenant-Id':'000000','Access-Control-Allow-Origin':'*'},
    //         data:bodyData,
    //         success:function(data){
    //             console.log("sucess");
    //             console.log(data)
    //         },
    //         error:function(data){console.log("error");}
    //     }
    // );
    // this.indexTitle = sessionStorage.getItem("indexTitle");
    // this.onRequest()
  },

  computed: {
    ...mapGetters([
      "orgInfo"
    ])
  },
  mounted() {
    this.orgInfo = this.$store.getters.orgInfo
    this.onRequest()
  },
  methods:{
    onRequest(adCode){
      if(adCode){
        this.adCode = adCode
      }else{
        this.adCode = this.orgInfo.orgPosition
      }
      let collect  = [];
      var _this = this;
      collect.push(this.getCommunityDataList(this.adCode))
      // collect.push(this.getDataList())
      collect.push(this.getByTenantId())
      collect.push(this.reqMultiCount(this.adCode))
      collect.push(this.reqDeviceCount(this.deviceType,this.adCode))
        axios.all(collect)
            .then(
              axios.spread(() => {
                _this.mapData.length=0
                _this.mapData.push(_this.deviceList)
                _this.mapData.push(_this.communityData)
                _this.loadFinish = false;
              })
            )
            .catch(err => {
              // _this.loadFinish = false;
            });
    },
    reqDeviceCount(type,params){
      var _this = this;
      this.deviceType = type;
      return getDeviceCount(type,_this.adCode).then((res)=>{
        let data = res.data.data;
         _this.smartDeviceData.data.length = 0;
       if(data.singleTypeSmartDeviceVOList.length>0){
         data.singleTypeSmartDeviceVOList.map((item)=>{
           let obj = {}
           obj["name"] = item.deviceTypeName
           obj['value'] = item.deviceCount
           obj['deviceType'] = item.deviceType
           _this.smartDeviceData.data.push(obj)
           _this.$set(_this.smartDeviceData)
         })
       }
       _this.deviceList.length = 0;
       if(data.smartDeviceList.length>0){
         _this.deviceList = data.smartDeviceList;
       }
      })
    },
    reqMultiCount(params){
      var _this = this;
      return getMultiCount(params).then((res)=>{
        _this.faceCountData.length = 0;
        let data = res.data.data;
        let face = data.faceDeviceStaticVO
        let park = data.parkingStaticVO
        let alarm = data.alarmOrderVO
        let vc = data.vcDeviceVO
        this.alarmCountData.data.length = 0;
        this.alarmCountData.name.length = 0;
        this.faceCountData.length = 0;
        this.vcDeviceData.length = 0;
        this.smartParkData.length = 0;
        for(var i = 0;i<3;i++){
            switch(i){
              case 0:
              this.alarmCountData['data'].push(alarm.deviceAlarmCount)
              this.alarmCountData['name'].push("设备告警数")
              break;
              case 1:
              this.alarmCountData['data'].push(alarm.peopleAlarmCount)
              this.alarmCountData['name'].push("人员告警数")
              break;
              case 2:
              this.alarmCountData['data'].push(alarm.reportAlarmCount)
              this.alarmCountData['name'].push("报事告警数")
              break;
            }
        }
        this.alarmCountData['totalAlarmCount'] = alarm.totalAlarmCount;
        this.$set(this.alarmCountData)
        for(var i=0;i<5;i++){
          let obj = {
            title: "",
            number: {
              number: [],
              // toFixed: 1,
              content: "{nt}"
            }
          }
          let obj1 = {
            title: "",
            number: {
              number: [],
              // toFixed: 1,
              content: "{nt}"
            }
          }
          let obj3 = {
            title:'',
            number: {
              number: [],
              content: "{nt}",
              style: {
                fontSize: 20,
                fill: '#fff',
              },
              textAlign:'left'
            }
          }
          switch(i){
            case 0:
            obj['title'] = '人脸总数'
            obj['number'].number.push(face.faceCount)
            _this.faceCountData.push(obj)
            obj1['title'] = '监控设备总数'
            obj1['number'].number.push(vc.vcDeviceCount)
            _this.vcDeviceData.push(obj1)
            obj3['title'] = '车辆总数'
            obj3['top'] = '-12'
            obj3['left'] = '0'
            obj3['icon'] = 'iconsmart-tingche'
            obj3['number'].number.push(park.carCount)
            _this.smartParkData.push(obj3)
            break;
            case 1:
            obj['title'] = '已安装'
            obj['number'].number.push(face.hasInstallResidentialCount)
            _this.faceCountData.push(obj)
            obj1['title'] = '离线设备数'
            obj1['number'].number.push(vc.offlineCount)
            _this.vcDeviceData.push(obj1)
            obj3['title'] = '车辆抓拍总数'
            obj3['top'] = '-18'
            obj3['left'] = '38'
            obj3['icon'] = 'iconvideo-camera-full'
            obj3['number'].number.push(park.carRecordCount)
            _this.smartParkData.push(obj3)
            break;
            case 2:
            obj['title'] = '人脸设备'
            obj['number'].number.push(face.faceDeviceCount)
            _this.faceCountData.push(obj)
            obj1['title'] = '在线设备数'
            obj1['number'].number.push(vc.onLineCount)
            _this.vcDeviceData.push(obj1)
            obj3['title'] = '停车位总数'
            obj3['top'] = '-24'
            obj3['left'] = '77'
            obj3['icon'] = 'iconsmart-tingchechang'
            obj3['number'].number.push(park.parkingCount)
            _this.smartParkData.push(obj3)
            break;
            case 3:
            obj['title'] = '未安装'
            obj['number'].number.push(face.unInstallResidentialCount)
            _this.faceCountData.push(obj)
            obj3['title'] = '已装地磁总数'
            obj3['top'] = '-29'
            obj3['left'] = '41'
            obj3['icon'] = 'iconsmart-dici'
            obj3['number'].number.push(park.parkingDeviceCount)
            _this.smartParkData.push(obj3)
            break;
            case 4:
            obj3['title'] = '	停车场总数'
            obj3['top'] = '-34'
            obj3['left'] = '0'
            obj3['icon'] = 'iconsmart-tingche2'
            obj3['number'].number.push(park.parkingLotCount)
            _this.smartParkData.push(obj3)
            break;
          }
        }
      })
    },

    getByTenantId(){

	  let data = JSON.parse(localStorage.getItem("saber-userInfo"))
	  if(data){
		  return getByTenantId(data.content.tenant_id).then((res)=>{
		    this.indexTitle = res.data.data.indexTitle
		  })
	  }
    },
    getCommunityDataList(params){
      var _this = this;
      return getCommunityList(params).then((res)=>{
        _this.communityData = res.data.data;
      }).catch((err)=>{
        console.log(err)
      })
    },
    getDataList(){
      var _this = this;
      let current = 1;
      let size = 50;
      return getList(current,size).then((res)=>{
        _this.alarmData = res.data.data;
        let list = []
        _this.alarmData.records.map((item)=>{
          let arr = [];
          arr.push(item.alarmContent)
          arr.push(item.deviceName)
          arr.push(item.alarmTime)
          arr.push(item.handler)
          if(item.jobStatus==1){
            item.jobStatus = "已处理"
          }else{
            item.jobStatus = "未处理"
          }
          arr.push(item.jobStatus)
          list.push(arr)
        })
        this.config.data = list;
        this.$set(_this.config)
      }).catch((err)=>{
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less">
  @import url("./css/default.css");
  @import url("./css/mobile.css");
  @import url("./css/index.min.css");
#smartCommunity {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;
  .icontingchechangguanli{
    width: 50px;
    height: 50px;
  }
  #dv-full-screen-container {
    // background-image: url(../../../public/img/grid/bg2.png);
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
    background-color: #020e33;
  }

  .main-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .mh-left {
      font-size: 20px;
      color: rgb(1,134,187);

      a:visited {
        color: rgb(1,134,187);
      }
    }

    .mh-middle {
      font-size: 30px;
    }

    .mh-left, .mh-right {
      width: 450px;
    }
  }

  .main-container {
    height: calc(~"100% - 80px");

    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
    }
  }



  .right-main-container {
    width: 70%;
    box-sizing: border-box;
  }

  .rmc-top-container {
    height: 100%;
    display: flex;
  }

  .rmctc-center-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    .border-box-content {
      padding: 0!important;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
  }

   .rmctc-left-container,.rmctc-right-container {
    width: 25%;
    .border-box-content {
      flex-direction: column;
    }
  }

  .rmc-bottom-container {
    height: 35%;
  }

  .rmctc-chart-1, .rmctc-chart-2, .rmctc-chart-3  {
    height: 33.33%;
  }
  .up {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: space-between;
      .item {
        text-align: center;
        border-radius: 0.0625rem;
        padding-top: 0.2rem;
        margin-bottom: 0.2rem;
        width: 50%;
        height: 0.875rem;
      }
    }
    .percent {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 50%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          display: block;
          margin-top: 0.0875rem;
          display: flex;
          justify-content: center;
        }
      }
      .water {
        width: 100%;
      }
    }
    .bottom-data {
        display: flex;
        flex-wrap: wrap;
        .item-box {
          position: relative;
          width: 50%;
          color: #d3d6dd;
          text-align: center;
          margin-top: .2rem;
          // 金币
          .coin {
            position: absolute;
            left: 0.1rem;
            top: 0.2125rem;
            font-size: 0.25rem;
            color: #ffc107;
          }
          .colorYellow {
            color: yellowgreen;
          }
        }
      }

}
</style>
