<script lang="ts" setup name="VideoHK">
import { ElMessage } from 'element-plus'
import { getCurrentInstance, ref } from 'vue'
import EasyPlayer from '@easydarwin/easyplayer'
import devJson from 'public/config/dev.json'
// import WasmPlayer from 'public/EasyWasmPlayer.js'
import VideoDesc from '@/components/VideoDescV/index.vue' // 竖轴
import { getDevListPage } from '@/api/ptz/dev'
import useWebsocketStore from '@/store/modules/websocket'
// let videos: any = []
// const play = () => {
//   videos.forEach(item => {
//     try {
//       item.play()
//     } catch (e) {}
//   })
// }
// import flvjs from 'flv.js';

const { proxy } = getCurrentInstance()
const websocket = useWebsocketStore()
const router = useRouter()
const width = ref(0)
const height = ref(0)
const url = ref('ws://192.168.83.42:8080/rtp/34020000001110000002_34020000001320000001.live.flv')

const easyPlayer: any = ref()
const video1: any = ref()
const video2: any = ref()
const video3: any = ref()
const video4: any = ref()

// 默认查询条件
const defaultQuery = {
  keyword: '',
  stationId: '',
  offset: 1,
  limit: 4,
  sort: '',
  order: '',
}
// 数据列表
const list = ref([])
const newData = ref({})
const total = ref(0)
const listQuery = reactive({ ...defaultQuery })

const resize = () => {
  const divPlugin = document.getElementById('home')
  width.value = divPlugin.clientWidth / 2 - 107
  height.value = divPlugin.clientHeight / 2 - 5
}

// 查询数据
async function fetchData() {
  // console.log(devJson)
  list.value = []
  getDevListPage(listQuery).then((res: { data: { rows: []; total: number } }) => {
    // list.value = res.data.rows
    list.value = res.data.rows.map((item: any) => {
      item.playUrl = `http://192.168.0.56:8089/rtp/34020000001110000001_${devJson[item.monitorName]}.live.mp4`
      return item
    })
    // play()
    total.value = res.data.total
  })
}

// socket更新数据
const unwatch = watch(websocket, (newVal) => {
  if (newVal.videoData && Object.keys(newVal.videoData).length >= 1) {
    // 匹配对应id的数据
    const index = list.value.findIndex(item => item.deviceIp === newVal.videoData.deviceIp)
    if (index !== -1) {
      newData.value = Object.assign({}, list.value[index], newVal.videoData)
      list.value[index] = newData.value
    }
  }
})

const instance = getCurrentInstance()

const videoWrapper = ref() // 组件

// 分页切换
function handleCurrentChange(val) {
  listQuery.offset = val
  fetchData()
}

// 双击跳转
function cbDoubleClickWnd(iWndIndex, bFullScreen, event) {
  router.push({
    path: '/home/control',
    query: {
      id: list.value[iWndIndex].id,
    },
  })
}
function callbackfun(e) {
  console.log('callbackfun', e)
}
onMounted(() => {
  nextTick(() => {
    const easyPlayer = new WasmPlayer(null, 'easyplayer', callbackfun, { decodeType: 'auto', openAudio: 1, BigPlay: false, Height: true })
    easyPlayer.play('http://192.168.83.42:8080/rtp/34020000001110000002_34020000001320000006.live.mp4', 1)
    const easyPlayer1 = new WasmPlayer(null, 'easyplayer1', callbackfun, { decodeType: 'auto', openAudio: 1, BigPlay: false, Height: true })
    easyPlayer1.play('http://192.168.83.42:8080/rtp/34020000001110000002_34020000001320000009.live.mp4', 1)
    const easyPlayer2 = new WasmPlayer(null, 'easyplayer2', callbackfun, { decodeType: 'auto', openAudio: 1, BigPlay: false, Height: true })
    easyPlayer2.play('http://192.168.83.42:8080/rtp/34020000001110000002_34020000001320000005.live.mp4', 1)
    const easyPlayer3 = new WasmPlayer(null, 'easyplayer3', callbackfun, { decodeType: 'auto', openAudio: 1, BigPlay: false, Height: true })
    easyPlayer3.play('http://192.168.83.42:8080/rtp/34020000001110000002_34020000001320000007.live.mp4', 1)
    // const player = new EasyPlayer({
    //   container: video1.value,
    //   url: 'ws://192.168.83.42:8080/rtp/34020000001110000002_34020000001320000001.live.flv',
    //   autoplay: true
    // });
    // player.init();
    // if (flvjs.isSupported()) {
    //   const flvPlayer = flvjs.createPlayer({
    //     type: 'flv',
    //     url: 'ws://192.168.83.42:8080/rtp/34020000001110000002_34020000001320000001.live.flv',
    //     isLive: true
    //   });
    //   console.log(video1, 'lalala')
    //   flvPlayer.attachMediaElement(video1.value);
    //   flvPlayer.load();
    //   flvPlayer.play();
    //
    //
    //   var wsUrl = 'ws://192.168.83.42:8080/rtp/34020000001110000002_34020000001320000001.live.flv';
    //   var socket = new WebSocket(wsUrl);
    //
    //   socket.onmessage = function(event) {
    //     if (event.data instanceof Blob) {
    //       const reader: any = new FileReader();
    //       reader.onload = function() {
    //         flvPlayer.appendBuffer(new Uint8Array(reader.result));
    //       };
    //       reader.readAsArrayBuffer(event.data);
    //     }
    //   };
    // }
    // videos = document.querySelectorAll('video')!
    resize()
    // fetchData()
    window.addEventListener('resize', resize)
  })
})

