<template>
  <div class="ticket-bar flex relative">
    <template v-if="$route.path !== '/Details'">
      <div class="relative bg-blue rounded-lg flex-grow-0" :class="[cardStyle === 2 ? 'w-1/2' : 'w-1/3']">
        <img class="absolute left-1/2 transform -translate-x-1/2 bottom-2" :class="[ cardStyle === 2 ? 'w-10' : 'w-14' ]" src="@/assets/home/ticket.png" alt="">
      </div>
      <div class="bg-blue rounded-lg flex-grow flex flex-col items-center justify-around">
        <p class="text-3xl mb-0">{{ num }}</p>
        <p class="text-xs mb-0">{{ ticketText }}</p>
      </div>
    </template>
    <template v-else>
      <div class="w-1/3 relative bg-blue-dark flex-grow-0 rounded-l">
        <img class="w-1/3 absolute left-1/2 transform -translate-x-1/2 bottom-2" src="@/assets/home/ticket.png" alt="">
      </div>
      <div class="line absolute left-1/3 top-1"></div>
      <div class="bg-blue-dark flex-grow flex flex-col items-center justify-around rounded-r">
        <p class="text-3xl mb-0">{{ num }}</p>
        <p class="text-xs mb-0 opacity-50">当前票数( 票 )</p>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      num: this.ticketNum
    }
  },
  props: {
    ticketNum: {
      type: Number
    },
    cardStyle: {
      type: Number,
      default: 1
    },
    ticketText: {
      type: String,
      default: '当前票数( 票 )'
    }
  },
  watch: {
    ticketNum(n) {
      console.log('n+++++++++++++++++',n)
      this.num = n
      console.log(this.num)
    }
  }
})
</script>

<style scoped>
  .ticket-bar {
    height: 58px;
  }
  .line {
    width: 1px;
    height: 49px;
    background: #594CE8;
  }
  .bg-blue {
    background: #4B53C9;
  }
  .bg-blue-dark {
    background: #322A82;
  }
</style>