<template>
  <div class="p-2 auto-overflow-y">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="年统计" name="year">
        <YearAnalyze />
      </el-tab-pane>
      <el-tab-pane label="月统计" name="month">
        <monthAnalyze />
      </el-tab-pane>
      <el-tab-pane label="日统计" name="day">
        <DayAnalyze/>
      </el-tab-pane>
    </el-tabs>
  </div>
  </template>
  <script lang="ts" setup>
  import { ref } from 'vue'
  import type { TabsPaneContext } from 'element-plus'
  import monthAnalyze from '@/views/consumption/report/xfConsumedetail/monthAnalyze.vue';
  import YearAnalyze from './xfConsumedetail/yearAnalyze.vue';
  import DayAnalyze from './xfConsumedetail/dayAnalyze.vue';
  const activeName = ref('month')
  
  const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
  }
  </script>
  
  <style>
  .demo-tabs > .el-tabs__content {
    padding: 1px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  </style>