<template>
  <div class="page-container">
    <!-- 返回按钮 -->
    <div class="page-header">
      <el-button :icon="ArrowLeft" @click="goBack">返回</el-button>
      <span class="title">{{ isPlayback ? '录像回放' : '实时播放' }} - {{ channelId }}</span>
    </div>

    <!-- 功能不可用提示 -->
    <el-result
      icon="warning"
      title="功能暂不可用"
      sub-title="GB28181 设备播放功能需要 Jessibuca 播放器支持，该播放器已停止维护。"
    >
      <template #extra>
        <el-button type="primary" @click="goBack">返回通道列表</el-button>
      </template>
    </el-result>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

const deviceId = route.params.deviceId as string
const channelId = route.params.channelId as string
const isPlayback = computed(() => route.query.mode === 'playback')

function goBack() {
  router.push(`/camera/channel/${deviceId}`)
}
</script>

<style lang="scss" scoped>
.page-container {
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: var(--radius-base);

  .title {
    margin-left: 15px;
    font-size: 16px;
    font-weight: 600;
  }
}
</style>
