<template>
  <div class="card-5-wrapper">
    <Logo></Logo>
    <div class="bgi-wrapper">
      <img v-show="type == 1" src="~@/images/annual/yqd-back.png" alt="" />
      <img v-show="type == 2" src="~@/images/annual/no-yqd-back.png" alt="" />
    </div>
    <section v-show="type == 1" class="ani detail" swiper-animate-effect="fadeInRight"
        swiper-animate-duration="1.5s"
        swiper-animate-delay="0">
      <p>这一年</p>
      <p class="mg-30">您获得了 <span class="num">{{anualData.creditNum | yLocalString}}</span> 个云鹊豆</p>
      <p>在勤奋学习的同时，还积极参与活动，是收获颇丰的一年</p>
    </section>
    <section v-show="type == 2" class="detail">
      <p>这一年</p>
      <p class="mg-30">您还未获得云鹊豆</p>
      <p>在勤奋学习的同时，也可以参与活动获得云鹊豆哦～</p>
    </section>
  </div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
export default {
  components: {
    Logo
  },
  props: {
    anualData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    // 1: 已经获取云鹊豆;  2: 没有获取云鹊豆
    type() {
      return this.anualData.creditNum ? 1 : 2;
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-5-wrapper {
  position: relative;
  top: 0;
  left: 0;
  height: 100vh;
  font-size: 16px;
  color: #3B3B3B;
  background: #FEF9F4;
  .bgi-wrapper {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    img {
      display: block;
      width: 100%;
      height: 342px;
    }
  }
  .detail {
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
    margin: 20px 30px;
    p {
      line-height: 2;
    }
    .mg-30 {
      margin: 30px 0;
    }
    .num {
      color: #FF8054;
    }
  }
}
</style>