<!--
  Description: 闸井监测-详情数据-监控数据
  Author: 李亚光
  Date: 2023-08-13
 -->
<script lang="ts" setup name="WellDetailMonitorData">
import type { TabsPaneContext } from 'element-plus'
import monitorDataGasList from './monitorDataGasList.vue'
import { getMonitorData } from '@/api/home/well/well'
const $route = useRoute()
const activeName = ref('燃气浓度')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const showGas = ref(false) // 是否展示燃气浓度
const showLiquid = ref(false) // 是否展示井下水位
const showWell = ref(false) // 是否展示井盖
const NoAllData = ref(false)
getMonitorData({ wellId: $route.query.id as string }).then((res) => {
  console.log()
  if (res.data['燃气智能监测终端']) {
    showGas.value = true
    activeName.value = '燃气浓度'
  }
  if (res.data['液位检测仪']) {
    showLiquid.value = true
    activeName.value = '井下水位'
  }
  if (res.data['井盖监测仪']) {
    showWell.value = true
    activeName.value = '井盖'
  }
  if (!showGas.value && !showLiquid.value && !showWell.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="showGas" label="燃气浓度" name="燃气浓度">
      <monitor-data-gas-list v-if="activeName === '燃气浓度'" />
    </el-tab-pane>
    <el-tab-pane v-if="showLiquid" label="井下水位" name="井下水位">
      <!-- <monitor-data-list v-if="activeName === '井下水位'" /> -->
    </el-tab-pane>
    <el-tab-pane v-if="showWell" label="井盖" name="井盖">
      <!-- <monitor-data-list v-if="activeName === '井盖'" /> -->
    </el-tab-pane>
  </el-tabs>
  <monitor-data-gas-list v-if="NoAllData" />
</template>