<template>
  <div class="card-4-wrapper" :class="{'ysl': type == 1, 'zqc': type == 2, 'no': type == 3}">
    <Logo imgType="2"></Logo>
    <section class="ani detail" swiper-animate-effect="fadeInRight"
        swiper-animate-duration="1.5s"
        swiper-animate-delay="0">
      <p v-show="title">
        <span class="fbig6 cw">{{title}}</span>
      </p>
      <section class="ct">
        <p>
          <span class="fw7">{{parseTime(anualData.learnEarliestTime, '{mm}')}}</span> 月
          <span class="fw7">{{parseTime(anualData.learnEarliestTime, '{dd}')}}</span> 日
          <span class="fw7">{{parseTime(anualData.learnEarliestTime, '{hh}')}}</span> 点，您还在学习。
        </p>
        <p>老师，您辛苦了！</p>
        <p class="tr mt-40">
          这一年，有
          <span class="fw7">{{anualData.loginDays}}</span> 天，
        </p>
        <p class="tr">您都在持续不断的学习。</p>
      </section>
    </section>
  </div>
</template>

<script>
import { parseTime } from "@/utils"
import Logo from "@/components/annual-summary/logo";
export default {
  components: {
    Logo
  },
  props: {
    type: {
      type: Number | String,
      default: 1
    },
    anualData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },

  computed: {
    title() {
      let text = "";
      if (this.type == 1) {
        text = "夜深了";
      } else if (this.type == 2) {
        text = "早起床";
      }
      return text;
    }
  },
  methods: {
    parseTime(value, format) {
      return parseTime(value, format);
    }
  },  
};
</script>

<style lang="less" scoped>
@import "../../style/as-common.less";

.card-4-wrapper {
  position: relative;
  top: 0;
  left: 0;
  height: 100vh;
  font-size: 16px;
  color: #3b3b3b;

  &.ysl {
    background: url("../../images/annual/page-4-back.png") no-repeat center
      center;
    background-size: cover;
    color: #ffffff;
  }

  &.zqc {
    background: url("../../images/annual/page-5-back.png") no-repeat center
      center;
    background-size: cover;
    color: #134a5d;
  }

  &.no {
    background: url("../../images/annual/page-6-back.png") no-repeat center
      center;
    background-size: cover;
    color: #ffffff;
  }

  .detail {
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
    margin: 20px 30px;

    .ct {
      p {
        line-height: 1.6 !important;
      }

      margin-top: 20px;

      .tr {
        text-align: right;
      }
    }
  }
}
</style>
