<!--
  Description: 闸井监测-详情数据-监控数据
  Author: 李亚光
  Date: 2023-08-13
 -->
<script lang="ts" setup name="WellDetailMonitorData">
import type { TabsPaneContext } from 'element-plus'
import monitorDataGasList from './monitorDataList.vue'
// import { getMonitorData } from '@/api/home/well/well'
import { getGasData, getWellDetail } 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)
const typeName = ref('')
const dataList = ref<any>([])
onMounted(() => {
  // getMonitorData({ wellId: $route.query.id as string }).then((res) => {
  //   if (res.data['燃气智能监测终端'] || res.data['燃气智能监测终端（一体化）'] || res.data['管网哨兵'] || res.data['管网哨兵(一体化)']) {
  //     showGas.value = true
  //     activeName.value = '燃气浓度'
  //     if ((res.data['燃气智能监测终端'] || []).length) {

  //       typeName.value = '燃气智能监测终端'
  //     }
  //     else if ((res.data['燃气智能监测终端（一体化）'] || []).length) {

  //       typeName.value = '燃气智能监测终端（一体化）'
  //     }
  //     else if ((res.data['管网哨兵'] || []).length) {

  //       typeName.value = '管网哨兵'
  //     }
  //     else if ((res.data['管网哨兵(一体化)'] || []).length) {
  //       typeName.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
  //   }
  // })
  getGasData({
    wellId: $route.query.id as string,
    devCode: '',
  }).then(res => {
    // console.log(res.data)
    if ((res.data || []).length) {
      NoAllData.value = false
      dataList.value = res.data.map((item:any) => ({
        ...item,
        deviceCode: item.devcode,
        typeName: item.devTypeName,
      }))
      activeName.value = res.data[0].devTypeName
      // console.log(dataList.value, 'dataList.value')
    }
    else {
      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">
    <el-tab-pane v-for="(item,index) in dataList" :key="item.devcode" :label="item.devTypeName" :name="item.devTypeName"  >
      <monitor-data-gas-list :info="item" />
    </el-tab-pane>
  </el-tabs>
  <monitor-data-gas-list :typeName="typeName" v-if="NoAllData" />
</template>