<!--
  Description: 闸井监测-详情数据-监控数据
  Author: 李亚光
  Date: 2023-08-13
 -->
<script lang="ts" setup name="WellDetailMonitorData">
import type { TabsPaneContext } from 'element-plus'
import videoControl from './videoControl.vue'
import { getMonitorData } from '@/api/home/well/well'
const $route = useRoute()
const activeName = ref('1号云台')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const showVideo1 = ref(false) // 是否展示1号云台
const showVideo2 = ref(false) // 是否展示2号云台
const NoAllData = ref(false)
// getMonitorData({ wellId: $route.query.id as string }).then((res) => {
//   console.log(res.data)
//   if (res.data['1号云台']) {
showVideo1.value = true
activeName.value = '1号云台'
//   }
//   if (res.data['2号云台']) {
//     showVideo2.value = true
//     activeName.value = '2号云台'
//   }
//   if (!showVideo1.value && !showVideo2.value) {
//     // 三者都为空
//     NoAllData.value = true
//   }
// })
</script>

<template>
  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
      <video-control v-if="activeName === '1号云台'" />
    </el-tab-pane>
    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
      <video-control v-if="activeName === '2号云台'" />
    </el-tab-pane>
  </el-tabs>
  <video-control v-if="NoAllData" />
</template>