<!--
  Description: 视频预览
  Author: 李亚光
  Date: 2024-11-07
 -->
<script lang="ts" setup name="VideoPlayerPage">
import dayjs from 'dayjs'
import { status } from 'nprogress'
import player from './components/wsPlayer.vue'
import player1 from './components/getPlayer.vue'
import { getDeviceList } from '@/api/page/device'
import { getResultList, getResultPic } from '@/api/page/result'
const $route = useRoute()
const publicPath = window.location.href.split('#')[0]
// 获取页面高度
const pageHeight = ref(window.innerHeight - 50 - 20)
const imgHeight = ref(160)
window.addEventListener('resize', () => {
  pageHeight.value = window.innerHeight - 50 - 20
  imgHeight.value = ((window.innerWidth * 0.2) - 40) * 9 / 16
})
const showVideoNum = ref('四屏')
const showVideo = ref<any[]>([])
const deviceList = ref<any[]>([])
const resultList = ref<any[]>([])
const offset = ref(1)
const isFullScreen = ref(false)
const showFull = ref({ id: '', status: '' })
function changeFullScreen(row: any) {
  if (row.id) {
    showFull.value = row
    isFullScreen.value = true
  }
}
const loadingResult = ref(true)
// 获取识别结果
const fetchResultData = () => {
  const row = JSON.parse(($route.query.row || '{}') as string)
  loadingResult.value = true
  getResultList({ offset: offset.value, limit: 20, name: row.id ? row.name : '' }).then((res) => {
    resultList.value = [...resultList.value, ...res.data.items.map((item: any) => {
      return {
        ...item,
        time: dayjs(item.time).format('YYYY-MM-DD HH:mm:ss'),
        url: `${publicPath}/image/loading.gif`,
      }
    })]
    resultList.value.forEach((item: any) => {
      if (item.url.includes('loading.gif')) {
        getResultPic({ frame_id: item.id }).then((res) => {
          const reader = new FileReader()
          reader.onload = (e: any) => {
            item.url = e.target.result
          }
          reader.readAsDataURL(res.data)
        }).catch(() => {
          item.url = ''
        })
      }
    })
    loadingResult.value = false
  }).catch(() => {
    loadingResult.value = false
  })
}
// 获取摄像头列表
const fetchData = () => {
  const row = JSON.parse(($route.query.row || '{}') as string)
  if (!row.id) {
    getDeviceList({ offset: 1, limit: 4 }).then((res) => {
      deviceList.value = res.data.items
      showVideo.value.push(res.data.items[0] || { url: '', id: '' })
      showVideo.value.push(res.data.items[1] || { url: '', id: '' })
      showVideo.value.push(res.data.items[2] || { url: '', id: '' })
      showVideo.value.push(res.data.items[3] || { url: '', id: '' })
    })
    setTimeout(() => {
      fetchResultData()
    }, 500)
  }
  else {
    showVideo.value = []
    deviceList.value = [row]
    showVideo.value.push(row)
    fetchResultData()
    changeFullScreen(row)
  }
}
fetchData()
const refrshResult = () => {
  offset.value = 1
  resultList.value = []
  const row = JSON.parse(($route.query.row || '{}') as string)
  loadingResult.value = true
  getResultList({ offset: offset.value, limit: 20, name: row.id ? row.name : '' }).then((res) => {
    resultList.value = [...resultList.value, ...res.data.items.map((item: any) => {
      return {
        ...item,
        time: dayjs(item.time).format('YYYY-MM-DD HH:mm:ss'),
        url: `${publicPath}/image/loading.gif`,
      }
    })]
    resultList.value.forEach((item: any) => {
      if (item.url.includes('loading.gif')) {
        getResultPic({ frame_id: item.id }).then((res) => {
          const reader = new FileReader()
          reader.onload = (e: any) => {
            item.url = e.target.result
          }
          reader.readAsDataURL(res.data)
        }).catch(() => {
          item.url = ''
        })
      }
      else {
        item.url = ''
      }
    })
    loadingResult.value = false
  }).catch(() => {
    loadingResult.value = false
  })
}