onBeforeUnmount(() => {
  unwatch()
  window.removeEventListener('resize', resize)
})

const videoHK = ref('videoHK')
const isShow = ref(true)
</script>

<template>
  <div id="home" class="video-wrap home">
    <div style="width: 500px;height: 400px;">
      <div id="easyplayer" style="width: 200px;height: 200px;" />
    </div>
    <div style="width: 500px;height: 400px;">
      <div id="easyplayer1" style="width: 200px;height: 200px;" />
    </div>
    <div style="width: 500px;height: 400px;">
      <div id="easyplayer2" style="width: 200px;height: 200px;" />
    </div>
    <div style="width: 500px;height: 400px;">
      <div id="easyplayer3" style="width: 200px;height: 200px;" />
    </div>
    <!--    <easy-player -->
    <!--      id="player" -->
    <!--      :video-url="url" -->
    <!--      autoplay -->
    <!--      live -->
    <!--      muted -->
    <!--      style="width: 400px;height: 400px" -->
    <!--      ref="easyPlayer" -->
    <!--    /> -->
    <!--    <div class="video-container" style="margin-left: 100px"> -->
    <!--      <video ref="video1" muted id="video1" :src="list.length > 0 ? list[0].playUrl : ''" controls autoPlay :width="width" :height="height" style="margin-right:5px" /> -->
    <!--      <video ref="video2" id="video2" :src="list.length > 1 ? list[1].playUrl : ''" controls autoPlay :width="width" :height="height" /> -->
    <!--      <video ref="video3" id="video3" :src="list.length > 2 ? list[2].playUrl : ''" controls autoPlay :width="width" :height="height" style="margin-right:5px" /> -->
    <!--      <video ref="video4" id="video4" :src="list.length > 3 ? list[3].playUrl : ''" controls autoPlay :width="width" :height="height" /> -->
    <!--    </div> -->
    <!--    <div v-if="list.length >= 1" class="desc-wrap"> -->
    <!--      <video-desc v-for="(item, index) in list" v-show="item" :key="Math.random()" :class-name="`video-${index + 1}`" :detail="item" /> -->
    <!--    </div> -->
  </div>
  <el-pagination
    class="pagination"
    :current-page="listQuery.offset"
    :page-sizes="[4]"
    :page-size="listQuery.limit"
    :total="total"
    layout="total, prev, pager, next"
    @current-change="handleCurrentChange"
  />
</template>

<style lang="scss">
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-5%);
}

.videoHK {
  margin: 0 auto;
  height: calc(100vh - 100px);
  position: relative;
  width: calc(100% - 200px);
}

.video-wrap {
  padding: 0 5px;
  width: calc(100% - 10px);
  height: 100%;
  margin-left: 5px;
}

.home {
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 102px);
  justify-content: space-evenly;
  align-content: space-between;
  overflow: hidden;

  video {
    position: relative;
    object-fit: fill;
    overflow: hidden;
    background: #000;
  }
}

video-container {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.video-1,
.video-2,
.video-3,
.video-4 {
  position: absolute;
  width: 75px;
  height: calc(50% - 27px);
  padding: 20px 5px 0;
  display: inline-block;
}
</style>