<template>
  <div class="card-6-wrapper">
    <Logo imgType="2"></Logo>
    <div class="bgi-wrapper">
      <img class=" bg"
      swiper-animate-effect="fadeInUp"
      swiper-animate-duration="1.5s"
      swiper-animate-delay="0"
      src="~@/images/annual/env-back.png" alt />
    </div>
    <section
      class="ani detail"
      swiper-animate-effect="fadeInUp"
      swiper-animate-duration="1.5s"
      swiper-animate-delay="0s"
    >
      <p class="title">2020年度学习报告</p>
      <p v-if="anualData.doctorName">
        尊敬的
        <span class="cg2 b">{{anualData.doctorName}}</span> 医生
      </p>
      <p v-if="!anualData.doctorName">尊敬的医生</p>
      <p>
        {{anualData.yearType}}年您学习了
        <span class="cg2 b">{{anualData.learnCourseNum}}</span> 门课程，时长
        <span class="cg2 b">{{anualData.loginTotalTimeH}}</span> 小时
      </p>
      <p>
        获得了
        <span class="cg2 b">{{anualData.creditNum | yLocalString}}</span> 个云鹊豆
      </p>
      <p v-if="anualData.learnMoreCourseLabelName">
        最关注的知识类型是：
        <span class="cg2 b">{{anualData.learnMoreCourseLabelName}}</span>
      </p>
      <p class="mt-20">{{anualData.yearType}}年极不平凡，回顾这一年也极为难得，这一年感谢有您。</p>
      <p>希望您的2021年也有云鹊医的陪伴，因为云鹊医的参与，生活变得平凡也珍贵。</p>
      <p class="mt-20">
        ——已陪伴您
        <span class="cg2 b">{{anualData.registerDays}}</span> 天的云鹊医
      </p>
    </section>
    <div class="qr-wrapper">
      <img class=" "
        swiper-animate-effect="bounceIn"
        swiper-animate-duration="1s"
        swiper-animate-delay="3s"
      :src="anualData.qrCodeUrl" alt />
    </div>
    <div class="mask"></div>
    <section class="bottom" v-if="isHide && type == 1">
      <img @click="save" src="~@/images/annual/save-btn.png" alt />
      <img @click="share" src="~@/images/annual/share-btn.png" alt />
    </section>
  </div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
import { getWebPageUrl } from "@/utils";
import { Progress, Toast } from "vant";
export default {
  components: {
    Logo
  },
  props: {
    type: {
      type: Number | String,
      default: 1 // 1: 站内;  2: 站外
    },
    anualData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isHide: {
      type: Boolean,
      default: true
    },
    appVersion: {
      type: Number | String,
      default: 300 // 1: 站内;  2: 站外
    }
  },
  data() {
    return {
      // isHide: true,
    };
  },

  created() {
  },

  methods: {
    // 保存图片
    save() {
      if(this.appVersion < 359) {
          Toast('请下载新版本APP保存页面截图');
      } else {
        this.$emit("save");
      }
    },

    // 分享按钮
    share() {
      this.$emit("share");
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-6-wrapper {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100vh;
  font-size: 16px;
  color: #3b3b3b;
  background: #88cb9d;
  .bgi-wrapper {
    position: absolute;
    top: 356px;
    left: 0;
    z-index: 8;
    img {
      display: block;
      width: 100%;
      height: 228px;
    }
  }
  .detail {
    position: relative;
    top: 5px;
    left: 0;
    z-index: 5;
    color: #333;
    padding: 5px 10px 100px;
    margin: 0px 20px;
    background: white;
    .title {
      font-size: 18px;
      font-weight: 700;
      text-align: center;
      margin: 10px 0 20px;
      color: #121212;
    }
    p {
      line-height: 1.45;
    }
  }
  .qr-wrapper {
    width: 100%;
    position: absolute;
    top: 420px;
    left: 0;
    z-index: 10;
    text-align: center;
    img {
      margin-top: 70px;
      width: 70px;
      height: 70px;
    }
  }
  .mask {
    position: fixed;
    top: 500px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    background: #88cb9d;
  }
  .bottom {
    width: 100%;
    position: absolute;
    bottom: 25px;
    left: 0;
    z-index: 11;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    img {
      display: inline-block;
      margin: 10px;
      width: 143px;
      height: 39px;
    }
    .btn-l {
      margin: 5px 0;
      width: 340px;
      height: 50px;
    }
  }
}
</style>