<template>
  <div class="Free">
    <div class="content">
      <img
        src="../assets/ic_close.png"
        class="close_icon"
        @click="closeModal"
      >
      <div class="title">邀请1位好友报名成功</div>
      <div class="sub_title">可获取免押金1次</div>
      <img
        src="../assets/pic_coin.png"
        class="main_pic"
      >
      <div class="desc">
        成功邀请<span class="invite_num"> {{invite_num}} </span>位好友
      </div>
      <div class="sub_desc">注：每位好友仅可被邀请一次</div>
      <div class="btn_container">
        <div class="share_btn">
          <!--<div-->
          <!--class="free_button"-->
          <!--v-if="can_get"-->
          <!--@click="joinFree"-->
          <!--&gt;立即报名-->
          <!--</div>-->
          <div
            class="free_button"
            @click="inviteFriend"
          >邀请好友获取
          </div>
        </div>
        <!--<div-->
        <!--class="free_button2"-->
        <!--@click="showImg"-->
        <!--&gt;获取邀请卡-->
        <!--</div>-->
      </div>
      <div v-if="invite_num>0" @click="joinFree">
        <div class="text_btn">
          <span>立即免押金报名</span>
          <img class="free_arrow" src="../assets/free_arrow.png" alt="">
        </div>
        <div class="sub_desc" style="margin-top: .15rem">须当日23:50前完成报名, 如已报名可次日使用</div>
      </div>
    </div>
    <ShareModal
      v-on:close="closeShareModal"
      v-if="showShareModal"
    ></ShareModal>
  </div>
</template>

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

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

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

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

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

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

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

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

  div.Free .content .sub_desc {
    margin-top: 0.3rem;
    color: #a5a5a5;
    font-size: 0.24rem;
  }

  div.Free .content .free_button {
    width: 5rem;
    height: 0.88rem;
    /*margin-top: 0.4rem;*/
    /*margin-left: calc((6.4rem - 5rem) / 2);*/
    background: #6eb5f5;
    border-radius: 0.44rem;
    font-size: 0.38rem;
    font-weight: bold;
    color: #ffffff;
    line-height: calc(0.88 / 0.38);
  }

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

  .text_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: .25rem;
    font-size: .3rem;
    font-weight: bold;
    color: #5a5a5a;
  }

  .free_arrow {
    margin-left: .1rem;
    width: .26rem;
  }
</style>
<script>
  import ShareModal from "@/components/ShareModal.vue";
  import {dakaPay, shareContent, track, liinShare} from "@/components/axios/api";

  export default {
    name: "Free",
    components: {
      ShareModal
    },
    data() {
      return {
        showShareModal: false,
        userData: null
        // can_get: false,
        // invite_num: 4
      };
    },
    methods: {
      //打开分享图
      showImg() {
        // this.$emit("showShareImg", "code_contract")
      },
      // 关闭弹窗
      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("free_contract_share");
        let links = `${
          location.href.split("#")[0].split("?")[0]
          }?inviter=${id}&from_type=free_contract&`;
        shareContent("free_contract").then(res => {
          let result = res.data;
          console.log("分享内容", result, links);
          let option1 = {
            title: result.title, // 分享标题
            desc: result.desc, // 分享描述
            link: links, // 分享链接
            imgUrl: result.img_url, // 分享图标
            success: function (res) {
              track("free_contract_share_act");
              console.log("option1Success", res)
            }
          }
          wx.updateAppMessageShareData(option1);
          //微信分享菜单测试
          let option2 = {
            title: result.title, // 分享标题
            desc: result.desc, // 分享描述
            link: links, // 分享链接
            imgUrl: result.img_url, // 分享图标
            success: function (res) {
              console.log("option2Success", res)
            }
          }
          let option3 = {
            title: result.title, // 分享标题
            desc: result.desc, // 分享描述
            link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: result.img_url, // 分享图标
            success: function (res) {
              // 用户点击了分享后执行的回调函数
              track("free_contract_share_act");
              console.log("option3Success", res)
            },
            fail: (err) => {
              console.log("option3error", err)
            }
          }
          wx.onMenuShareAppMessage(option3);
          let option4 = {
            title: result.title, // 分享标题
            link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: result.img_url, // 分享图标
            success: function (res) {
              console.log("option4Success", res)
            },
            fail: (err) => {
              console.log("option4error", err)
            }
          }
          // wx.onMenuShareTimeline(option4);
          console.log("option", option1, option2, option3, option4)
        });
      },
      queryPayImage() {
        liinShare().then(res => {
          if (res.code == 0) {
            console.log("open_platform2", res)
            localStorage.setItem("is_follow", res.data.is_follow);
            localStorage.setItem("liin_share_image", res.data.image);
            localStorage.setItem("hb_url", res.data.hb_url);
            localStorage.setItem("open_platform", res.data.open_platform);
          }
        });
      },
      showModal(title, desc) {
        this.$emit("showModal", title, desc);
      },
      // 立即报名
      joinFree() {
        let days = this.days || 0
        // this.queryPayImage();
        // dakaPay(days, 1).then(response => {
        //   console.log("报名状态", response);
        //   if (response.code == 1) {
        //     this.showModal("温馨提示", response.msg);
        //     return;
        //   }
        //   if (response.code == 0) {
        //     this.$emit("close", true);
        //     this.$emit("success")
        //     // localStorage.setItem("is_every", 0)
        //     // location.replace("#/Success");
        //   }
        // });
      },
      getPlatform() {
        var u = navigator.userAgent,
          app = navigator.appVersion;
        var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isAndroid) {
          return "android";
        }
        if (isIOS) {
          return "ios";
        }
        return "other";
      }
    },
    mounted() {
      console.log("this.pageType", this.page_type)
      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"];
        }
      }
      console.log("userData", this.userData)
    },
    props: ["v_data", "page_type", "days"],
    computed: {
      can_get() {
        console.log("是否可以免单", this.v_data);
        return this.v_data.can_get;
      },
      invite_num() {
        console.log("邀请人数", this.v_data);
        return this.v_data.cnt;
      }
    }
  };
</script>
