<template>
  <div class="as-share-wrapper">
    <div class="card-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 class="bottom">
        <WxOpenCommon :url="shareUrl" :uuid="uuid"></WxOpenCommon>
      </section>
    </div>
    <Loading v-show="showLoading" />
  </div>
</template>
<script>
import Loading from "@/components/common/common-loading";
import WxOpenCommon from '@/components/wx-open';
import { getWebPageUrl } from "@/utils";
import { Progress, Toast } from "vant";
export default {
  components: {
    Loading,
    WxOpenCommon
  },
  data() {
    return {
      uuid: "",
      shareUrl: "",
      showLoading: false,
      anualData: {}
    };
  },
  created() {
    let href = location.href;
    let uuidIndex = href.indexOf("uuid") || 0;
    if (uuidIndex > 0) {
      this.uuid = href.substr(uuidIndex + 5, 32);
    } else {
      this.uuid = "74ad500d5edf11eba76d000c29f14581"; // 测试用
    }
    this.shareUrl = location.href;
    if (href.indexOf("singlemessage") >= 0 || href.indexOf("wx_code") >= 0) {
      this.shareUrl = getWebPageUrl(`annualsummary/#/as-share?uuid=${this.uuid}`);
      location.replace(this.shareUrl);
    }
    this.initData();
    // 设置二次分享
    this.secondShare();

    // 全局埋点--对外埋点
    this.$sendBuriedData({
      action: "ACTION_WEB_ENTER",
      component_tag: `561#0#${this.uuid}`
    });

    window.__screenCaptureEvent = function() {
      console.log('in screenCaptureEvent');
        _this.$sendBuriedData({
          component_tag: '559#559003'
        });
    }
  },

  methods: {
    // 获取数据
    initData() {
      let param = {
        uuid: this.uuid
      };
      this.showLoading = true;
      this.GET(`stats/year/end/report/share`, param).then(res => {
        if (res.code == "000000") {
          this.showLoading = false;
          this.handlerDate(res.data || {});
        } else {
          Toast(res.message);
        }
      });
    },

    // 对数据进行处理
    handlerDate(anualData) {
      let learnTime4Show = 0,
        loginTotalTime = 0,
        loginTotalTimeM = 0,
        loginTotalTimeH = 0,
        orderTotalAmount = 0,
        orderTotalAmountY = 0;
      if (anualData.learnEarliestTimeFlag == 1) {
        learnTime4Show = anualData.learnEarliestTime;
      } else if (anualData.learnLatestTimeFlag == 1) {
        learnTime4Show = anualData.learnLatestTime;
      } else {
        learnTime4Show =
          anualData.learnEarliestTime || anualData.learnLatestTime;
      }
      anualData.learnTime4Show = learnTime4Show;

      loginTotalTime = anualData.loginTotalTime || 0;
      if (loginTotalTime) {
        loginTotalTimeM = Math.floor(loginTotalTime / 1000);
        loginTotalTimeH = Math.floor(loginTotalTime / 1000 / 60);
      }
      anualData.loginTotalTimeM = loginTotalTimeM;
      anualData.loginTotalTimeH = loginTotalTimeH;

      orderTotalAmount = anualData.orderTotalAmount;
      if (orderTotalAmount) {
        orderTotalAmountY = Math.floor(orderTotalAmount / 100);
      }
      anualData.orderTotalAmountY = orderTotalAmountY;
      this.anualData = anualData;
    },

    // 二次分享
    secondShare() {
      this.wechatShare(
        {
          link: this.shareUrl,
          title: "云鹊医2020年度个人学习报告",
          friendtitle: "云鹊医2020年度个人学习报告",
          desc: "点击查看我的专属学习报告",
          imgUrl: "https://file.yunqueyi.com/logo.png"
        },
        () => {
          console.log("share success...");
        }
      );
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.as-share-wrapper {
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  // padding-bottom: 70px;
  // min-height: 105vh;
  background: #88cb9d;
  .card-wrapper {
    position: relative;
    top: 0;
    left: 0;
    font-size: 16px;
    color: #3b3b3b;
    background: #88cb9d;
    .bgi-wrapper {
      position: absolute;
      top: 20px;
      left: 0;
      z-index: 1;
      img {
        display: block;
        width: 100%;
        height: 495px;
      }
    }
    .detail {
      position: relative;
      top: 50px;
      left: 0;
      z-index: 2;
      color: #333;
      margin: 0 30px 20px;
      .title {
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        margin: 0 0 20px;
        color: #121212;
      }
      p {
        line-height: 1.45;
      }
    }
    .qr-wrapper {
      width: 100%;
      position: absolute;
      top: 358px;
      left: 0;
      z-index: 1;
      text-align: center;
      img {
        margin-top: 70px;
        width: 70px;
        height: 70px;
      }
    }
    .bottom {
      width: 100%;
      position: fixed;
      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;
      }
    }
  }

  .bottom-1 {
    display: flex;
    width: 100%;
    position: absolute;
    bottom: 25px;
    left: 0;
    z-index: 3;
    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>