<script lang="ts" setup>
import { getPremiumTokenPackage } from '@/api/user';
import PremiumPackageInfo from './PremiumPackageInfo.vue';
import PremiumUsageList from './PremiumUsageList.vue';

// 尊享服务数据
const loading = ref(false);
const packageData = ref<any>({
  totalQuota: 0, // 购买总额度
  usedQuota: 0, // 已使用额度
  remainingQuota: 0, // 剩余额度
  usagePercentage: 0, // 使用百分比
  packageName: 'Token包', // 套餐名称
  expireDate: '', // 过期时间
});

// 子组件引用
const usageListRef = ref<InstanceType<typeof PremiumUsageList>>();

// 获取尊享服务Token包数据
async function fetchPremiumTokenPackage() {
  loading.value = true;
  try {
    const res = await getPremiumTokenPackage();
    if (res.data) {
      // 适配新的接口字段名
      const data = res.data;
      packageData.value = {
        totalQuota: data.premiumTotalTokens || 0, // 尊享包总token
        usedQuota: data.premiumUsedTokens || 0, // 尊享包已使用token
        remainingQuota: data.premiumRemainingTokens || 0, // 尊享包剩余token
        usagePercentage: data.usagePercentage || 0,
        packageName: data.packageName || '尊享Token包',
        expireDate: data.expireDate || '',
      };

      // 计算剩余额度（如果接口没返回）
      if (packageData.value.remainingQuota === 0 && packageData.value.totalQuota > 0) {
        packageData.value.remainingQuota = packageData.value.totalQuota - packageData.value.usedQuota;
      }
    }
    else {
      ElMessage.warning('暂无尊享服务数据');
    }
  }
  catch (error) {
    console.error('获取尊享服务数据失败:', error);
    ElMessage.error('获取尊享服务数据失败');
  }
  finally {
    loading.value = false;
  }
}

// 刷新所有数据
function refreshData() {
  fetchPremiumTokenPackage();
  usageListRef.value?.refresh();
}

onMounted(() => {
  fetchPremiumTokenPackage();
});
</script>

<template>
  <div class="premium-service">
    <!-- 套餐信息 -->
    <div data-tour="premium-package-info">
      <PremiumPackageInfo
        :package-data="packageData"
        :loading="loading"
        @refresh="refreshData"
      />
    </div>

    <!-- 额度明细列表 -->
    <div class="usage-list-wrapper" data-tour="premium-usage-list">
      <PremiumUsageList ref="usageListRef" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.premium-service {
  height: 100%;
  overflow-y: auto;
  //background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);

  // 美化滚动条
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;

    &:hover {
      background: linear-gradient(180deg, #5568d3 0%, #65408b 100%);
    }
  }
}

.usage-list-wrapper {
  margin-top: 24px;
  animation: slideInUp 0.4s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式布局 */
@media (max-width: 768px) {
  .premium-service {
  }

  .usage-list-wrapper {
    margin-top: 16px;
  }
}
</style>
