<template>
  <div class="Reborn">
    <div class="content">
      <img
        src="../assets/ic_close.png"
        class="close_icon"
        @click="closeModal"
      >
      <div
        class="title_container"
        v-if="!can_get"
      >
        <div class="title">邀请1位好友报名成功</div>
        <div class="sub_title">可获得1次复活机会</div>
      </div>
      <div
        class="title_container"
        v-if="can_get"
      >
        <div class="title">已有好友帮你获得1次复活机会</div>
      </div>

      <img
        src="../assets/pic_fh.png"
        class="main_pic"
      >
      <div class="desc">已获得<span class="invite_num"> {{invite_num}} </span>张复活卡</div>
      <div class="sub_desc">当日未完成打卡,可在24:00前使用复活卡复活</div>
      <div class="btn_container">
        <div class="share_btn">
          <div
            class="Reborn_button"
            v-if="can_get"
            @click="joinReborn"
          >复活打卡
          </div>
          <div
            class="Reborn_button"
            v-if="!can_get"
            @click="inviteFriend"
          >邀请好友
          </div>
        </div>
        <!--<div-->
          <!--class="Reborn_button2"-->
          <!--@click="showImg"-->
        <!--&gt;获取邀请卡-->
        <!--</div>-->
      </div>
    </div>

    <ShareModal
      v-on:close="closeShareModal"
      v-if="showShareModal"
    ></ShareModal>

  </div>
</template>

<style>
  div.Reborn {
    text-align: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid transparent;
  }

  div.Reborn .close_icon {
    display: block;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 0.3rem;
  }

  div.Reborn .content {
    width: 6.4rem;
    height: 7.25rem;
    background: #ffffff;
    border-radius: 0.06rem;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 1px solid transparent;
  }

  div.Reborn .title_container {
    height: 1.6rem;
    padding-top: 0;
    border: 1px solid transparent;
  }

  div.Reborn .content .title {
    font-size: 0.4rem;
    color: #282828;
    margin-top: 0.6rem;
    font-weight: bold;
  }

  div.Reborn .content .sub_title {
    margin-top: 0.18rem;
    font-size: 0.4rem;
    color: #282828;
  }

  div.Reborn .content img.main_pic {
    width: 3.2rem;
    margin-top: 0.2rem;
  }

  div.Reborn .content .desc {
    margin-top: 0.24rem;
    color: #5a5a5a;
    font-size: 0.28rem;
  }

  div.Reborn .content .desc span {
    font-size: 0.36rem;
    color: #282828;
    font-weight: bold;
  }

  div.Reborn .content .sub_desc {
    margin-top: 0.3rem;
    color: #5a5a5a;
    font-size: 0.24rem;
  }

  div.Reborn .content .Reborn_button {
    width: 5rem;
    height: 0.88rem;
    background: #6eb5f5;
    border-radius: 0.44rem;
    font-size: 0.38rem;
    font-weight: bold;
    color: #ffffff;
    line-height: calc(0.88 / 0.38);
  }

  div.Reborn .content .Reborn_button2 {
    width: 2.6rem;
    height: 0.88rem;
    margin-left: 0.3rem;
    background: #ffbb34;
    border-radius: 0.44rem;
    font-size: 0.38rem;
    font-weight: bold;
    color: #ffffff;
    line-height: calc(0.88 / 0.38);
  }
</style>
<style scoped>
  .btn_container {
    display: flex;
    justify-content: center;
    margin-top: .4rem;
  }
</style>

<script>
  import ShareModal from "@/components/ShareModal.vue";
  import {shareContent, track} from "@/components/axios/api";

  export default {
    name: "Reborn",
    components: {ShareModal},
    data() {
      return {
        showShareModal: false,
        userData: null
        // can_get: false,
        // invite_num: 4
      };
    },
    methods: {
      //打开分享图
      showImg() {
        this.$emit("showShareImg", "code_rebirth")
      },
      // 关闭弹窗
      closeModal() {
        shareContent("").then(res => {
          let result = res.data;

          let links = `${location.href.split("#")[0].split("?")[0]}`;

          wx.updateAppMessageShareData({
            title: result.title, // 分享标题
            desc: result.desc, // 分享描述
            link: links, // 分享链接
            imgUrl: result.img_url, // 分享图标
            success: function () {
            }
          });
          wx.onMenuShareAppMessage({
            title: result.title, // 分享标题
            desc: result.desc, // 分享描述
            link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: result.img_url, // 分享图标
            success: function () {
              // 用户点击了分享后执行的回调函数
            }
          });
          // wx.onMenuShareTimeline({
          //   title: result.title, // 分享标题
          //   link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          //   imgUrl: result.img_url, // 分享图标
          //   success: function () {
          //   }
          // });
        });

        this.$emit("close", true);
      },
      closeShareModal() {
        this.showShareModal = false;
      },
      // 邀请好友
      inviteFriend() {
        this.showShareModal = true;
        let id = this.userData.id;
        track("rebitrh_share");
        console.log("处理前连接", location.href);
        let links = `${
          location.href.split("#")[0].split("?")[0]
          }?inviter=${id}&from_type=rebirth&`;
        console.log("处理后的连接", links);
        shareContent("rebirth").then(res => {
          let result = res.data;
          wx.updateAppMessageShareData({
            title: result.title, // 分享标题
            desc: result.desc, // 分享描述
            link: links, // 分享链接
            imgUrl: result.img_url, // 分享图标
            success: function () {
            }
          });
          wx.onMenuShareAppMessage({
            title: result.title, // 分享标题
            desc: result.desc, // 分享描述
            link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: result.img_url, // 分享图标
            success: function () {
              // 用户点击了分享后执行的回调函数
              track("rebitrh_share_act");
            }
          });
          // wx.onMenuShareTimeline({
          //   title: result.title, // 分享标题
          //   link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          //   imgUrl: result.img_url, // 分享图标
          //   success: function () {
          //   }
          // });
        });
      },
      // 立即报名
      joinReborn() {
        this.$emit("rebirth", true);
      }
    },
    mounted() {
      if (window["userData"]) {
        this.userData = window["userData"];
      } else {
        let localUserData = localStorage.getItem("walk_userData");
        if (localUserData) {
          window["userData"] = JSON.parse(localUserData);
          this.userData = window["userData"];
        }
      }
    },
    props: ["v_data"],
    computed: {
      can_get() {
        return this.v_data.can_get;
      },
      invite_num() {
        return this.v_data.cnt;
      }
    }
  };
</script>