const load = () => {
  const row = JSON.parse(($route.query.row || '{}') as string)
  offset.value += 1
  getResultList({ offset: offset.value, limit: 20, name: row.id ? row.name : '' }).then((res) => {
    resultList.value = [...resultList.value, ...res.data.items.map((item: any) => {
      return {
        ...item,
        time: dayjs(item.time).format('YYYY-MM-DD HH:mm:ss'),
        url: `${publicPath}/image/loading.gif`,
      }
    })]
    resultList.value.forEach((item: any) => {
      if (item.url.includes('loading.gif')) {
        getResultPic({ frame_id: item.id }).then((res) => {
          const reader = new FileReader()
          reader.onload = (e: any) => {
            item.url = e.target.result
          }
          reader.readAsDataURL(res.data)
        }).catch(() => {
          item.url = ''
        })
      }
    })
  })
}

const playerType = ref(window.localStorage.getItem('playerType'))

const changeShowVideoNum = (index: number) => {
  showVideoNum.value = '一屏'
  showVideo.value = []
  showVideo.value.push(deviceList.value[index] || { url: '', id: '' })
  changeFullScreen(showVideo.value[0])
}
watch(() => showVideoNum.value, (newVal, oldVal) => {
  showVideo.value = []
  if (newVal === '一屏') {
    // showVideo.value.push(deviceList.value[0] || { url: '', id: '' })
  }
  if (newVal === '二屏') {
    showVideo.value.push(deviceList.value[0] || { url: '', id: '' })
    showVideo.value.push(deviceList.value[1] || { url: '', id: '' })
  }
  else if (newVal === '四屏') {
    showVideo.value.push(deviceList.value[0] || { url: '', id: '' })
    showVideo.value.push(deviceList.value[1] || { url: '', id: '' })
    showVideo.value.push(deviceList.value[2] || { url: '', id: '' })
    showVideo.value.push(deviceList.value[3] || { url: '', id: '' })
    isFullScreen.value = false
  }
})
const dblclickFull = () => {
  if ($route.query.row) {
    return
  }
  isFullScreen.value = false
  showVideoNum.value = '四屏'
}
</script>

