<template>
  <a-drawer
    :visible="visible"
    width="80%"
    :footer="false"
    :header="false"
    unmount-on-close
    :drawerStyle="{ backgroundColor: 'var(--color-fill-2)' }"
    @cancel="handleClose"
  >
    <template #title>
      <div class="flex items-center">
        <span class="text-lg font-medium">{{ groupName }} - 统计信息</span>
      </div>
    </template>
    <div class="statistics-container">
      <a-tabs default-active-key="1" type="capsule">
        <a-tab-pane key="1" title="概览">
          <statistics-overview :group-id="groupId" />
        </a-tab-pane>
        <!-- <a-tab-pane key="2" title="账号统计">
          <account-statistics :group-id="groupId" />
        </a-tab-pane> -->
        <!-- <a-tab-pane key="3" title="订单统计">
          <order-statistics :group-id="groupId" />
        </a-tab-pane> -->
      </a-tabs>
    </div>
    <div class="affix-button">
      <a-button type="primary" shape="round" @click="handleDownload">
        <template #icon>
          <icon-download />
        </template>
      </a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import { watch } from 'vue';
import StatisticsOverview from './components/StatisticsOverview.vue';
import AccountStatistics from './components/AccountStatistics.vue';
import OrderStatistics from './components/OrderStatistics.vue';
import { apiClient } from '@/api';
import { handleDownLoadFile } from '@/api/utils';

const props = defineProps<{
  visible: boolean;
  groupId?: number;
  groupName?: string;
}>();

const emit = defineEmits(['update:visible']);

const handleClose = () => {
  emit('update:visible', false);
};

watch(
  () => props.visible,
  newVal => {
    if (!newVal) {
      // 关闭时重置数据
    }
  }
);

const handleDownload = async () => {
  try {
    const res = await apiClient.apiCardInfoWalmartStatsOverviewDownloadGet(
      {
        groupId: props.groupId
      },
      {
        responseType: 'blob'
      }
    );
    handleDownLoadFile(res.data as Blob, `${props.groupName}-统计信息.xlsx`);
  } catch (error) {
    console.error(error);
  }
};
</script>

<style lang="less" scoped>
.statistics-container {
  overflow-y: auto;
}

.affix-button {
  position: fixed;
  bottom: 50px;
  right: 50px;
}
</style>
