<template>
  <div class="video111">
    <el-container>
      <el-container style="display:flex;justify-content: space-between;">
        <el-aside width="12vw" style="height: 89vh;margin-top: 5.5vh;">
          <el-tree
            :data="videoData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            accordion
          >
            <div slot-scope="{ node }">
              <span>
                <i class="el-icon-video-camera-solid"> {{ node.label }}</i>
              </span>
            </div>
          </el-tree>
        </el-aside>

        <div id="elMain" class="el-mains" style="height: 94.5vh;" v-show="elmainShow1">
          
          <div v-if="isChildren1" class="iframeList">
            <!-- <div v-for="(item,index) in itemList" :key="index" class="videoChildren">
              <video :ref="item.ref" width="433" height="289" muted autoplay class="twelveVideo"></video>
            </div> -->
          </div>

          <div v-if="btnChildren" class="btn1">
            <el-button
              :disabled="up"
              @click="upPage"
              style="background-color: #7bbfea; color: white"
              >上一页</el-button
            ><el-button
              :disabled="down"
              @click="downPage"
              style="background-color: #7bbfea; color: white"
              >下一页</el-button
            >
          </div>

          <div v-if="isChildren2">
            <iframe :src="url" class="iframeSingle"></iframe>
          </div>

          <div v-show="noPtz" class="noPtzVideo1">
            <div class="noPtzCloseStyle" @click="noPtzCloseFn()"><span class="el-icon-close"></span> 关闭</div>
            <video id="noPtzVideo" width="1300" height="720" muted autoplay></video>
          </div>

          <div v-show="isChildren3" class="dahuaViews"></div>
          
        </div>

        <div class="aiAnalysisViews">
          <div class="aiAnalysisViews_Title">智能AI分析</div>
          <div style="margin:1vh 0px 0px 0vw;">
            <el-radio-group v-model="aiTabPosition" @change="aiTabPositionFn">
              <el-radio-button label="今天">今天</el-radio-button>
              <el-radio-button label="近7天">近7天</el-radio-button>
              <el-radio-button label="近30天">近30天</el-radio-button>
            </el-radio-group>
          </div>
          <div class="aiAnalysisViews_1">
            <span>AI报警总数：23</span><span style="margin-left:30px;">处理数：10</span>
          </div>
          <div class="aiAnalysisViews_1">处理率：10/23*100%</div>
          <div id="echarts1" class="echarts1"></div>
          <div class="aiAnalysisViews_1">报警车辆排行榜</div>
          <div id="echarts2" class="echarts2" style="margin-top:1vh"></div>
          <div class="aiAnalysisViews_1">报警车辆信息</div>
          <el-table :data="aiAnalysisTableData" border style="width: 98%" height="24.5vh">
            <el-table-column prop="carNo" label="车牌号" align="center"></el-table-column>
            <el-table-column prop="type" label="报警类型" align="center"></el-table-column>
            <el-table-column prop="createTime" label="报警时间" align="center"></el-table-column>
            <el-table-column label="查看" align="center"></el-table-column>
          </el-table>
        </div>

      </el-container>
    </el-container>
  </div>
</template>

<script>
import Hls from "hls.js"
//import EZUIKit from "ezuikit-js";
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts';

