<template>
  <view class="content">
    <view class="tabs flex-row">
      <view
        v-for="item in list"
        :key="item.name"
        class="tab"
        :class="item.name === current ? 'current' : ''"
        @tap="current = item.name"
      >
        <text>{{ item.name }}</text>
      </view>
    </view>
    <view
      class="items"
      v-for="c in list"
      :key="c.name"
      v-show="c.name === current"
    >
      <navigator
        class="item"
        v-for="item in c.list"
        :key="item.id"
        :url="`./detail?id=${item.id}`"
      >
        <image class="icon" :src="item.logo"></image>
        {{ item.name }}
      </navigator>
    </view>
  </view>
</template>

<script>
import { getVipList } from "@/lib/api/vip";

export default {
  name: "VipDetail",
  data() {
    return {
      list: [],
      current: "",
    };
  },
  onLoad() {
    this.getVipList();
  },
  methods: {
    async getVipList() {
      const data = await getVipList();
      this.current = data.data[0].name;
      this.list = data.data;
    },
  },
};
</script>

<style lang="scss">
.content {
  background: #f5f5f5;
  min-height: 100vh;
  position: relative;
}
.tabs {
  width: 100%;
  height: 76rpx;
  background: #ffffff;
  letter-spacing: 3rpx;
  position: sticky;
  top: 0;
  z-index: 99;
  .tab {
    width: 50%;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #9496a5;
    text {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 76rpx;
    }
  }
  .current {
    color: #08c2c3;
    text {
      padding-top: 8rpx;
      border-bottom: 8rpx solid #08c2c3;
    }
  }
}
.items {
  width: 100%;
  display: flex;
  .item {
    width: 25%;
    box-sizing: border-box;
    background: #fff;
    border: 1rpx solid #f5f5f5;
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #666;
    text-align: center;
    .icon {
      display: block;
      width: 100rpx;
      height: 100rpx;
      margin: 0 auto 10rpx;
    }
  }
}
</style>
