<script lang="ts" setup name="EditDev">
import type { Ref } from 'vue'
import devJson from 'public/config/dev.json'
import dayjs from 'dayjs'
import redImg from '@/assets/images/中心.png'
import { loginMedia, playBack } from '@/api/ptz/media'
const emits = defineEmits(['closeRefresh'])

// 对话框类型：create,update
const dialogStatus = ref('create')
const dialogVisible = ref(false)
// 显示标题
const textMap: { [key: string]: string } = {
  detail: '回放',

}
const src = ref('')

const play = () => {
  const video: HTMLVideoElement = document.querySelector('video')!
  // paused 播放状态
  if (video.paused) {
    video.play()
  }
}

// ----------初始化、关闭对话框相关-----------------
function initDialog(dialogstatus: string, row: any) {
  dialogStatus.value = dialogstatus
  dialogVisible.value = true
  src.value = ''
  // 登录流媒体
  loginMedia().then((response) => {
    const accessToken = response.data.accessToken
    const startTime = dayjs(row.alarmTime).subtract(5, 'second').format('YYYY-MM-DD HH:mm:ss')
    const endTime = dayjs(row.alarmTime).add(5, 'second').format('YYYY-MM-DD HH:mm:ss')
    playBack(devJson[row.monitorName], startTime, endTime, accessToken).then((res) => {
      src.value = res.data.fmp4
      nextTick(() => {
        play()
      })
    })
  })
}

// 关闭并刷新
function closeRefresh() {
  dialogVisible.value = false
  emits('closeRefresh')
}
// 关闭弹窗
function dialogClose() {
  dialogVisible.value = false
  closeRefresh()
}
// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({ initDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible" :title="textMap[dialogStatus]" width="800px" :before-close="dialogClose" append-to-body
    :open-delay="0" :close-on-click-modal="false"
  >
    <el-image :src="redImg" class="red-img" />
    <video width="760" height="400" :src="src" controls autoplay />
  </el-dialog>
</template>

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

  .full-width-input {
    width: 100%;
  }

  .dict-detail {
    padding: 10px;

    .title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
    }
  }
}

.red-img {
  position: absolute;
  top: 264px;
  left: 381px;
  width: 40px;
  height: 40px;
  z-index: 999999;
}
</style>