<template lang="html">
  <div class="luckyCardVue">

    <div class="wrap" :class="{ 'active': cardInfo.show }" @click="$emit('luck-draw', cardInfo, cardIndex)">

      <div class="cardFace"
        :style="{ 'background-image': `url(static/img/avatar/${cardInfo.name}.png)` }">
      </div>

      <div class="cardBackground"></div>

    </div>

    <div class="name" v-show="cardInfo.lucky" :class="{ 'active': cardInfo.lucky }">
      {{ egg(cardInfo.name) }}
    </div>

  </div>
</template>

<script>
export default {
  props: {
    cardIndex: {
      type: Number,
      default: 0
    },
    cardInfo: {}
  },
  methods: {
    egg (name) {
      // 文字彩蛋，中奖时会显示在名字后面
      let eggs = {
        '林程彪': '实锤？！ Σ(っ °Д °;)っ',
        '钟志苗': '感谢CCTV!',
        '龚书浩': 'emmmmmmmmmm？'
      }
      if (eggs[name]) {
        return name + '：' + eggs[name]
      }
      return name
    }
  }
}
</script>

<style lang="scss" scoped>
.luckyCardVue{
  transform-style: preserve-3d;
  /*! autoprefixer: off */
  perspective: 800px;
  /* autoprefixer: on */
  .wrap{
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(-180deg);
    transition: all 1s ease;
    &.active{
      transform: rotateY(0deg);
    }
    .cardFace, .cardBackground{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    .cardFace{
      background-size: calc(100% + 6px * 2);
      background-position: center center;
      border: 2px solid #0D0D1F;
    }
    .cardBackground{
      display: flex;
      background-color: #121229;
      border: 2px solid #0D0D1F;
      transition: all .2s ease;
      transform: rotateY(180deg) translateZ(1px);
      &:before{
        display: block;
        content: "?";
        font-size: 77px;
        margin: auto;
        text-align: center;
        color: #232645;
      }
      &:hover{
        background-color: #1F1F3E;
      }
    }
  }
  .name{
    display: none;
    color: #3ECDFD;
    font-size: 60px;
    white-space: nowrap;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(50px, -50%);
    filter: blur(100px);
    transition: all 1s ease .5s;
  }
  &.active{
    .name{
      display: inline;
      filter: blur(0px);
    }
  }
}
</style>
