<template>
  <div class="h5-flow-container">
    <div v-if="flowInfo.pageimg"
         class="img-wrap">
      <img :src="flowInfo.pageimg"
           alt=""
           @click="handleImgClick">
      <span></span>
      <span></span>
    </div>
    <div v-if="flowInfo.skiptype==='miniprogram'"
         class="wx-container">
      <wx-open-launch-weapp id="launch-btn"
                            :username="flowInfo.originalid"
                            @launch="handleJumpConfirm"
                            :path="flowInfo.pathlink + '.html'">
        <script type="text/wxtag-template">
          <style>.btn { display: flex;align-items: center; width: 329px; height: 562px; color: #FFFFFF;  background: transparent; border:none; } 
          .btn::after {border: 0; background: transparent;}
          </style>
        <div><button class="btn"></button></div>
      </script>
      </wx-open-launch-weapp>
    </div>
  </div>
</template>
<script>
  import { reqGetFlowInfo, reqFlowFinished } from '../../../api/activityCenter/activityCenter'
  export default {
    data() {
      return {
        urlId: "",    // url路径上的ID
        unionID: "",  // 小程序用户标识
        flowInfo: {},   // 引流信息对象
      }
    },
    methods: {
      handleErrorFn(e) {
        console.log('fail', e.detail);
      },

      handleLaunchFn(e) {
        console.log('success');
      },

      // 获取url中的参数
      getUrlParams(paramsName) {
        //JavaScript获取url，并把url中的参数变成数组的方法，arr数组的值就是各参数值
        var url = window.document.location.href.toString();
        var u = url.split("?");
        var arr = [];
        if (typeof (u[1]) == "string") {
          u = u[1].split("&");
          for (var i in u) {
            var a = (u[i].split("="));
            arr[a[0]] = a[1];
          }
        }
        return arr[paramsName]
      },

      // 引流跳转时记录函数
      async flowFinished() {
        const { data: response } = await reqFlowFinished({ id: this.urlId, unionid: this.unionID })
        console.log(response)
      },

      // 获取引流配置信息
      async getFlowInfo() {
        const { data: response } = await reqGetFlowInfo(this.urlId)
        if (response.success !== 1) this.$toast(response.messages)
        this.flowInfo = response.result
        document.title = this.flowInfo.pagename
      },
      handleJumpConfirm() {
        this.flowFinished()
      },
      // 监听图片点击事件
      handleImgClick() {
        if (this.flowInfo.skiptype === 'view') {
          // 跳转h5页面
          this.flowFinished()
          window.location.href = this.flowInfo.pathlink
        } else if (this.flowInfo.skiptype === 'miniprogram') {
        } else {
          this.$toast('服务器数据异常,无法跳转')
        }
      }
    },
    mounted() {
      this.urlId = this.getUrlParams('id')
      this.unionID = this.getUrlParams('unionid')
      this.getFlowInfo()
      var that = this
      wx.ready(function () {

        wx.checkJsApi({
          jsApiList: ['onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
          success: function (res) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            console.log("weixin sdk config:", res)
          }
        });
        wx.onMenuShareAppMessage({
          title: `${that.flowInfo.pagename}`, // 分享标题
          desc: `https://mem.360lj.com/ym/ymall/guideflow/code?id=${that.urlId}`, // 分享描述
          link: `https://mem.360lj.com/ym/ymall/guideflow/code?id=${that.urlId}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'https://image.360lj.com/userfiles/images/202005ymall/d5d11cda-826a-42fa-a1d0-78181de4a9cd.png', // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          success: function () {
            console.log("weixin share ok...")
          }
        });
      });
    }
  }
</script>

<style lang="less" scoped>
  .h5-flow-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    .img-wrap {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 94%;
      transform: translate(-50%, -50%);
      img {
        width: 100%;
        height: 100%;
        border: 0.44rem solid #fff;
        border-radius: 0.2rem;
      }
      &::before {
        content: "";
        position: absolute;
        width: 0.2rem;
        height: 0.2rem;
        top: 1%;
        left: 2%;
        background-color: #fff;
        border-radius: 50%;
        border: 0.05rem solid #478bfb;
      }
      &::after {
        content: "";
        position: absolute;
        width: 0.2rem;
        height: 0.2rem;
        top: 1%;
        right: 2%;
        background-color: #fff;
        border-radius: 50%;
        border: 0.05rem solid #478bfb;
      }
      span:nth-child(2) {
        position: absolute;
        width: 0.3rem;
        height: 0.3rem;
        bottom: 1%;
        left: 2%;
        background-color: #fff;
        border-radius: 50%;
        border: 0.05rem solid #478bfb;
      }
      span:nth-child(3) {
        position: absolute;
        width: 0.3rem;
        height: 0.3rem;
        bottom: 1%;
        right: 2%;
        background-color: #fff;
        border-radius: 50%;
        border: 0.05rem solid #478bfb;
      }
    }
  }

  .wx-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
  }
</style>