<!--
  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)
onMounted(() => {
  getMonitorData({ wellId: $route.query.id as string }).then((res) => {
    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
    }
  })
})
const showOne = computed(() => {
  return [showGas.value, showLiquid.value, showWell.value].filter(item => item).length
})
</script>

<template>
  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <template v-if="showOne > 1">
      <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>
    </template>
    <telplate v-else>
      <monitor-data-gas-list v-if="showGas" />
      <!-- <monitor-data-list v-if="showLiquid" /> -->
      <!-- <monitor-data-list v-if="showWell" /> -->
    </telplate>
  </el-tabs>
  <monitor-data-gas-list v-if="NoAllData" />
</template>