<template>
  <view class="vip-card">
    <view style="flex: 1">
      <view class="vip-title-row">
        <image class="vip-icon" src="https://api.ccttiot.com/Vector-1746435740006.png" mode="aspectFit" />
        <text class="vip-status">{{VipLevel.getName(mch.vipLevel)}}</text>
      </view>
      <text class="vip-desc" v-if="mch.vipLevel === VipLevel.VIP0">解锁会员获得更多权益</text>
      <view class="vip-desc" v-if="[VipLevel.VIP1, VipLevel.VIP2].includes(mch.vipLevel)">普通会员有效期至 {{mch.vip1Time | dv}}</view>
      <view class="vip-desc" v-if="mch.vipLevel === VipLevel.VIP2">高级会员有效期至 {{mch.vip2Time | dv}}</view>
    </view>
    <button class="vip-btn" size="mini" v-if="mch.vipLevel === VipLevel.VIP0" @click="onOpenVip">立即开通</button>
    <button class="vip-btn" size="mini" v-else @click="onOpenVip">立即续费</button>
  </view>
</template>

<script>
import { VipLevel } from '@/utils/enums'
export default {
  name: 'VipCard',
  props: {
    mch: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      VipLevel
    }
  },
  methods: {
    onOpenVip() {
      this.$tab.navigateTo('/pages/vip/buy')
    }
  }
}
</script>

<style lang="scss" scoped>
.vip-card {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #F1E5CC 0%, #F3D8C0 39.42%, #F5F0EA 100%);
  border-radius: 20rpx;
  margin: 0 32rpx 32rpx 32rpx;
  padding: 24rpx 48rpx;
  position: relative;
  .vip-title-row {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
    flex: 1;
    .vip-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 12rpx;
      flex-shrink: 0;
    }
    .vip-status {
      color: #000;
      font-size: 28rpx;
    }
  }
  .vip-desc {
    position: relative;
    color: #888;
    font-size: 24rpx;
    white-space: pre-line;
  }
  .vip-btn {
    background: #fff;
    color: #6a8cff;
    border-radius: 24rpx;
    font-size: 24rpx;
    line-height: 48rpx;
    height: 48rpx;
  }
}
</style>