<script lang="ts" setup name="HandlerAlarmDialog">
import type { FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAlarmVideo } from '@/api/page/task'
const dialogFormVisible = ref(false) // 对话框是否显示
const videoUrl = ref('')
const type = ref('video')
const baseUrl = import.meta.env.VITE_APP_API_BASEURL
// 初始化对话框
const initDialog = (row: any) => {
  dialogFormVisible.value = true

  if (row.type === 'video') {
    type.value = 'video'
    if (row.url) {
      videoUrl.value = `${baseUrl}/static/${row.url}`
      console.log('url:', videoUrl.value)
    }
    else {
      getAlarmVideo({ alarmCode: row.alarmCode }).then((res) => {
        videoUrl.value = res.data
        if (res.data) {
          console.log('url:', videoUrl.value)
          ElMessage.success('获取视频成功')
        }
        else {
          ElMessage.warning('暂无视频')
        }
      })
    }
  }
  else if (row.type === 'photo') {
    type.value = 'photo'
    videoUrl.value = `${baseUrl}/static/${row.url}`
    console.log('url:', videoUrl.value)
  }
}
defineExpose({
  initDialog,
})

const cancel = () => {
  dialogFormVisible.value = false
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" :title="`报警${type === 'video' ? '视频' : '图片'}`" append-to-body width="50%">
    <div class="container">
      <video v-if="type === 'video'" autoplay style="width: 100%;" height="300" :src="videoUrl" controls />
      <img v-else style="width: 100%;" height="300" :src="videoUrl">
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="cancel">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 300px;
  margin: 0 auto;
}

.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}
</style>