<template>
  <div class="coupon-component relative">
    <div :class="['coupon-bg', isActive?'red':'gray']"></div>
    <div class="absolute left-0 top-0 right-0 bottom-0 fn-flex">
      <div class="fn-flex fn-flex-item">
          <div style="width:36%" class="text-center fn-flex fn-flex-column fn-flex-center justify-center">
              <div :class="['coupon-price text-bold text-middle font-28',isActive?' text-color-theme':'color-bbb']"><span class="font-52 mr10">{{priceNum}}</span><span>{{priceUnit}}</span></div>
              <div :class="['coupon-desc font-24 mt10',isActive?'color-bd6d6d':'color-bbb']" @click.stop="goLink(index)">{{descLeft}}<van-icon v-if="isDescLink" name="arrow" /></div>
          </div>
          <div style="width:60%" class="fn-flex-item pl35 text-left fn-flex fn-flex-column justify-center">
            <div class="coupon-title text-bold text-italic font-40" style="font-weight: 800;">
              <template v-if="typeof title === 'string'">
                <template v-for="(item, index) in title" :key="index">
                  <span v-if="isActive" :class="[title.length>2 && index>title.length-5 ?'text-color-theme':'color-000']">{{item}}</span>
                  <span v-else :class="[index<4?'color-bbb':'color-888']">{{item}}</span>
                </template>
              </template>
              <template v-else>
                <template v-for="(item, index) in title" :key="index">
                  <span v-if="isActive" :class="[item.is_highlight?'text-color-theme':'color-000']">{{item.text}}</span>
                  <span v-else :class="[item.is_highlight?'color-bbb':'color-888']">{{item.text}}</span>
                </template>
              </template>
            </div>
            <div :class="['coupon-desc font-24 mt20',isActive?'color-bd6d6d':'color-bbb']">{{descRight}}</div>
          </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  isActive: {
    type: [Boolean,Number],
    default: true
  },
  priceNum: {
    type: [String,Number],
    default: '0'
  },
  priceUnit: {
    type: String,
    default: '元'
  },
  isDescLink: {
    type: Boolean,
    default: false
  },
  descLeft: {
    type: String,
    default: ''
  },
  title: {
    type: [Array,String],
    default: () => []
  },
  descRight: {
    type: String,
    default: ''
  },
  index: {
    type: Number,
    default: 0
  },
})

const emit = defineEmits(['goLink'])

const goLink = (index) => {
  if(props.isDescLink){
  emit('goLink',index)
}
}

const aaa = () => {}
</script>

<style>
/* .color-#bd6d6d{} */
</style>