<template>
  <div class="page-container">
    <!-- 返回按钮 -->
    <div class="page-header">
      <el-button :icon="ArrowLeft" @click="goBack">返回</el-button>
      <span class="title">通道列表 - {{ cameraInfo?.name || cameraId }}</span>
    </div>

    <!-- 摄像头信息 -->
    <div v-if="cameraInfo" class="camera-info">
      <el-descriptions :column="4" border>
        <el-descriptions-item label="摄像头ID">{{ cameraInfo.cameraId }}</el-descriptions-item>
        <el-descriptions-item label="名称">{{ cameraInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="所属机器">{{ cameraInfo.machineId }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="cameraInfo.status === 'ONLINE' ? 'success' : 'danger'">
            {{ cameraInfo.status === 'ONLINE' ? '在线' : '离线' }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="filteredChannels" border>
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="channelId" label="通道ID" min-width="120" show-overflow-tooltip />
      <el-table-column prop="name" label="通道名称" min-width="120" show-overflow-tooltip />
      <el-table-column prop="rtspUrl" label="RTSP地址" min-width="250" show-overflow-tooltip />
      <el-table-column prop="defaultView" label="默认视角" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="row.defaultView ? 'success' : 'info'">
            {{ row.defaultView ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80" align="center">
        <template #default="{ row }">
          <el-tag :type="row.status === 'ONLINE' ? 'success' : 'danger'">
            {{ row.status === 'ONLINE' ? '在线' : '离线' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" link :icon="VideoPlay" @click="handlePlay(row)" :disabled="row.status !== 'ONLINE'">
            播放
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, VideoPlay } from '@element-plus/icons-vue'
import { getCamera } from '@/api/camera'
import type { CameraDTO, ChannelDTO } from '@/types'

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

const cameraId = route.params.cameraId as string
const loading = ref(false)
const cameraInfo = ref<CameraDTO | null>(null)

const filteredChannels = computed<ChannelDTO[]>(() => {
  return cameraInfo.value?.channels || []
})

async function getList() {
  loading.value = true
  try {
    const res = await getCamera(cameraId)
    if (res.success) {
      cameraInfo.value = res.data
    }
  } finally {
    loading.value = false
  }
}

function goBack() {
  router.push('/camera')
}

function handlePlay(row: ChannelDTO) {
  router.push(`/camera/video/${cameraId}/${row.channelId}?mode=live`)
}

onMounted(() => {
  getList()
})
</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;
  }
}

.camera-info {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: var(--radius-base);
}
</style>