<template>
  <!-- 布局 -->
  <app-container>
    <div class="container">
      <div class="left" :style="{ height: `${pageHeight}px` }">
        <div class="top">
          <span class="title">视频预览</span>
          <div v-if="!$route.query?.row">
            <!-- <el-radio-group v-model="showVideoNum">
              <el-radio-button label="一屏" value="一屏" />
              <el-radio-button label="二屏" value="二屏" />
              <el-radio-button label="四屏" value="四屏" />
            </el-radio-group> -->
            <el-dropdown>
              <el-button :type="showVideoNum === '一屏' ? 'primary' : ''">
                一屏
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="(item, index) in deviceList" :key="item.id"
                    @click="changeShowVideoNum(index)"
                  >
                    {{ `${item.type === '1' ? '摄像头' : '安全树'}-${item.name}`
                    }}
                  </el-dropdown-item>
                  <!-- <el-dropdown-item>Action 2</el-dropdown-item>
                  <el-dropdown-item>Action 3</el-dropdown-item>
                  <el-dropdown-item>Action 4</el-dropdown-item> -->
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-button :type="showVideoNum === '四屏' ? 'primary' : ''" @click="() => { showVideoNum = '四屏' }">
              四屏
            </el-button>
          </div>
          <div v-else style="height: 32px;" />
        </div>
        <div v-show="!isFullScreen" class="video">
          <player
            v-if="playerType === 'ws'" :id="`${showVideo[0]?.id}` || ''" :status="`${showVideo[0]?.status}` || ''"
            class="border-1" :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
            @dblclick="changeFullScreen(showVideo[0] || {})"
          />
          <player1
            v-if="playerType === 'get'" :id="`${showVideo[0]?.id}` || ''"
            :status="`${showVideo[0]?.status}` || ''" class="border-1"
            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
            @dblclick="changeFullScreen(showVideo[0] || {})"
          />
          <player
            v-if="playerType === 'ws'" :id="`${showVideo[1]?.id}` || ''" :status="`${showVideo[1]?.status}` || ''"
            class="border-2" :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
            @dblclick="changeFullScreen(showVideo[1] || {})"
          />
          <player1
            v-if="playerType === 'get'" :id="`${showVideo[1]?.id}` || ''"
            :status="`${showVideo[1]?.status}` || ''" class="border-1"
            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
            @dblclick="changeFullScreen(showVideo[1] || {})"
          />
          <player
            v-if="playerType === 'ws'" :id="`${showVideo[2]?.id}` || ''" :status="`${showVideo[2]?.status}` || ''"
            class="border-3" :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
            @dblclick="changeFullScreen(showVideo[2] || {})"
          />
          <player1
            v-if="playerType === 'get'" :id="`${showVideo[2]?.id}` || ''"
            :status="`${showVideo[2]?.status}` || ''" class="border-1"
            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
            @dblclick="changeFullScreen(showVideo[2] || {})"
          />
          <player
            v-if="playerType === 'ws'" :id="`${showVideo[3]?.id}` || ''" :status="`${showVideo[3]?.status}` || ''"
            class="border-4" :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
            @dblclick="changeFullScreen(showVideo[3] || {})"
          />
          <player1
            v-if="playerType === 'get'" :id="`${showVideo[3]?.id}` || ''"
            :status="`${showVideo[3]?.status}` || ''" class="border-1"
            :style="{ width: '50%', height: `${(pageHeight - 35) / 2}px` }"
            @dblclick="changeFullScreen(showVideo[3] || {})"
          />
        </div>
        <div v-if="isFullScreen" class="video">
          <player
            v-if="playerType === 'ws'" :id="`${showFull?.id}` || ''" :status="`${showFull?.status}` || ''"
            class="border" :style="{ width: '100%', height: `${(pageHeight - 35)}px` }" @dblclick="dblclickFull"
          />
          <player1
            v-if="playerType === 'get'" :id="`${showFull?.id}` || ''" :status="`${showFull?.status}` || ''"
            class="border" :style="{ width: '100%', height: `${(pageHeight - 35)}px` }" @dblclick="dblclickFull"
          />
        </div>
      </div>
      <div class="right" :style="{ height: `${pageHeight}px` }">
        <el-card v-loading="loadingResult">
          <div
            class="title"
            style="display: flex;justify-content: space-between;align-items: center;padding-left: 10px;padding-right: 10px;"
          >
            <span>
              识别结果
            </span>
            <el-button size="small" @click="refrshResult">
              刷新
            </el-button>
          </div>
          <ul
            v-if="resultList.length" v-infinite-scroll="load" class="infinite-list" style="overflow: auto;"
            :style="{ height: `${pageHeight - 64}px` }"
          >
            <li v-for="item in resultList" :key="item.id" class="item">
              <el-image
                class="img" :style="{ height: `${imgHeight}px` }" :preview-src-list="[item.url]" :src="item.url"
                fit="cover"
              />
              <span class="time">{{ item.time }}</span>
            </li>
          </ul>
          <div v-if="!resultList.length" :style="{ height: `${pageHeight - 64}px`, width: '100%' }">
            <el-empty :size="100" description="暂无数据" />
          </div>
        </el-card>
      </div>
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  width: 100%;

  .title {
    padding-left: 10px;
    font-weight: 700;
  }

  .left {
    width: 80%;

    // background-color: antiquewhite;
    .top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .video {
      display: flex;
      flex-wrap: wrap;
      border: 2px solid #122;

      .border-1 {
        border-right: 1.5px solid #122;
        border-bottom: 1.5px solid #122;
      }

      .border {
        border: 3px solid #122;
      }

      .border-2 {
        border-left: 1.5px solid #122;
        border-bottom: 1.5px solid #122;
      }

      .border-3 {
        border-right: 1.5px solid #122;
        border-top: 1.5px solid #122;
      }

      .border-4 {
        border-left: 1.5px solid #122;
        border-top: 1.5px solid #122;
      }
    }
  }

  .right {
    width: 20%;

    // background-color: burlywood;
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      padding-inline-start: 0 !important;
    }

    .infinite-list {
      width: 100%;

      .item {
        width: 100%;
        margin-bottom: 20px;

        .img {
          width: 100%;
          height: 160px;
        }

        .time {
          padding-left: 10px;
          margin-top: 10px;
          font-weight: 14px;
          color: #b1afaf;
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>
