<template>
  <div class="yqaf_box">
    <h1>摄像头列表</h1>
    <el-table :data="cameraList" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="state" label="状态"></el-table-column>
      <el-table-column prop="displaystate" label="显示状态"></el-table-column>
      <el-table-column prop="cjName" label="厂家"></el-table-column>
      <el-table-column prop="location" label="位置"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" @click="handleView(scope.$index, scope.row)">查看</el-button>
          <el-button size="mini" type="primary" @click="handleStart(scope.$index, scope.row)">启动</el-button>
          <el-button size="mini" type="danger" @click="handleStop(scope.$index, scope.row)">停止</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// import axios from 'axios'

const cameraList = [{
      id:1,
      name:"指挥中心一楼门口球机",
      state:'开启',
      cjName:"萨斯噶三个",
      displaystate:'实时监控',
      location:"242"
    },{
      id:1,
      name:"指挥中心一楼门口球机",
      state:'开启',
      cjName:"萨斯噶三个",
      displaystate:'实时监控',
      location:"242"
    },{
      id:1,
      name:"指挥中心一楼门口球机",
      state:'开启',
      cjName:"萨斯噶三个",
      displaystate:'实时监控',
      location:"242"
    },{
      id:1,
      name:"指挥中心一楼门口球机",
      state:'开启',
      cjName:"萨斯噶三个",
      displaystate:'实时监控',
      location:"242"
    },{
      id:1,
      name:"指挥中心一楼门口球机",
      state:'开启',
      cjName:"萨斯噶三个",
      displaystate:'实时监控',
      location:"242"
    },{
      id:1,
      name:"指挥中心一楼门口球机",
      state:'开启',
      cjName:"萨斯噶三个",
      displaystate:'实时监控',
      location:"242"
    },{
      id:1,
      name:"指挥中心一楼门口球机",
      state:'开启',
      cjName:"萨斯噶三个",
      displaystate:'实时监控',
      location:"242"
    }]

// const cameraList = ref([])

// 模拟获取摄像头列表的数据
onMounted(async () => {
  // try {
    // const response = await axios.get('https://api.example.com/cameras') // 替换为实际API地址
    // cameraList.value = response.data
    // cameraList.value = [{
    //   id:1,
    //   name:"123",
    //   location:"242"
    // }]
  // } catch (error) {
    // console.error('Error fetching camera list:', error)
  // }
})

function handleView(index, row) {
  console.log(`查看摄像头 ${row.name}`)
  // 实现查看摄像头详情逻辑
}

function handleStart(index, row) {
  console.log(`启动摄像头 ${row.name}`)
  // 实现启动摄像头逻辑
}

function handleStop(index, row) {
  console.log(`停止摄像头 ${row.name}`)
  // 实现停止摄像头逻辑
}
</script>

<style>
.yqaf_box{
  margin: 20px;
}
</style>
