<template>
    <div :class="['banner-card-container', computedClass]" :style="containerStyle">
      <div class="status" :style="statusStyle">{{ statusText }}</div>
      <template v-if="isCoupon">
        <div class="title">
          <div class="amount">{{ benefitValueDesc.value }}</div>
          <div class="unit">{{ benefitValueDesc.unit }}</div>
        </div>
      </template>
      <template v-else>
        <div class="title non-coupon-title">
          <div class="amount non-coupon-amount">
            {{ benefitTypeDesc }}
          </div>
        </div>
      </template>
      <div class="desc">{{ benefitBottomDesc }}</div>
    </div>
</template>
<script setup lang="ts">

import { computed } from 'vue'
import { CARD_CATEGORY, getStatusFromBackEnd } from '../assets/constant'

const props = defineProps({
    cardData: {
      type: Object,
      default: () => ({})
    },
    staticData: {
      type: Object,
      default: () => ({})
    },
    index: {
      type: Number,
      default: 0
    }
})

const containerStyle = computed(()=>{
    return `
            margin-left: ${props.index === 0 ? '5px' : '0px'}; !important;
          `
})

const category = computed(()=>{
    return props.cardData.benefitType === CARD_CATEGORY.COUPON ? CARD_CATEGORY.COUPON : CARD_CATEGORY.RIGHT
})

const isCoupon = computed(()=>{
    return category.value === CARD_CATEGORY.COUPON
})

const status = computed(()=>{
    return getStatusFromBackEnd(props.cardData.statusTag)
})

const computedClass = computed(()=>{
    return `${status.value} ${category.value === CARD_CATEGORY.COUPON ? 'coupon' : 'right'}`
})

const statusText = computed(()=>{
    const { statusTexts } = props.staticData.card || {}
    return statusTexts ? statusTexts[props.cardData.statusTag] : ''
})

const statusStyle = computed(()=>{
    const { statusImgs } = props.staticData.card || {}
      const bgUrl = statusImgs && category.value && status.value ? statusImgs[category.value][status.value] : ''

      return `
            background: url(${bgUrl}) no-repeat;
            background-size: 100% 100%;
          `
})

const benefitValueDesc = computed(()=>{
    const benefitValueDesc = props.cardData.benefitValueDesc || ''
      const [value, unit] = benefitValueDesc.split('/')
      return {
        value,
        unit
      }
})

const benefitTypeDesc = computed(()=>{
    return props.cardData.benefitTypeDesc || ''
})

const benefitBottomDesc = computed(()=>{
    return props.cardData.benefitBottomDesc || ''
})


</script>
<style scoped lang="less">
.banner-card-container {
  position: relative;
  margin: 0 5px;
  width: 78px;
  height: 68px;
  font-family: PingFang SC;
  border-radius: 10px;
  background: #fff4f0;
  box-sizing: border-box;
  border: 1px solid #ffe5db;
  color: #ff6722;

  .status {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 50px;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    color: #e49877;
  }

  .title {
    margin: 25px auto 0;
    font-family: PingFang SC;
    font-size: 10px;
    font-weight: bold;
    line-height: 10px;
    text-align: center;
    width: fit-content;

    display: flex;
    align-items: baseline;

    .amount {
      font-family: BarlowSemiCondensed-Bold;
      font-size: 20px;
      color: #ff6722;
    }
    .unit {
      transform: translateY(-1px);
      margin-left: 1px;
    }
  }

  .desc {
    margin-top: 5px;
    font-size: 10px;
    font-weight: bold;
    line-height: normal;
    text-align: center;
  }

  &.right,
  &.unavailable {
    .non-coupon-title {
      margin-top: 27px;
    }

    .non-coupon-amount {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
    }
  }

  &.right {
    background: #fff6eb;
    border-color: #ffe3b7;

    .status {
      color: #a47149;
    }
    .title {
      &,
      .amount,
      .unit {
        color: #7a3c13;
      }
    }
    .desc {
      color: #a47149;
    }
  }

  &.unavailable {
    background: #f6f6f6;
    border-color: #e9e9e9;
    .status {
      color: #ababab;
    }
    .title {
      &,
      .amount,
      .unit {
        color: #666666;
      }
    }
    .desc {
      color: #666666;
    }
  }
}
</style>