<template>
  <div class="driver w-full h-full">
    <div class="charglink charglink2">
      <a
        target="_blank"
        href="https://183.64.175.153:446/ssoforicm/login?userCode=jiashicang&pwd=82b2e8c26a22eccba0798d37b55d4e5d63f7758727db83e7841c6f862e5a1b3b&service=https://183.64.175.153:446/nms/views/coms/camera/online"
      >设备明细</a>
    </div>
    <div class="visu-center">
      <Map ref="viodemaps" style="width: 100%; height: 100%"></Map>
    </div>
    <div class="visu-left">
      <div class="visu-left-top">
        <div class="visu-left-top1">
          <img src="~@/assets/images/videoSurveillance/online.png" />
          <span>摄像头列表分类</span>
          （共{{ cameracont }}个）
        </div>
        <div
          class="charglink"
          style="width: 80px"
          @click="refreshTreeNum"
          v-loading="reloadLoding"
        >刷新</div>
      </div>
      <div class="visu-leftin" ref="visuleftin">
        <dropDown
          ref="dropdown"
          @doJhpoint="doJhpoint"
          @doPushMoniter="doPushMoniter"
          @drawRoads="drawRoads"
          @getCameracont="getCameracont"
          @getGsCameracontList="getGsCameracontList"
          @roadstatusChange="roadstatusChange"
        />
      </div>
      <div class="visu-left-cont">
        <div v-if="isShow" class="contrl-shouqi" @click="isShowContrl(1)"></div>
        <div v-else class="contrl-zhankai" @click="isShowContrl(2)"></div>
        <div class="visu-left-cont-in" ref="visuleftcont">
          <LayerContrl @layerSelect="layerSelect" ref="layercontrl"></LayerContrl>
        </div>
      </div>
    </div>
    <div class="visu-right">
      <div class="visu-left-top">
        <div class="visu-left-top1">
          <img
            src="~@/assets/images/videoSurveillance/video-icon1.png"
            style="width: 15px; height: 15px; margin-top: 0"
          />
          <span>设备状态</span>
        </div>
        <div class="visu-eq-cont-text">
          <span class="visu-eqimp-text1"></span> &nbsp;
          <!-- <span class="visu-eqimp-text2">{{ videoCount || "-" }}</span> -->
        </div>
      </div>
      <equipmentStatus ref="equipment"></equipmentStatus>
    </div>
    <!-- <div class="visu-right">
      <videoList ref="videolist" @doinitmap="doinitmap" />
    </div>-->
    <div class="road">
      <RoadStatus ref="roadstatus" />
    </div>
    <!-- <div class="colortips">
      <div class="ct-item">
        <div style="background: #2ba57e"></div>
        <span>1~100</span>
      </div>
      <div class="ct-item">
        <div style="background: #df9e36"></div>
        <span>100~1000</span>
      </div>
      <div class="ct-item" style="border: none">
        <div style="background: #ff5a5a"></div>
        <span>1000以上</span>
      </div>
    </div>-->
  </div>