var noPtzhls = null;
export default {
  data() {
    return {
      aiAnalysisTableData:[],
      videoData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      itemList: [],
      itemListNext: [],
      itemListMiddleman: [],
      isChildren1: true,
      isChildren2: false,
      isChildren3: false,
      btnChildren: false,
      isIP: "",
      url:"http://192.168.9.2:85/cn/demo.html?ip=",
      url1:"http://192.168.9.2:85/cn/demo",
      dahuaData: [],
      up: true,
      down: false,
      accessToken:"",
      noPtz:false,
      elmainShow1:false,
      aiTabPosition:'今天',
      echarts1Data:[{ value: 1048, name: '接打电话' }, { value: 735, name: '分神驾驶' }, { value: 580, name: '前向碰撞' },],
      echarts2Data:{
        name:['鲁A11111','鲁A11111','鲁A11111','鲁A11111','鲁A11111','鲁A11111',],
        kache1:[20,20,20,20,20,20,],
        kache2:[20,20,20,20,20,20,],
        kache3:[20,20,20,20,20,20,],
      },

    };
  },
  mounted() {
    this.getCode();
    //this.getDaHua();
    //this.getAccessToken();
    this.echarts1Fn();
    this.echarts2Fn();
  },
  methods: {
    getAccessToken() {
      let param = {};
      HttpReq.truckDispatching.mineMonitoringGetTokenaQuery(param).then((res) => {
				this.accessToken = res.data.accessToken;
			})
    },
    getCode() {
      //分区数据
      HttpReq.truckDispatching.carMonitoringFleetQuery({size: 999}).then((res) => {
        let data1 = [];
        res.content.forEach((item) => {
          item.label = item.name;
          data1.push(item);
        });
        if (res != "") {
          //总摄像头数据
          HttpReq.truckDispatching.carMonitoringCarsQuery({size: 999}).then((res) => {
            let fenquName = [];
            res.content.forEach((item,index) => {
              item.ref = "video" + index;
              item.hls = null;
              item.label = item.carnumber;
              fenquName.push(item);
            });
            data1.forEach((item) => {
              item.children = [];
              fenquName.forEach((itemSon,index)=>{
                if(item.id == itemSon.motorcadeId){
                  item.children.push(itemSon);
                }
              })
            });
            this.videoData = data1;
            console.log(this.videoData);
          })
        }
			})
    },
    handleNodeClick(data) {
      this.elmainShow1 = true;
      console.log(data);
      let that = this;
      if (data.children) {
        let temporaryData1 = [];
        let temporaryData2 = [];
        if (data.children.length > 12) {
          for (let i = 0; i < 12; i++) {
            temporaryData1.push(data.children[i]);
          }
          for (let j = 12; j < data.children.length; j++) {
            temporaryData2.push(data.children[j]);
          }
          this.itemList = temporaryData1;
          this.itemListNext = temporaryData2;
          this.btnChildren = true;

          // this.$nextTick(()=>{
          //   this.itemList.forEach(function(item,index){ 
          //     item.hls = new Hls();
          //     //item.hls.loadSource(item.url)
          //     item.hls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8')
          //     item.hls.attachMedia(that.$refs[item.ref][0]);
          //     item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
          //       that.$refs[item.ref][0].play();
          //     });
          //   })
          // })

          // if(noPtzhls != null){
          //   noPtzhls.destroy();
          // }
            
        } else {
          this.btnChildren = false;
          this.itemList = data.children;

          // this.$nextTick(()=>{
          //   this.itemList.forEach(function(item,index){ 
          //     item.hls = new Hls();
          //     //item.hls.loadSource(item.url)
          //     item.hls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8')
          //     item.hls.attachMedia(that.$refs[item.ref][0]);
          //     item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
          //       that.$refs[item.ref][0].play();
          //     });
          //   })
          // })

          // if(noPtzhls != null){
          //   noPtzhls.destroy();
          // }

        }

        this.isChildren1 = true;
        this.isChildren2 = false;
        this.isChildren3 = false;
        this.up = true;
        this.down = false;
        //this.noPtz = false;

        //改变视频大小
        // this.$nextTick(()=>{
        //   this.winSize();
        // })
      } else {
        this.btnChildren = false;
        let noPtzVideo = document.getElementById('noPtzVideo');
        noPtzhls = new Hls();
        //noPtzhls.loadSource(data.url);
        noPtzhls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8');
        noPtzhls.attachMedia(noPtzVideo);
        noPtzhls.on(Hls.Events.MANIFEST_PARSED,function() {
          noPtzVideo.play();
        });
        this.isChildren1 = false;
        this.isChildren2 = false;
        this.isChildren3 = false;
        this.btnChildren = false;
        this.noPtz = true;
      }
    },
    getDaHua() {
      HttpReq.truckDispatching.carMonitoringCarsQuery({page:0,size:100}).then((res) => {
        let dahua = [];
        res.content.forEach(function (item) {
          if (item.motorcadeId == 2) {
            dahua.push(item);
          }
        });
        this.dahuaData = dahua;
			})
    },
    upPage() {
      let that = this;
      this.up = true;
      this.down = false;
      this.itemList = this.itemListMiddleman;
      this.$nextTick(()=>{
        this.itemList.forEach(function(item,index){ 
          item.hls = new Hls();
          item.hls.loadSource(item.url)
          item.hls.attachMedia(that.$refs[item.ref][0]);
          item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
            that.$refs[item.ref][0].play();
          });
        })
      })
      //改变视频大小
      // this.$nextTick(()=>{
      //   this.winSize();
      // })
    },
    downPage() {
      let that = this;
      this.itemListMiddleman = this.itemList;
      this.itemList = [];
      this.up = false;
      this.down = true;
      this.itemList = this.itemListNext;
      this.$nextTick(()=>{
        this.itemList.forEach(function(item,index){ 
          item.hls = new Hls();
          item.hls.loadSource(item.url)
          item.hls.attachMedia(that.$refs[item.ref][0]);
          item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
            that.$refs[item.ref][0].play();
          });
        })
      })
      //改变视频大小
      // this.$nextTick(()=>{
      //   this.winSize();
      // })
    },
    //监控el-main大小
    winSize(){
      let elMain = document.getElementById('elMain');
      let elMainWight = parseInt(getComputedStyle(elMain).width) ;
      if(elMainWight > 1650){
        let twelveVideo = document.getElementsByClassName('twelveVideo');
        for(let i = 0;i < twelveVideo.length;i++){
          twelveVideo[i].width = 390;
          twelveVideo[i].height = 250;
        }
      }

    },
    aiTabPositionFn(){
      console.log(this.aiTabPosition);
    },
    //饼图1
    echarts1Fn(){
      echarts.init(document.getElementById('echarts1')).dispose();
      var myChart = echarts.init(document.getElementById('echarts1'));
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '1%',
          left: 'center'
        },
        color:['rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)','rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)','rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)','rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)','rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)',],
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius:20,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '35',
                fontWeight: 'bold',
                color:'black',
              }
            },
            labelLine: {
              show: false
            },
            data: this.echarts1Data,
          }
        ]
      };
      option && myChart.setOption(option);
    },
    //柱状图2
    echarts2Fn(){
      echarts.init(document.getElementById('echarts2')).dispose();
      var myChart = echarts.init(document.getElementById('echarts2'));
      var option = {
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow' 
              }
          },
          legend: {
              textStyle:{
                  color: 'black',
                  fontSize:14,
              },
          },
          grid: {
              top: '15%',
              left: '1%',
              right: '5%',
              bottom: '3%',
              containLabel: true
          },
          yAxis: {
              type: 'category',
              data: this.echarts2Data.name,
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: 'black',
                      fontSize:14,
                  }
              },
              axisLine: {
                  lineStyle: {
                      color: 'black',
                      width: 1
                  }
              },
          },
          xAxis: {
              type: 'value',
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: 'black',
                      fontSize:14,
                  }
              },
              axisLine: {
                  lineStyle: {
                      color: 'black',
                      width: 0
                  }
              },
          },
          series: [
              {
                  name: '接打电话',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: this.echarts2Data.kache1,
                  barWidth: 20,
                  itemStyle: {
                    color: 'rgb(84,112,198)'
                  },
              },
              {
                  name: '分神驾驶',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: this.echarts2Data.kache2,
                  barWidth: 20,
                  itemStyle: {
                    color: 'rgb(145,204,117)'
                  },
              },
              {
                  name: '前向碰撞',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: this.echarts2Data.kache3,
                  barWidth: 20,
                  itemStyle: {
                    color: 'rgb(250,200,88)'
                  },
              }
          ]
      };
      option && myChart.setOption(option);
    },
    noPtzCloseFn(){
      this.elmainShow1 = false;
      if(noPtzhls != null){
        noPtzhls.destroy();
      }
    },
  },
  //销毁
  beforeDestroy() {
    this.itemList.forEach(function(item,index){ 
      item.hls.destroy();
    })
    if(noPtzhls != null){
      noPtzhls.destroy();
    }
  }
  
};
</script>
<style>
.noPtzCloseStyle{
  position: absolute;
  top:1vh;
  right: 1vw;
  width: 5vw;
  height: 4vh;
  background-color: rgb(170,170,170);
  color: white;
  font-size: 22px;
  border-radius: 5px;
  text-align: center;
  line-height: 4vh;
  cursor: pointer;
}
.noPtzVideo1{
  width: 100%;
  height: 100%;
  background-color: white;
  padding-top: 10vh;
  box-sizing: border-box;
  position: relative;
}
.mianBodysSon{
  width: 100%;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
}
.btn1 {
  position: absolute;
  top: 92%;
  left: 57%;
}
.dahuaViews {
  display: flex;
  flex-wrap: wrap;
  margin-left: 5px;
}
.dahuaViews>div{
  margin-left: 1px;
  border: 1px greenyellow solid;
}

