<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-08 09:22:19
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2025-01-20 18:30:16
 * @FilePath: src/views/screen/components/video/FixedCameraInspection.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div style="width: 100%; height: 100%">
    <div style="display: flex; flex-direction: row; width: 100%; height: 100%">
      <div style="display: flex; flex-direction: column; width: 20%; height: 100%; padding: 3px 10px 10px 10px">
        <div style="padding: 10px 15px 0 20px; display: flex; flex-direction: row">
          <el-input placeholder="请输入内容" v-model="keyWord" clearable @clear="resetBtn" v-no-whitespace></el-input>
          <el-button icon="el-icon-search" @click="searchBtn" class="searchButton"></el-button>
        </div>
        <div style="height: 95%">
          <VideoList
            :data="data"
            :get-image-src="getImageSrc(listType)"
            :list-type="listType"
            v-on:playVideo="playVideo"
            @updataDeviceList="updataDeviceList"
          />
        </div>
      </div>
      <div style="width: 77%; height: 100%">
        <VideoPlay
          ref="videoPlay"
          :video-num="numObj"
          :item="playItem"
          :timing-show="true"
          :timing-status="timingStatus"
          v-on:playerClick="playerClick"
          v-on:changCellCount="changCellCount"
          v-on:changeTimingStatus="changeTimingStatus"
        />
      </div>
    </div>
  </div>
</template>
<script>
// import VideoPlay from '@/views/screen/components/video/components/VideoPlay.vue'
import VideoPlay from '@/views/screen/components/video/components/videoPlayNew.vue'
// import VideoList from '@/views/screen/components/video/components/VideoList.vue'
import VideoList from '@/views/screen/components/video/components/videoListNew.vue'
import { getVideoList } from '@/api/screen/screen'
import { encryptCBC } from '@/utils/aescbc'

export default {
  components: { VideoList, VideoPlay },
  data() {
    return {
      keyWord: '',
      data: [],
      listType: '固定摄像头',
      numObj: {
        totalNum: 0,
        onlineNum: 0,
        offlineNum: 0,
      },
      playItem: {},
      onlineArray: [],
      lastIndex: 0,
      timer: null, // Add timer property
      timingStatus: false,
    }
  },
  mounted() {
    this.fetchData()
    setInterval(this.fetchDatas, 5 * 60 * 1000) // Fetch data every 20 seconds
  },
  methods: {
    fetchData() {
      this.getFixCameraData({ deviceType: '固定摄像头' })
    },
    //获取终端设备数据
    getFixCameraData(params) {
      getVideoList(params).then(res => {
        this.data = res.data
        if (res.data.length > 0) {
          this.numObj.totalNum = res.data[0].totalNum
          this.numObj.onlineNum = res.data[0].onlineNum
          this.numObj.offlineNum = res.data[0].offlineNum
        } else {
          this.numObj.totalNum = 0
          this.numObj.onlineNum = 0
          this.numObj.offlineNum = 0
        }
        this.playBallVideo()
      })
    },
    startTimer() {
      this.timingStatus = true
      this.timer = setTimeout(() => {
        this.$refs.videoPlay.closeAllVideo()
        this.getFixCameraData({ deviceType: '固定摄像头' })
      }, 1000 * 60)
    },
    stopTimer() {
      this.timingStatus = false
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
    },
    changCellCount(count) {
      this.$refs.videoPlay.cellCount = count
      this.getFixCameraData({ deviceType: '固定摄像头' })
    },
    changeTimingStatus(status) {
      if (status == 1) {
        this.startTimer()
      } else {
        this.stopTimer()
      }
    },
    playBallVideo: function () {
      this.stopTimer()
      //循环播放在线视频 每五分钟更换一次 一次最多六个
      if (this.data.length > 0 && this.numObj.onlineNum > 0) {
        this.$refs.videoPlay.activeArray = []
        this.$refs.videoPlay.activePlayer = 1
        this.onlineArray = []
        // arr   1 2 3 4 5 6
        let cycleNumber = 0
        let index = this.lastIndex
        while (this.onlineArray.length < this.$refs.videoPlay.cellCount && cycleNumber < this.data.length * 2) {
          console.log('index', index)
          const video = this.data[index]
          console.log('video', video)
          if (video && video.status == 1 && !this.onlineArray.some(v => v.puid === video.puid)) {
            this.onlineArray.push(video)
          }
          index = (index + 1) % this.data.length
          cycleNumber++
        }
        this.lastIndex = index
        console.log('this.onlineArray', this.onlineArray)
        for (let i = 0; i < this.onlineArray.length; i++) {
          if (this.onlineArray[i].status == 1) {
            if (this.$refs.videoPlay.activePlayer <= this.$refs.videoPlay.cellCount) {
              this.$refs.videoPlay.autoPlayVideo(this.onlineArray[i])
            }
          }
        }
        this.startTimer()
      }
    },
    open(e) {
      console.log('open', e)
    },
    searchBtn() {
      this.getFixCameraData({ deviceType: '固定摄像头', keyWord: this.keyWord })
    },
    resetBtn() {
      this.keyWord = ''
      this.getFixCameraData({ deviceType: '固定摄像头', keyWord: this.keyWord })
    },
    playerClick(e) {
      this.clickItem = e
      console.log('playerClick', e)
    },
    //播放视频
    playVideo(e) {
      // this.playItem = e
      // this.$refs.videoPlay.play(e)
      this.$refs.videoPlay.videoPlayNew(e)
    },
    //设置图标样式
    getImageSrc(type) {
      switch (type) {
        case '固定摄像头':
          return require('../../../../assets/screen/video/video.png')
        case '无人机':
          return require('../../../../assets/screen/video/drone.png')
        case '终端设备':
          return require('../../../../assets/screen/video/device.png')
        default:
          return ''
      }
    },
    updataDeviceList() {
      this.fetchData()
    },
  },
}
</script>

<style scoped lang="scss">
// 改变input里的字体颜色

::v-deep input::-webkit-input-placeholder {
  color: whitesmoke;
  font-size: 15px;
}

// 改变input框背景颜色
::v-deep .el-input__inner {
  background-color: transparent !important;
  border: 1px solid rgba(41, 78, 136, 0.8);
  color: whitesmoke;
  width: 97%;
}

::v-deep .searchButton {
  background-color: transparent !important;
  width: 70px;
  border: 1px solid rgba(41, 78, 136, 0.8);
}
::v-deep .el-badge__content.is-dot {
  height: 15px !important;
  width: 15px !important;
  padding: 0;
  right: 0;
  border-radius: 50%;
}
</style>
