<template>
  <Card
    :tab-list="tabListTitle"
    v-bind="$attrs"
    :active-tab-key="activeKey"
    @tabChange="onTabChange"
  >
    <template #tabBarExtraContent v-if="role === 'TENANT_ADMIN'">
      <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">{{ role === 'TENANT_ADMIN' ? '告警数' : '租户趋势' }}</p>
      <VisitAnalysis v-if="role === 'TENANT_ADMIN'" />
      <VisitAnalysisBar v-else />
    </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';
  import { defineProps } from 'vue';

  const props = defineProps<{
    role: string;
  }>();
  const activeKey = ref('tab1');

  // 动态根据登录角色来判断
  const tabListTitle =
    props.role === 'TENANT_ADMIN'
      ? [
          {
            key: 'tab1',
            tab: '告警数统计',
          },
          {
            key: 'tab2',
            tab: '消息量统计',
          },
        ]
      : [
          {
            key: 'tab1',
            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>