<!--
  Description: 场站监测-详情数据
  Author: 李亚光
  Date: 2023-09-06
 -->
<script lang="ts" setup name="WellDetailData">
import type { TabsPaneContext } from 'element-plus'
import monitorData from './monitorData.vue'
import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
import maintenanceRecord from '@/views/home/well/components/maintenanceRecord.vue'
const { proxy } = getCurrentInstance() as any
const activeName = ref(
  proxy.hasPerm('/station/monitor/data')
    ? '监控数据'
    : proxy.hasPerm('/station/monitor/life')
      ? '全生命周期记录'
      : proxy.hasPerm('/station/monitor/maintenance') ? '监控设备维护记录' : '')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane v-if="proxy.hasPerm('/station/monitor/data')" label="监控数据" name="监控数据">
      <monitor-data v-if="activeName === '监控数据'" />
    </el-tab-pane>
    <el-tab-pane v-if="proxy.hasPerm('/station/monitor/life')" label="全生命周期记录" name="全生命周期记录">
      <life-cycle-record v-if="activeName === '全生命周期记录'" />
    </el-tab-pane>
    <el-tab-pane v-if="proxy.hasPerm('/station/monitor/maintenance')" label="监控设备维护记录" name="监控设备维护记录">
      <maintenance-record v-if="activeName === '监控设备维护记录'" />
    </el-tab-pane>
  </el-tabs>
</template>