<template>
  <div class="smart-light-h5">
    <div class="h5-header">
      <div class="h5-top">
        <div class="h5-title">云物联网平台</div>
        <div class="h5-tabs">
          <button
            type="button"
            :class="['h5-tab', { active: activeTab === 'smart' }]"
            @click="goH5('/smart-light-h5')"
          >
            智能灯
          </button>
          <button
            type="button"
            :class="['h5-tab', { active: activeTab === 'energy' }]"
            @click="goH5('/energy-h5')"
          >
            能耗
          </button>
        </div>
      </div>

      <el-tabs v-model="currentStatus" class="h5-subtabs" :stretch="true">
        <el-tab-pane label="实时状态" name="realtime" />
        <el-tab-pane label="时序状态" name="timeseries" />
        <el-tab-pane label="稼动率" name="utilization" />
        <el-tab-pane label="开机率" name="startup" />
      </el-tabs>
    </div>

    <div class="h5-content">
      <KeepAlive>
        <SmartLightH5RealtimeTab v-if="currentStatus === 'realtime'" />
        <SmartLightH5TimeseriesTab v-else-if="currentStatus === 'timeseries'" />
        <SmartLightH5UtilizationTab v-else-if="currentStatus === 'utilization'" />
        <SmartLightH5StartupTab v-else />
      </KeepAlive>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SmartLightH5RealtimeTab from '../components/h5/SmartLightH5RealtimeTab.vue'
import SmartLightH5TimeseriesTab from '../components/h5/SmartLightH5TimeseriesTab.vue'
import SmartLightH5UtilizationTab from '../components/h5/SmartLightH5UtilizationTab.vue'
import SmartLightH5StartupTab from '../components/h5/SmartLightH5StartupTab.vue'

const route = useRoute()
const router = useRouter()

const activeTab = computed(() => (route.path === '/energy-h5' ? 'energy' : 'smart'))

function goH5(path) {
  router.push({ path, query: route.query })
}

const currentStatus = ref('realtime')
</script>

<style scoped>
.smart-light-h5 {
  min-height: 100vh;
  background-color: #f5f6f8;
}

.h5-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.h5-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.h5-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: #111827;
}

.h5-tabs {
  display: inline-flex;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.h5-subtabs {
  margin-top: 10px;
}

.h5-subtabs :deep(.el-tabs__header) {
  margin: 0;
}

.h5-subtabs :deep(.el-tabs__nav-wrap) {
  padding: 0;
}

.h5-subtabs :deep(.el-tabs__item) {
  font-size: 12px;
  padding: 0 10px;
  height: 34px;
  line-height: 34px;
}

.h5-subtabs :deep(.el-tabs__active-bar) {
  height: 2px;
}

.h5-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font-size: 12px;
  color: #334155;
}

.h5-tab.active {
  background: rgba(64, 158, 255, 0.12);
  color: #1d4ed8;
}

.h5-content {
  padding: 12px;
}
</style>