<template>
  <!-- 会员卡片：等级徽标 + 期限丝带叠加绑定，整体放大 -->
  <view class="vip-card">
    <view class="vip-card-inner">
      <view class="vip-badge-combo">
        <image
          v-if="levelBadge"
          class="vip-level"
          :src="levelBadge"
          mode="aspectFit"
        />
        <image
          v-if="durationBadge"
          class="vip-ribbon"
          :src="durationBadge"
          mode="aspectFit"
        />
        <view v-if="!durationBadge && !levelBadge" class="vip-badge-placeholder">
          <text class="vip-badge-placeholder-text">V</text>
        </view>
      </view>
      <view class="vip-info">
        <text class="vip-title">{{ levelName }}</text>
        <text class="vip-sub">{{ durationLabel }} · {{ levelCode }}</text>
        <text class="vip-expire">{{ expireText }}</text>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 诊所管理员「我的」页会员卡片
 * 期限图为透明丝带，叠在等级徽标上绑定展示
 */
export default {
  name: 'VipMemberCard',
  props: {
    vip: {
      type: Object,
      default: null,
    },
  },
  computed: {
    durationBadge() {
      return (this.vip && this.vip.duration_badge_url) || ''
    },
    levelBadge() {
      return (this.vip && this.vip.badge_url) || ''
    },
    durationLabel() {
      return (this.vip && this.vip.duration_label) || '普通会员'
    },
    levelName() {
      return (this.vip && this.vip.level_name) || '普通会员'
    },
    levelCode() {
      return (this.vip && this.vip.level_code) || 'V0'
    },
    expireText() {
      if (!this.vip) return '默认会员'
      if (this.vip.is_lifetime) return '永久有效'
      const expireAt = Number(this.vip.expire_at || 0)
      if (!expireAt) {
        if (this.levelCode === 'V0') return '默认会员'
        return '永久有效'
      }
      if (typeof this.vip.expire_at === 'string' && this.vip.expire_at.indexOf('-') > -1) {
        return '有效期至 ' + this.vip.expire_at
      }
      const d = new Date(expireAt * 1000)
      const y = d.getFullYear()
      const m = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      return '有效期至 ' + y + '-' + m + '-' + day
    },
  },
}
</script>

<style lang="scss" scoped>
.vip-card {
  margin: 0 24rpx 24rpx;
}
.vip-card-inner {
  display: flex;
  align-items: center;
  padding: 36rpx 32rpx;
  border-radius: 20rpx;
  background: linear-gradient(135deg, #2c3e50 0%, #4a6741 55%, #6acdbb 100%);
  box-shadow: 0 8rpx 24rpx rgba(44, 62, 80, 0.18);
}
/* 组合徽标容器：等级在下，丝带叠在中下部 */
.vip-badge-combo {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vip-level {
  width: 140rpx;
  height: 140rpx;
  position: relative;
  z-index: 1;
}
.vip-ribbon {
  position: absolute;
  left: 50%;
  bottom: 10rpx;
  transform: translateX(-50%);
  width: 200rpx;
  height: 72rpx;
  z-index: 2;
}
.vip-badge-placeholder {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vip-badge-placeholder-text {
  color: #fff;
  font-size: 52rpx;
  font-weight: 700;
}
.vip-info {
  margin-left: 24rpx;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.vip-title {
  color: #ffffff;
  font-size: 34rpx;
  font-weight: 700;
  margin-bottom: 8rpx;
}
.vip-sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: 24rpx;
  margin-bottom: 8rpx;
}
.vip-expire {
  color: rgba(255, 255, 255, 0.75);
  font-size: 22rpx;
}
</style>
