<template>
  <div class="mt-4">
    <a-row :gutter="24">
      <a-col :span="24">
        <a-card
          :bordered="false"
          :tab-list="tabList"
          :active-tab-key="activeKey"
          @tab-change="(key) => onTabChange(key, 'key')"
        >
          <template v-if="activeKey === '1'">
            <FluxTrend />
          </template>
          <template v-if="activeKey === '2'">
            <VisitAmount />
          </template>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import FluxTrend from './FluxTrend.vue';
  import VisitAmount from './VisitAmount.vue';

  const activeKey = ref('1');
  const tabList = [
    {
      key: '1',
      tab: '流量趋势',
    },
    {
      key: '2',
      tab: '访问量',
    },
  ];

  function onTabChange(value: string) {
    activeKey.value = value;
  }
</script>