.videoChildren {
  scrollbar-width: none;
}
.el-header,
.el-footer {
  background-color: #7bbfea;
  color: white;
  text-align: center;
  letter-spacing: 10px;
  font-size: 25px !important;
  line-height: 60px;
}

.el-aside::-webkit-scrollbar {
  display: none;
}
.el-aside {
  scrollbar-width: none;
}
.el-aside {
  background-color: #fffef9;
  color: #333;
  text-align: center;
  padding: 0;
  margin-bottom: 0px;
  z-index: 3;
}

.video111 .el-mains {
  background-color: rgba(255, 255, 255, 0);
  color: #333;
  text-align: center;
  overflow:hidden;
  width: 68vw;
  z-index: 3;
  border-left: 1px solid gainsboro;
}

.el-tree-node__content {
  height: 55px;
  background-color: #e9eef3;
  width: 228px;
}
.el-tree-node {
  background-color: #e9eef3;
  border: 1px solid #d3d7d4;
}
.el-tree-node__content:hover {
  background-color: white;
}
.video111 .iframeList {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  padding: 0;
  overflow: hidden;
}
.video111 .iframeList>div{
  border: 0.5px greenyellow solid;
}
.iframeItem {
  height: 220px;
  width: 340px;
  background: #fff;
  margin-bottom: 0px;
}
.iframeItem::-webkit-scrollbar {
  display: none;
}
.iframeItem {
  scrollbar-width: none;
}
@-moz-document url-prefix() {
  .iframeItem {
    border: 1px solid palegreen;
  }
}
.iframeSingle {
  width: 1378px;
  height: 763px;
}
.aiAnalysisViews{
  width: 20vw;
  height: 94.5vh;
  background-color: white;
  padding: 1vh 0px 0px 1vh;
  box-sizing: border-box;
  border-left: 1px solid gainsboro;
}
.aiAnalysisViews_Title{
  font-size: 24px;
  font-weight: 600;
}
.aiAnalysisViews_1{
  margin-top: 1vh;
  font-size: 18px;
  font-weight: 600;
}
.echarts1{
  width: 99%;
  height: 20vh;
  overflow: hidden;
}
.echarts2{
  width: 99%;
  height: 27vh;
  overflow: hidden;
}
</style>
