<template>
  <div class="full" style="background: #235e70">
    <!--    <info-box1></info-box1>-->
    <dv-loading v-if="false" style="color: #dddddd"> 数据加载中 </dv-loading>

    <!--  自定义地图  -->
<!--    <map3-d ref="map" @MonitorClick="handleMonitorClick" ></map3-d>-->

    <!--  顶部导航栏  -->
    <div class="center title" style="width: 100%;height: 7%;position: absolute;top: 0">
      <div style="width: 30%;height: 100%" >
        <time-bar></time-bar>
      </div>
      <div style="width: 40%;height: 100%" class="center">琶洲测试社区</div>
      <dv-border-box-5 :reverse="true" style="width: 30%;font-size: 20px" :color="['#49baa5', '#dddddd']" backgroundColor="rgba(0, 0, 0, 0.5)">
        <div  class="full center">
          <my-top-menu></my-top-menu>
        </div>
      </dv-border-box-5>
    </div>

    <!--頂部数据栏-->
    <div style="position:absolute;width: 40%;height: 10%;top: 10%;right: 30%;color: white;cursor: pointer">
      <div class="full center">
        <dv-border-box-9
          class="click"
          :color="['#42c3b6', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)"
          v-for="(item,index) in totalList" :key="index"
          style="width: 250px;height: 80px;margin: 5px;"
        >
          <div class="full center" style="flex-direction: column">
            <div style="width: 100%;height: 50px;font-weight: bold" class="center">{{item.name}}</div>
            <div style="width: 100%;height: 50px;font-size: 20px" class="center">
              <CountIn :startVal='0' :endVal=item.count :speed=item.count/200 :decimals="0" :isReverse=false></CountIn>
            </div>
          </div>
        </dv-border-box-9>
      </div>
    </div>

    <!-- 场景数据面板    -->
    <city-screen v-if="scene==0"></city-screen>
    <person-screen @videoShow="handleMonitorClick" v-if="scene==1"></person-screen>
    <car-screen @videoShow="handleMonitorClick" v-if="scene==2"></car-screen>
    <government-affairs @videoShow="handleMonitorClick" v-if="scene==3"></government-affairs>
    <epidemic-screen v-if="scene==4"></epidemic-screen>
    <environment-protection v-if="scene==5"></environment-protection>

    <!--  场景菜单   -->
    <div style="position:absolute;width: 60%;height: 15%;top: 85%;right: 20%;color: #ffffff">
      <div class="full center">
        <!--        <dv-border-box-7-->
        <div
          v-for="(item,index) of sceneMenu" :key="item"
          style="cursor: pointer;width: 180px;height: 65px;background: url('/data/button-bg.png') no-repeat center/contain" class="center click" :color="['#58d9c5']" backgroundColor="rgba(36, 107, 107)">
          <div class="full center " @click="handleDevice(index)" style="color: #3dffe1;font-weight: bold">{{item}}</div>
        </div>
      </div>
    </div>

    <!-- 视屏面板    -->
    <dv-border-box-10 class="videoPan" v-if="videoShow" :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 50%;height: 50%;top: 20%;right: 25%">
      <div style="width: 100%;flex-direction: column;" class="full center">
        <div class="center closeButton" style="cursor: pointer;width: 98%;height: 10%;color: white;font-size: 24px;border-radius: 10px;margin-top: 5px"
             @click="videoShow=!videoShow"
        >关闭</div>
        <div style="width: 98%;height: 85%;">
<!--          <cstor-live-player :audio="true" style="height: 100%;width: 100%" src="http://36.103.228.148:8888/live/64010500011327385808.flv"/>-->
          <!--           <iframe src="https://www.zhihu.com/video/1333044671954403328" allowfullscreen> </iframe>-->
        </div>

      </div>
    </dv-border-box-10>
  </div>
</template>

<script>
import Map3D from "../../components/3DMap/Map3D";
// import CstorLivePlayer from 'cstor-live-player'
// import 'cstor-live-player/dist/cstor-live-player.css';
import TimeBar from "../../components/3DMap/TimeBar";
import MyTopMenu from "@/views/bigScreen/components/my-top-menu";
import CityScreen from "../../components/scene/CityScreen";
import POIService from "../../components/3DMap/POIService";
import EnvironmentProtection from "../../components/scene/EnvironmentProtection";
import EpidemicScreen from "../../components/scene/EpidemicScreen";
import GovernmentAffairs from "../../components/scene/GovernmentAffairs";
import CountIn from "../../components/count-in/count-in";
import PersonScreen from "@/components/scene/PersonScreen";
import CarScreen from "@/components/scene/CarScreen";
export default {
  name: "mainScreen",
  components: {
    PersonScreen,CarScreen,
    EpidemicScreen,EnvironmentProtection,GovernmentAffairs, CityScreen, MyTopMenu, TimeBar, Map3D, CountIn},
  mounted() {
    this.scene = 0;
  },
  data(){
    return{
      scene: 0,
      videoShow: false,
      sceneMenu: ["首页","人员管理","车辆管理","智能设备","视频监控","环境卫生"],
      totalList: [
        {count: '350',name: '总社区数'},
        {count: '601',name: '总小区数'},
        {count: '7260',name: '总楼栋数'},
        {count: '16471',name: '总单元数'},
        {count: '276616',name: '总房间数'},
        {count: '3412',name: '总设备数'},
        {count: '40635',name: '总人口数'},
      ],
    }
  },
  provide(){
    return{
      screen: this
    }
  },
  methods: {
    handleMonitorClick(){
      this.videoShow = true;
    },
    handleDevice(index){
      this.scene = index;
      switch (index){
        case 0:
          this.$refs['map'].toLayer('ss');
          break;
        case 1:
          this.$refs['map'].toLayer('monitoring');
          break;
        case 2:
          this.$refs['map'].toLayer('event');
          break;
        default: ;
      }
    }
  },
}
</script>

<style scoped>
.full{
  width: 100%;
  height: 100%;
  user-select:none;
}
.center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.title{
  color: white;
  font-size: 40px;
}
.demo{
  color: rgba(0, 100, 100, 0.5);
}
.closeButton{
  background:rgba(84,36,17,0.5) ;
}
.closeButton:hover{
  background:rgba(84,36,17,0.8) ;
}
.click:hover{
  transform: translate(2px,2px);
}
</style>
