<template>

<el-dialog
  v-model="state"
  width="700"
  class="video-dialog"
  :align-center="true"
  @closed="onClosed"
>
  <template #header>
    <div class="header">
      <div class="ttl">{{ videoInfo?.pileNumber }}</div>
    </div>
  </template>

  <div class="container">

    <VideoPlayer
      v-if="video"
      v-bind="{
        frameW: 700,
        frameH: 500,
        vcode: videoInfo.cameraIndexCode,
        pileNumber: videoInfo.pileNumber
      }"
    />

    <div class="lines">
      <Timer symbols="/" />
      <div>全息断面 {{ videoInfo.section }}</div>
    </div>

  </div>

</el-dialog>

</template>

<script lang='ts' setup>

import { ref, defineExpose } from 'vue'
import Timer from '@/components/Timer/index.vue'
import VideoPlayer from '@/views/components/VideoPlayer/index.vue'

const state = ref(false)
const video = ref(false) // 视频展示
const videoInfo = ref<any>({})

const diaOpen = (e) => {  
  videoInfo.value = e
  state.value = true
  nextTick(() => {
    video.value = true
  })
}

const onClosed = () => {
  videoInfo.value = {}
  video.value = false
}

defineExpose({
  diaOpen
})

</script>

<style lang='scss' scoped>

.header {
  height: 48px;
  padding: 0px 20px;
  background: rgb(11, 36, 77);
  display: flex;
  align-items: center;
  color: white;
}

.container {
  width: 700px;
  height: 500px;
  background: black;
  position: relative;
  .lines {
    font-size: 14px;
    position: absolute;
    top: 12px;
    left: 12px;
    color: white;
    z-index: 2;
    line-height: 22px;
    text-align: left
  }
}

</style>

<style lang="scss">


.video-dialog {
  padding: 0;
  .el-dialog__header {
    padding: 0;
  }
}

</style>