<template>
  <ElCard shadow="never" class="info-card package-info">
    <template #header>
      <div class="card-header">
        <span>套餐列表</span>
      </div>
    </template>
    <div class="package-table-wrapper">
      <ElTable
        v-if="packageList && packageList.length > 0"
        :data="packageList"
        class="package-table"
        border
        max-height="400"
      >
        <ElTableColumn label="套餐名称" min-width="150">
          <template #default="scope">
            <ElButton
              type="primary"
              link
              class="package-name-link"
              @click="handleShowDailyRecords(scope.row)"
              v-permission="'package-usage:daily-records:view'"
            >
              {{ scope.row.package_name }}
            </ElButton>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="package_price" label="套餐价格" width="120">
          <template #default="scope">
            {{ formatAmount(scope.row.package_price) }}
          </template>
        </ElTableColumn>
        <ElTableColumn prop="status_name" label="套餐状态" width="100">
          <template #default="scope">
            <ElTag :type="getPackageStatusTagType(scope.row.status)" size="small">
              {{ scope.row.status_name }}
            </ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="data_limit_mb" label="总流量" width="120">
          <template #default="scope">
            {{ formatDataSize(scope.row.data_limit_mb) }}
          </template>
        </ElTableColumn>
        <ElTableColumn label="真流量" width="280">
          <template #default="scope">
            <div class="traffic-progress">
              <div class="progress-text">
                <span class="used">已用: {{ formatDataSize(scope.row.data_usage_mb) }}</span>
                <span class="remaining">
                  剩余: {{ formatDataSize(scope.row.data_limit_mb - scope.row.data_usage_mb) }}
                </span>
                <span class="total">总量: {{ formatDataSize(scope.row.data_limit_mb) }}</span>
              </div>
              <ElProgress
                :percentage="getUsageProgress(scope.row.data_usage_mb, scope.row.data_limit_mb)"
                :color="
                  getProgressColorByPercentage(
                    getUsageProgress(scope.row.data_usage_mb, scope.row.data_limit_mb)
                  )
                "
              />
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn label="虚流量" width="280">
          <template #default="scope">
            <div class="traffic-progress">
              <div class="progress-text">
                <span class="used">已用: {{ formatDataSize(scope.row.virtual_used_mb || 0) }}</span>
                <span class="remaining">
                  剩余: {{ formatDataSize(scope.row.virtual_remain_mb || 0) }}
                </span>
                <span class="total">
                  总量: {{ formatDataSize(scope.row.virtual_limit_mb || 0) }}
                </span>
              </div>
              <ElProgress
                :percentage="
                  getUsageProgress(scope.row.virtual_used_mb, scope.row.virtual_limit_mb)
                "
                :color="
                  getProgressColorByPercentage(
                    getUsageProgress(scope.row.virtual_used_mb, scope.row.virtual_limit_mb)
                  )
                "
              />
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="activated_at" label="开始时间" width="170" show-overflow-tooltip>
          <template #default="scope">
            {{ formatDateTime(scope.row.activated_at) }}
          </template>
        </ElTableColumn>
        <ElTableColumn prop="expires_at" label="到期时间" width="170" show-overflow-tooltip>
          <template #default="scope">
            {{ formatDateTime(scope.row.expires_at) }}
          </template>
        </ElTableColumn>
        <ElTableColumn label="操作" width="100" align="center" fixed="right">
          <template #default="scope">
            <ElButton
              type="primary"
              link
              @click="handleShowDailyRecords(scope.row)"
              v-permission="'package-usage:daily-records:view'"
            >
              流量详单
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <ElEmpty v-else description="暂无套餐数据" :image-size="100" />
    </div>
  </ElCard>
</template>

<script setup lang="ts">
  import {
    ElCard,
    ElTable,
    ElTableColumn,
    ElTag,
    ElButton,
    ElProgress,
    ElEmpty
  } from 'element-plus'
  import { useAssetFormatters } from '../composables/useAssetFormatters'
  import { formatDateTime } from '@/utils/business/format'

  // Props
  interface PackageInfo {
    id: number
    package_id: number
    package_name: string
    package_price: number
    data_limit_mb: number
    data_usage_mb: number
    virtual_limit_mb: number
    virtual_used_mb: number
    virtual_remain_mb: number
    activated_at: string
    expires_at: string
    status: number
    status_name: string
  }

  interface Props {
    packageList: PackageInfo[]
  }

  defineProps<Props>()

  // Emits
  interface Emits {
    (e: 'showDailyRecords', payload: { packageRow: PackageInfo }): void
  }

  const emit = defineEmits<Emits>()

  // 使用格式化工具
  const {
    formatDataSize,
    formatAmount,
    getPackageStatusTagType,
    getUsageProgress,
    getProgressColorByPercentage
  } = useAssetFormatters()

  // 显示流量详单
  const handleShowDailyRecords = (packageRow: PackageInfo) => {
    emit('showDailyRecords', { packageRow })
  }
</script>

<style scoped lang="scss">
  .info-card {
    &.package-info {
      .package-table-wrapper {
        .package-table {
          :deep(.el-table__header) {
            th {
              font-weight: 600;
              color: var(--el-text-color-primary, #374151);
            }
          }

          .package-name-link {
            font-weight: 500;
          }

          .traffic-progress {
            .progress-text {
              display: flex;
              gap: 12px;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 8px;
              font-size: 12px;

              .used {
                color: var(--el-color-primary);
              }

              .remaining {
                color: var(--el-color-success);
              }

              .total {
                color: var(--el-text-color-secondary);
              }
            }
          }
        }
      }
    }
  }
</style>
