<script setup lang="ts">
import { ref } from 'vue'
import type { TableColumnsType } from 'ant-design-vue'
import { Table as ATable } from 'ant-design-vue'
import {useI18n} from "vue-i18n";

const  {t}  = useI18n();

interface CDRRecord {
  id: number
  ap_name: string
  traffic_up: number
  traffic_down: number
  up_time: string
  last_seen_time: string
}

// 模拟数据
const cdrData = ref<CDRRecord[]>([
  {
    id: 1,
    ap_name: 'AP-Office-01',
    traffic_up: 1024,
    traffic_down: 2048,
    up_time: '2024-03-15 08:00:00',
    last_seen_time: '2024-03-15 17:30:00'
  },
  {
    id: 2,
    ap_name: 'AP-Meeting-02',
    traffic_up: 512,
    traffic_down: 1536,
    up_time: '2024-03-15 09:15:00',
    last_seen_time: '2024-03-15 16:45:00'
  },
  // 可以添加更多测试数据...
])

// 格式化流量数据的函数
const formatTraffic = (bytes: number): string => {
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`
  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`
}

const columns: TableColumnsType = [
  {
    title: t('page.cdrlrecords.devicename'),
    dataIndex: 'ap_name',
    key: 'ap_name',
    width: 140
  },
  {
    title: t('page.cdrlrecords.uptraffic'),
    dataIndex: 'traffic_up',
    key: 'traffic_up',
    width: 100,
    customRender: ({ text }) => formatTraffic(text)
  },
  {
    title: t('page.cdrlrecords.downtraffic'),
    dataIndex: 'traffic_down',
    key: 'traffic_down',
    width: 100,
    customRender: ({ text }) => formatTraffic(text)
  },
  {
    title: t('page.cdrlrecords.uptime'),
    dataIndex: 'up_time',
    key: 'up_time',
    width: 160
  },
  {
    title: t('page.cdrlrecords.lasttime'),
    dataIndex: 'last_seen_time',
    key: 'last_seen_time',
    width: 160
  }
]
</script>

<template>
  <div class="p-4">
    <div class="text-lg font-bold mb-4">{{t('page.cdrlrecords.cdr')}}</div>
    <div class="table-container">
      <ATable
        :columns="columns"
        :data-source="cdrData"
        :row-key="(record: CDRRecord) => record.id"
        :pagination="{
          pageSize: 10,
          total: cdrData.length,
          showTotal: (total: number) => `共 ${total} 条`,
          showSizeChanger: true,
          showQuickJumper: true,
          pageSizeOptions: ['10', '20', '50', '100']
        }"
      />
    </div>
  </div>
</template>

<style scoped>
.p-4 {
  padding: 1rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.text-lg {
  font-size: 1.125rem;
}
.font-bold {
  font-weight: bold;
}
.table-container {
  width: 100%;
  overflow-x: auto;
}

/* 使表格更紧凑的样式 */
:deep(.ant-table) .ant-table-thead > tr > th,
:deep(.ant-table) .ant-table-tbody > tr > td {
  padding: 8px 4px;
  font-size: 14px;
}

/* 在小屏幕下进一步压缩内边距 */
@media screen and (max-width: 768px) {
  :deep(.ant-table) .ant-table-thead > tr > th,
  :deep(.ant-table) .ant-table-tbody > tr > td {
    padding: 4px 2px;
    font-size: 13px;
  }
}

/* 确保表头文字也能自动换行 */
:deep(.ant-table) .ant-table-thead > tr > th {
  white-space: normal;
  word-break: break-word;
}

/* 允许单元格内容自动换行 */
:deep(.ant-table) .ant-table-tbody > tr > td {
  white-space: normal;
  word-break: break-word;
}
</style>
