<template>
  <Card
    :tab-list="tabListTitle"
    v-bind="$attrs"
    :active-tab-key="activeKey"
    @tabChange="onTabChange"
  >
    <template #tabBarExtraContent>
      <div class="extra-date">
        <template v-for="(item, index) in dateList" :key="item">
          <span @click="changeDate(index)" :class="{ active: index === activeIndex }">{{
            item
          }}</span>
        </template>
        <DatePicker @change="onDateChange" />
      </div>
    </template>
    <div v-if="activeKey === 'tab1'">
      <p class="center">告警数</p>
      <VisitAnalysis />
    </div>
    <div v-else>
      <p class="center">消息数</p>
      <VisitAnalysisBar />
    </div>
  </Card>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Card, DatePicker } from 'ant-design-vue';
  import VisitAnalysis from './VisitAnalysis.vue';
  import VisitAnalysisBar from './VisitAnalysisBar.vue';

  const activeKey = ref('tab1');

  const tabListTitle = [
    {
      key: 'tab1',
      tab: '告警数统计',
    },
    {
      key: 'tab2',
      tab: '消息量统计',
    },
  ];
  const dateList = ref(['1小时', '1天', '7天', '30天']);
  const activeIndex = ref(0);
  function onTabChange(key) {
    activeKey.value = key;
  }
  function onDateChange(date, dateString) {
    console.log(date, dateString);
  }
  function changeDate(index: number) {
    activeIndex.value = index;
  }
</script>

<style scoped lang="less">
  .center {
    display: flex;
    justify-content: center;
    font-size: 16px;
  }
  .active {
    color: #0960bd;
    font-weight: 500;
  }
  .extra-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      margin-right: 20px;
      cursor: pointer;
    }
  }
</style>