<template>
  <cr-popup v-model="show" class="wchat-popup" :close-on-click-overlay="false">
    <div class="wchat-popup-dialog">
      <div class="wchat-popup-message">
        <div>请在微信小程序中参与此活动哦~</div>
      </div>
      <div class="wchat-popup-footer">
        <div plain type="primary" class="wchat-popup-confirm">
          打开微信小程序
          <!-- 狼大呜原始ID：gh_e1d790d67513
            羊小咩原始ID：gh_a976018bfb9e -->
          <wx-open-launch-weapp
            class="launch-btn"
            username="gh_a976018bfb9e"
            :path="newJumpUrl"
            @launch="launch"
            @error="launchError"
          >
            <script type="text/wxtag-template">
              <style>.btn {height: 100%;width: 100%;}</style>
              <div class="btn">打开小程序</div>
            </script>
          </wx-open-launch-weapp>
        </div>
      </div>
    </div>
  </cr-popup>
</template>
<script>
import wx from 'weixin-js-sdk';
import groupBuy from '@/api/groupBuy';
import config from '@/config';
export default {
  name: 'Weapp',
  props: {
    registeredObj: {
      type: Object,
      default: () => ({
        key: '',
        value: {}
      })
    },
    jumpUrl: String
  },
  data() {
    return {
      show: true
    };
  },
  computed: {
    newJumpUrl() {
      const jumpUrl = this.jumpUrl;
      const linkPath = window.location.href;
      return `${jumpUrl}?url=${encodeURIComponent(JSON.stringify(linkPath))}`;
    }
  },
  created() {
    this.wxConfig();
  },
  methods: {
    async wxConfig() {
      const route = this.$route;
      const [res] = await groupBuy.getWxConfig(`${config.localHost}${route.fullPath}`);
      wx.config({
        debug: false,
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], // 必填，需要使用的JS接口列表
        openTagList: ['wx-open-launch-weapp'],
        ...res
      });
    },
    launch() {
      console.log('launch');
    },
    launchError() {
      console.log('launchError');
    }
  }
};
</script>
<style lang="less">
.wchat-popup {
  overflow-y: visible !important;
  .wchat-popup-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 310px;
    font-size: 16px;
    background-color: #fff;
    border-radius: 0.426667rem;
    transform: translate3d(-50%, -50%, 0);
    backface-visibility: hidden;
    transition: 0.3s;
    transition-property: transform, opacity;
  }
  .wchat-popup-message {
    max-height: 60vh;
    padding: 0.64rem;
    overflow-y: auto;
    font-size: 0.426667rem;
    line-height: 0.586667rem;
    white-space: pre-wrap;
    text-align: center;
    word-wrap: break-word;
    -webkit-overflow-scrolling: touch;
  }
  .wchat-popup-footer {
    height: 48px;
    overflow: hidden;
    user-select: none;
    border-bottom-left-radius: 0.426667rem;
    border-bottom-right-radius: 0.426667rem;
    border-top: solid 1px #f4f4f4;
  }
  .wchat-popup-confirm {
    color: #ec1500;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
}

.launch-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  opacity: 0;
  z-index: 100;
  left: 0;
}
</style>
