<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-08 09:22:19
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2025-01-20 18:30:15
 * @FilePath: src/views/screen/components/video/DroneInspection.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" v-on:playerClick="playerClick" />
      </div>
    </div>
  </div>
</template>
<script>
import VideoPlay from '@/views/screen/components/video/components/VideoPlay.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'

export default {
  components: { VideoList, VideoPlay },
  data() {
    return {
      keyWord: '',
      data: [],
      listType: '无人机',
      numObj: {
        totalNum: 0,
        onlineNum: 0,
        offlineNum: 0,
      },
      playItem: {},
    }
  },
  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
        }
      })
    },

    updataDeviceList() {
      this.fetchData()
    },
    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)
    },
    //设置图标样式
    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 ''
      }
    },
  },
}
</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>
