<template>
  <view class="page">
    <vip-card :user-info="userInfo" @login="handleLogin" ref="card" />
    <!-- <view class="list-title">VIP会员专享{{ list.length }}项权益</view>
    <view class="list">
      <view class="item" v-for="item in list" :key="item.name">
        <image class="icon" :src="item.icon"></image>
        {{ item.name }}
      </view>
    </view> -->
    <image
      class="img"
      v-if="userInfo"
      :src="userInfo.vip_img"
      mode="widthFix"
    ></image>
  </view>
</template>

<script>
import login from "@/lib/utils/login";
import { getUserInfo } from "@/lib/api/user";
import VipCard from "@/components/vip-card/vip-card.vue";

export default {
  name: "VipVip",
  components: { VipCard },
  data() {
    return {
      id: 0,
      userInfo: null,
      list: [
        {
          name: "10000积分",
          icon: require("@/assets/vip/icon-integral.png"),
        },
        {
          name: "90团1000",
          icon: require("@/assets/vip/icon-purchase.png"),
        },
        {
          name: "85团100",
          icon: require("@/assets/vip/icon-restaurant.png"),
        },
        {
          name: "积分翻倍抵现",
          icon: require("@/assets/vip/icon-double.png"),
        },
        {
          name: "精选商户权益",
          icon: require("@/assets/vip/icon-boutique.png"),
        },
        {
          name: "停车优惠",
          icon: require("@/assets/vip/icon-parking.png"),
        },
      ],
    };
  },

  async onShow() {
    this.userInfo = await login.getUserInfo();
    if (this.userInfo && this.userInfo.session) {
      this.getUserInfo();
    }
  },
  methods: {
    async getUserInfo() {
      const res = await getUserInfo();
      this.userInfo = { ...this.userInfo, ...res.data };
    },
    handleLogin(userInfo) {
      this.userInfo = userInfo;
    },
  },
};
</script>

<style lang="scss">
page {
  background: #000;
}
.page {
  background: url("~@/assets/vip/bg.png") no-repeat center top #000;
  background-size: contain;
  padding: 40rpx 20rpx;
  color: rgb(251, 222, 190);
}
.list-title {
  font-size: 36rpx;
  margin-top: 40rpx;
  text-align: center;
  &::before,
  &::after {
    content: "";
    display: inline-block;
    width: 40rpx;
    height: 40rpx;
    background: url("~@/assets/vip/icon-crown.png") no-repeat center;
    background-size: contain;
    vertical-align: middle;
    margin: 0 10rpx;
  }
}
.list {
  margin-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 33.3333%;
    text-align: center;
    margin: 20rpx 0;
    font-size: 24rpx;
  }
  .icon {
    width: 100rpx;
    height: 100rpx;
    display: block;
    margin: 0 auto 10rpx;
  }
}
.img {
  width: 100%;
}
</style>