</template>
<script>
import Map from "./Map/index.vue";
// import dropDown from './dropdown.vue';
import dropDown from "./dropdownNew.vue";
import videoList from "./videolist.vue";
import equipmentStatus from "./equipmentStatus.vue";
import LayerContrl from "./LayerContrl.vue";
import NewLayerContrl from "./newLayerContrl/layercontrl.vue";
// import PopupDialog from '@/components/PopupDialog/index1.vue';
import PopupDialog from "@/components/PopupDialog.vue";
import RoadStatus from "./RoadStatus/index.vue";
import { videoOnlineRateCount } from "@/api/equipment.js";
import moment from "moment";
export default {
  components: {
    Map,
    dropDown,
    videoList,
    PopupDialog,
    NewLayerContrl,
    LayerContrl,
    RoadStatus,
    equipmentStatus
  },
  data () {
    return {
      isShow: true,
      cameracont: 0,
      reloadLoding: false,
      videoCount: 0,
      query:{
        level:"0",
        dimension:'',
        timemode:'day',
        timeflag:moment(new Date()).subtract("day").format("yyyyMMDD")
      }
    };
  },
  mounted(){
    this.getCamercount()
    },
  methods: {
    doinitmap () {
      this.$refs.viodemaps.doinitmap();
    },
    //摄像头数量
    getCameracont (data) {
     console.log(data);
    },
    async getCamercount(){
        const cameracont =await videoOnlineRateCount(this.query)
       console.log(128888,cameracont);
      this.cameracont = cameracont.msgContent[0]?.allLineCount;
    },
    // 传递树结构的id和level
    drawRoads (id, level) {
      this.$refs.viodemaps.drawRoads(id, level);
      this.$refs.layercontrl.getRoadsId(id, level);
    },
    //因为视频监控没有公开组织架构，这里模仿传参给路况
    roadstatusChange (data) {
      this.$refs.roadstatus.getRoadId(data);
    },
    // 传递选择展示的视频
    doPushMoniter (num, data) {
      this.$refs.videolist.doPushMoniter(num, data);
    },
    // 已选择的摄像头分类
    layerSelect (data) {
      this.$refs.dropdown.layerSerch(data);
    },
    //是否显示摄像头分类
    isShowContrl (type) {
      if (type === 1) {
        this.$refs["visuleftcont"].style.height = "0px";
        this.$refs["visuleftin"].style.height = "calc(100% - 40px)";
        this.isShow = false;
      } else {
        this.$refs["visuleftcont"].style.height = "160px";
        this.$refs["visuleftin"].style.height = "calc(100% - 230px)";
        this.isShow = true;
      }
    },
    // 右侧高速摄像头统计
    getGsCameracontList (data) {
      this.videoCount = data.all[0] ? data.all[0].videoCount : 0;
      // this.$refs.equipment.getData(data);
    },
    // // 跳转至设备明细
    // toDetailed() {
    //   window.open(
    //     ``
    //   );
    // },
    // 刷新树节点的视频数量
    refreshTreeNum () {
      this.reloadLoding = true;
      setTimeout(() => {
        this.reloadLoding = false;
      }, 1000 * 5);
      this.$refs.dropdown.refreshTreeNum();
    }
  }
};
</script>
<style lang="postcss" scoped>
.driver {
  position: relative;
  text-shadow: none;
}
.visu-left {
  width: 430px;
  height: 86vh;
  /* background: red; */
  background: rgba(26, 60, 85, 0.6);
  position: absolute;
  left: 40px;
  top: 60px;
}
.visu-right {
  width: 430px;
  height: 90vh;
  /* background: red; */
  background: rgba(26, 60, 85, 0.6);
  position: absolute;
  right: 40px;
  top: 60px;
}
.visu-leftin {
  height: calc(100% - 230px);
  transition: all 0.7s;
  -webkit-transition: all 0.7s;
  overflow: hidden;
}
.leftin {
  height: 100%;
}
.visu-center {
  /* width: calc(100% - 1030px); */
  width: 100%;
  height: 100%;
  position: relative;
}
::v-deep(.el-select-dropdown__item) {
  color: #fff;
  &:hover {
    background: #1f659d;
  }
  &.selected {
    color: #409eff;
  }
}
::v-deep(.el-dialog__header) {
  background: #213355;
}
::v-deep(.el-dialog__title) {
  color: #aaeaf1;
}
::v-deep(.el-dialog__body) {
  color: #fff;
  background: #0c1d3c;
}
::v-deep(.el-loading-spinner) {
  width: 40px;
  left: 0;
  right: 0;
  margin: auto;
}
::v-deep(.el-loading-mask) {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
::v-deep(.el-pager li) {
  background-color: transparent !important;
  color: #07ffed;
}
::v-deep(.el-pager li.active) {
  color: #fff;
  border: 1px solid #07ffed;
}
::v-deep(.el-pagination__jump) {
  color: #07ffed;
}
::v-deep(.el-pagination .btn-prev) {
  background-color: transparent !important;
  color: #07ffed;
}
::v-deep(.el-pagination .btn-next) {
  background-color: transparent !important;
  color: #07ffed;
}
::v-deep(.el-pagination__total) {
  color: #07ffed;
}
.visu-left-top {
  width: 100%;
  height: 40px;
  padding-left: 20px;
  background: url("@/assets/images/videoSurveillance/topbg.png");
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.visu-left-top1 {
  display: flex;
  align-items: center;
}
.visu-left-top img {
  width: 23px;
  height: 23px;
  margin-right: 5px;
}
.visu-left-cont {
  width: 100%;
  padding: 17px 10px 0 10px;
  border-top: 2px dashed #1f6fa8;
  position: relative;
}
.visu-left-cont-in {
  height: 160px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  overflow: hidden;
}
.contrl-shouqi,
.contrl-zhankai {
  position: absolute;
  left: 50%;
  margin-left: -25px;
  width: 50px;
  height: 16px;
}
.contrl-shouqi {
  top: 0;
  background: url("@/assets/images/videoSurveillance/shouqi.png");
  background-size: 100% 100%;
}
.contrl-zhankai {
  top: -17px;
  background: url("@/assets/images/videoSurveillance/zhankai.png");
  background-size: 100% 100%;
}
.road {
  position: absolute;
  left: 500px;
  top: 100px;
  z-index: 1;
}
.charglink {
  position: relative;
  top: 3px;
  width: 96px;
  height: 34px;
  background: url("@/assets/images/ChargeInfo/sfgzttz.png");
  background-size: 100% 100%;
  font-size: 13px;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
}
.charglink2 {
  position: absolute;
  top: 10px;
  right: 310px;
  z-index: 999;
}
.visu-eq-cont-text {
  position: relative;
  top: 5px;
  right: 10px;
}
.visu-eqimp-text1 {
  font-size: 14px;
  color: #83afcf;
}
.visu-eqimp-text2 {
  font-size: 20px;
}
::v-deep(.el-loading-spinner) {
  top: 15%;
  left: 20%;
}
::v-deep(.el-loading-spinner .circular) {
  width: 20px;
  height: 20px;
}
.colortips {
  position: absolute;
  left: 50%;
  bottom: 100px;
  margin-left: -275px;
  width: 500px;
  padding: 8px 0;
  display: flex;
  background: #034f6c;
  border-radius: 50px;
}
.ct-item {
  width: 33.3%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #009eea;
}
.ct-item div {
  width: 12px;
  height: 12px;
  margin-right: 10px;
}
</style>
