<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 initDialog = (row: any) => {
  dialogFormVisible.value = true

  if (row.type === 'video') {
    type.value = 'video'
    if (row.url) {
      videoUrl.value = row.url
    }
    else {
      getAlarmVideo({ alarmCode: row.alarmCode }).then((res) => {
        videoUrl.value = res.data
        ElMessage.success('获取视频成功')
      })
    }
  }
  else if (row.type === 'photo') {
    type.value = 'photo'
    videoUrl.value = `${'http://111.198.10.15:11646'}/${row.url}`
  }
}
defineExpose({
  initDialog,
})

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

<template>
  <el-dialog v-model="dialogFormVisible" title="报警处置" 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>