<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';

import DeviceGroupSelect from '@/components/DeviceGroupSelect.vue';
import { useRefreshView } from '@/hooks/refresh-view';
import { t } from '@/i18n';

import EnergyConsumption from './EnergyConsumption.vue';
import EnergyEfficiency from './EnergyEfficiency.vue';

import type { TabComponent } from '@/types';

const { renderView, refreshView } = useRefreshView();
const activeKey = ref('');
const deviceGroupId = ref<number>();

const energyTabs = computed<TabComponent[]>(() => {
  return [
    {
      key: 'energyConsumption',
      name: t('energyAnalysis.energyConsumptionAnalysis'),
      component: EnergyConsumption,
    },
    {
      key: 'energyEfficiency',
      name: t('energyAnalysis.energyEfficiencyAnalysis'),
      component: EnergyEfficiency,
    },
  ];
});

onMounted(() => {
  activeKey.value = energyTabs.value[0].key;
  refreshView();
});

const handleDevGroupChange = (id: number) => {
  deviceGroupId.value = id;
  refreshView();
};
</script>

<template>
  <ATabs class="button-tabs-compact" v-model:active-key="activeKey" type="card" @tab-click="refreshView">
    <ATabPane v-for="item in energyTabs" :key="item.key" :tab="item.name">
      <component
        v-if="deviceGroupId !== undefined && activeKey === item.key && renderView"
        :is="item.component"
        :device-group-id="deviceGroupId"
      />
    </ATabPane>
    <template #rightExtra>
      <DeviceGroupSelect @change="handleDevGroupChange" />
    </template>
  </ATabs>
</template>

<style lang="scss" scoped>
.group-select {
  width: 192px;

  & + & {
    margin-left: 16px;
  }
}

:deep(.ant-tabs-content-holder) {
  .ant-card {
    border-radius: 16px;
    box-shadow: none;

    + .ant-card {
      margin-top: 16px;
    }
  }

  .ant-card-head-title {
    padding-left: 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #333;
    border-left: 2px solid var(--antd-color-primary);
  }

  .export-button {
    margin-left: 16px;
  }

  .energy-card-container {
    display: flex;
    flex: 1;
    align-items: center;
    height: 124px;
    border-radius: 8px;
  }

  .energy-card-icon {
    margin-right: 16px;
    margin-left: 24px;
  }

  .energy-card-title {
    margin-bottom: 2px;
  }

  .energy-card-value {
    margin-right: 4px;
    font-family: DINAlternate;
    font-size: 30px;
    font-weight: bold;
    line-height: 36px;
    color: #000;
  }

  .energy-card-unit {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #000;
  }

  .energy-card-description {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #000;
  }
}
</style>
