<template>
  <div class="card-6-wrapper">
    <Logo imgType="2"></Logo>
    <div class="bgi-wrapper">
      <img class="bg" src="~@/images/annual/share-back.png" alt />
      <!-- <img class="" src="~@/images/annual/qr-code.png" alt="" /> -->
    </div>
    <section class="detail">
      <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 src="~@/images/annual/qr-code.png" alt />
    </div>
    <section v-if="type == 1" class="bottom">
      <img src="~@/images/annual/save-btn.png" alt />
      <img src="~@/images/annual/share-btn.png" alt />
    </section>
    <section v-if="type == 2" class="bottom">
      <img class="btn-l" src="~@/images/annual/share-btn-l.png" alt />
    </section>
  </div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
let _this = null;
export default {
  components: {
    Logo
  },
  props: {
    type: {
      type: Number | String,
      default: 1 // 1: 站内;  2: 站外
    },
    anualData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      isHide: true,      
    }
  },

  created() {
    _this = this;
    // 截屏时通知前端
    window.__screenCaptureEvent = function() {
      console.log('in screenCaptureEvent');
        _this.$sendBuriedData({
          component_tag: '557#557002'
        });
    }

    // 保存图片的回调
    window.__savePage2Picture = function(param) {
      this.isHide = true;
      console.log("__savePage2Picture", param);
    }

  },

  methods: {
    // 保存图片
    savePage2Picture() {
      this.isHide = false;
      this.$forceUpdate()
      this.$nextTick( () => {
        rocNative.savePage2Picture({
          __funcName: "__savePage2Picture"       
        });
      })
    },

    
  },
};
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-6-wrapper {
  position: relative;
  top: 0;
  left: 0;
  height: 100vh;
  font-size: 16px;
  color: #3b3b3b;
  background: #88cb9d;
  .bgi-wrapper {
    position: absolute;
    top: 83px;
    left: 0;
    z-index: 1;
    img {
      display: block;
      width: 100%;
      height: 495px;
    }
  }
  .detail {
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
    color: #333;
    margin: 20px 30px;
    .title {
      font-size: 18px;
      font-weight: 700;
      text-align: center;
      margin: 25px 0 20px;
      color: #121212;
    }
    p {
      line-height: 1.45;
    }
  }
  .qr-wrapper {
    width: 100%;
    position: absolute;
    top: 410px;
    left: 0;
    z-index: 1;
    text-align: center;
    img {
      margin-top: 70px;
      width: 70px;
      height: 70px;
    }
  }
  .bottom {
    width: 100%;
    position: absolute;
    bottom: 25px;
    left: 0;
    z-index: 3;
    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>