<template>
  <div class="main-wrapper py-5" style="background: #f8f9fa;">
    <div class="container">
      <div class="row justify-content-center">

        <div
          v-for="(item, index) in packageList"
          :key="item.id || index"
          class="col-12 col-md-6 col-lg-4 mb-4"
        >
          <div class="card package-card h-100">
            <!-- 卡片头 -->
            <div class="card-header text-center bg-primary text-white">
              <h5 class="mb-0">{{ item.name }}</h5>
            </div>

            <div class="card-body d-flex flex-column">
              <ul class="list-unstyled flex-grow-1 mb-4">
                <!-- 关联 API（放在信息列表里） -->
                <li class="mb-3 api-list">
                  <i class="fas fa-plug text-primary mr-2"></i>
                  <span class="api-label">关联 API：</span>

                  <template v-if="item.apiPackageItems && item.apiPackageItems.length">
                    <span
                      v-for="(api, idx) in item.apiPackageItems"
                      :key="idx"
                      class="api-pill"
                      :title="(api && api.api && api.api.name) ? api.api.name : '未知接口'"
                    >
                      {{ (api && api.api && api.api.name) ? api.api.name : '未知接口' }}
                    </span>
                  </template>

                  <span v-else class="text-muted small">暂无关联</span>
                </li>

                <li class="mb-3">
                  <i class="fas fa-tachometer-alt text-primary mr-2"></i>
                  每分钟限制：<strong>{{ item.oneMinuteLimit }} 次</strong>
                </li>
                <li class="mb-3">
                  <i class="fas fa-sync-alt text-primary mr-2"></i>
                  周期总调用：<strong>{{ item.callLimit }} 次</strong>
                </li>
                <li class="mb-3">
                  <i class="fas fa-tags text-primary mr-2"></i>
                  价格：<strong>¥{{ item.price }}/月</strong>
                </li>
              </ul>

              <button
                type="button"
                class="btn btn-outline-primary btn-block mt-auto"
                @click="onBuyPackageHandle(item.id, item.name, item.price)"
              >
                立即购买
              </button>
            </div>
          </div>
        </div>

        <div v-if="packageList.length === 0" class="col-12 text-center text-muted">
          正在加载套餐...
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BuyPackage',
  data() {
    return {
      packageList: []
    }
  },
  methods: {
    // 加载套餐列表
    async loadPackageList() {
      try {
        const res = await this.$api.getPackageList(1, 100, false);
        if (res.code != 1000) {
          this.$alert(res.message || '加载套餐列表失败', 'danger');
          return;
        }
        this.packageList = res.data || [];
      } catch (e) {
        this.$alert('加载套餐列表失败！', 'danger');
        console.error('套餐列表加载失败：', e);
      }
    },

    // 购买逻辑
    async onBuyPackageHandle(id, name, price) {
      try {
        const confirmRes = await this.$confirm('购买', `是否花费${price}元订购一个月${name}`);
        if (!confirmRes) return;
        const res = await this.$api.buyPackage({ apiPackageId: id });
        if (res.code != 1000) {
          this.$alert(res.message, 'danger');
          return;
        }
        this.$alert(res.message || '购买成功', 'success');
      } catch (e) {
        this.$alert('购买套餐失败', 'danger');
        console.error(e);
      }
    }
  },
  async mounted() {
    await this.loadPackageList();
  }
}
</script>

<style scoped>
.package-card {
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}
.package-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card-header {
  border-bottom: none;
  padding: 18px 16px;
}

/* 信息列表内的 API 部分 */
.api-list {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 前缀文本 */
.api-label {
  font-weight: 500;
  margin-right: 6px;
  color: #333;
}

/* pill 标签 */
.api-pill {
  display: inline-block;
  font-size: 0.82rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 123, 255, 0.08);
  color: #0056b3;
  border: 1px solid rgba(0, 86, 179, 0.08);
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  cursor: default;
}

/* 悬停轻微高亮 */
.api-pill:hover {
  filter: brightness(0.96);
}

/* 列表条目通用样式 */
.list-unstyled li {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: #555;
}
.list-unstyled i {
  width: 20px;
}

/* 按钮全宽 */
.btn-block {
  width: 100%;
}

/* 小屏设备时调整 pill 大小 */
@media (max-width: 575.98px) {
  .api-pill {
    max-width: 120px;
    font-size: 0.72rem;
    padding: 5px 8px;
  }
}
</style>
