<template>
  <div class="main-wrapper py-5" style="background: #f1f3f5;">
    <div class="container">
      <!-- 标题与搜索 -->
      <div class="row mb-4 align-items-center">
        <div class="col-md-6">
          <h4 class="mb-0">已订购套餐</h4>
        </div>
        <div class="col-md-6 text-right">
          <input
            type="text"
            v-model="search"
            class="form-control d-inline-block w-auto"
            placeholder="搜索套餐名称"
          />
        </div>
      </div>
      <!-- 卡片列表 -->
      <div class="row">
        <div
          v-for="item in filteredPackages"
          :key="item.id"
          class="col-12 col-md-6 col-lg-4 mb-4"
        >
          <div class="card subscription-card h-100">
            <div class="card-body d-flex flex-column">
              <h5 class="card-title mb-2">{{ item.package.name }}</h5>
              
              <p class="text-muted mb-2">订购时间：{{ formatDate(item.purchasedAt) }}</p>
              <p class="text-muted mb-3">到期时间：{{ formatDate(item.expiryDate) }}</p>
              <ul class="list-unstyled mb-3">
                <li>每分钟限额：<strong>{{ item.package.oneMinuteLimit }} 次</strong></li>
                <li>周期总调用：<strong>{{ item.package.callLimit }} 次</strong></li>
                <li>剩余调用：<strong>{{ item.remainingCalls }} 次</strong></li>
                <!--<li>已用调用：<strong>{{ item.package.callLimit - item.remainingCalls }} 次</strong></li>-->
              </ul>
              <div class="mt-auto d-flex justify-content-between align-items-center">
                <span class="price">¥{{ item.package.price }}<small class="text-muted">/月</small></span>
                <button class="btn btn-outline-primary btn-sm" @click="viewDetails(item.package.id)">详情</button>
              </div>
            </div>
          </div>
        </div>
        <div v-if="filteredPackages.length === 0" class="col-12 text-center text-muted">
          未找到匹配的套餐。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SubscribedPackages',
  data() {
    return {
      search: '',
      packages: []
    }
  },
  computed: {
    filteredPackages() {
      const term = this.search.trim().toLowerCase();
      if (!term) return this.packages;
      return this.packages.filter(item =>
        item.package.name.toLowerCase().includes(term)
      );
    }
  },
  methods: {
    async fetchPackages() {
      try {
        const res = await this.$api.getUserPackages();
        if (res.code !== 1000) {
          this.$alert(res.message || '加载已购套餐失败', 'danger');
          return;
        }
        this.packages = res.data;
      } catch (err) {
        this.$alert('加载已购套餐失败', 'danger');
        console.error('获取已订购套餐出错：', err);
      }
    },
    formatDate(dateStr) {
      if (!dateStr) return '';
      const d = new Date(dateStr);
      const y = d.getFullYear();
      const m = String(d.getMonth() + 1).padStart(2, '0');
      const dd = String(d.getDate()).padStart(2, '0');
      return `${y}-${m}-${dd}`;
    },
    viewDetails(packageId) {
      this.$router.push({ name: 'PackageDetail', params: { id: packageId } });
    }
  },
  async created() {
    await this.fetchPackages();
  }
}
</script>

<style scoped>
.subscription-card {
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}
.subscription-card:hover {
  transform: translateY(-4px);
}
.price {
  font-size: 1.25rem;
  font-weight: bold;
  color: #007bff;
}
</style>
