<template>
  <section class="launch-app">
    <article :id="wxWapperId" v-show="showImg"></article>
    <img v-show="!showImg" @click="callAppAction" class="pic" :src="wxBtnImg" />
  </section>
</template>

<script>
/**
 * 微信文档： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
 * 新版API初始化前也需要 初始化wx.config
 *
 * 如果【打开app页面】有分享功能，需要自行初始化加入初始化功能
 * 即：(openTagList: ['wx-open-launch-app', 'wx-open-launch-weapp'])
 * 然后省去：this.checkInWechatFn(this.getSignMap); 此步骤为获取签名和初始化微信config
 *
 * 替换成最新wx-jssdk: https://res2.wx.qq.com/open/js/jweixin-1.6.0.js
 *
 * 样式 必须在如上方: <style> 标签中添加
 *
 * DEMO中的appid为 云鹊医联公众号的appid & 配置的是test1环境可用。
 * 需要当前页面有分享之类的功能了，需要appid需要配置成当前页面用到的appid
 *
 * 微信类型 1、云鹊医联  5、云鹊健康  10、基层大众版 15、云鹊医 20、基层医生版 25、云鹊慧测试账号 30云鹊医导流公众号
 * 各个环境目前获取签名使用：type [dev: 1, test1: 15, uat: 30, prod: 5]
 * https://sc.yunqueyi.com/wechats/signs?url=${页面地址}&type=1
*/

import axios from 'axios';

export default {
  props: {
    platform: {
      type: String,
      default: 'h5', // h5, native
    },
    /**
     * 1. platform=h5配置带参URL即可 eg: https://phome.yunqueyi.com/mall?code=1234
     *    如果URL为空app未打开的情况下即为打开APP首页
     *
     * 2. platform=native URL值为 'androidClassName###iosClassName'
    */
    url: {
      type: String,
      default: '',
    },
    /**
     * 1. platform=h5 暂时不用填写
     * 2. platform=native 如果需要传参数，为 key:value 键值对
    */
    params: {
      type: Object,
      default: () => ({}),
    },
    wxWapperId: {
      type: String,
      default: 'wx-open-launch-app-id-1',
    },
    wxOpenId: {
      type: String,
      default: 'wx-open-id-1',
    },
    appid: {
      type: String,
      default: 'wx5103ed453ef2dbe8',
    },
    wxBtnImg: {
      type: String,
      default: 'https://file.yunqueyi.com/h5/images/asimg/share-btn-l.png',
    },
  },
  data() {
    return {
      isIOS: false,
      isAndroid: false,
      isWechat: false,
      isWechatSuitable: false,
      signMap: null,
      extinfo: '',
      checkInWechatFn: () => {},
    };
  },

  computed: {
    // 如果可以使用，则插入微信标签
    showImg() {
      const si = this.isWechatSuitable != null && this.isWechatSuitable === false;
      console.log('showImg...', si);
      return si;
    },
  },
  watch: {
    showImg(value) {
      let _this = this;
      // 如果微信标签可用，则动态生成标签节点，并添加相应监听事件
      if(!value) {
        this.$nextTick( () => {
          const insertId = document.getElementById(this.wxWapperId);
          console.log('in watch insertId', insertId);
          if(!insertId) return;
          // const insertHtml = '';
          let script = document.createElement("script");  // 创建script内容插槽 避免template标签冲突
          script.type = "text/wxtag-template";            // 使用script插槽 必须定义这个type
          let content = `<img src='${this.wxBtnImg}' 
          style="display: block; margin: 5px 0; width: 340px; height: 50px;"/>`;
          script.text = content;                          // 自定义的html字符串内容
          // 唤起微信小程序
          // let html = `<wx-open-launch-weapp style="width:100%;display:block;height:100%;" username="小程序原始id" path="小程序页面路径和参数">${script.outerHTML}</wx-open-launch-weapp>`
          // 唤起APP
          let insertHtml = `<wx-open-launch-app id="${this.wxOpenId}"
            extinfo="${this.extinfo}"
            appid="${this.appid}" style="display: block; margin: 5px 0; width: 340px; height: 50px;" >
            ${script.outerHTML}
            </wx-open-launch-app>`;
            console.log('insertHtml', insertHtml);
          insertId.innerHTML = insertHtml;
          this.$forceUpdate();
          // 注册监听事件
          this.$nextTick(() => {
            var btn = document.getElementById(this.wxOpenId);
            if(btn != null) {
              // 成功唤起事件
              btn.addEventListener('launch', e => {
                _this.$emit('launchApp');
              }, true);
              // 唤起失败事件
              btn.addEventListener('error', e => {
                console.log('launchAppError...', e.detail);
                if (e.detail && e.detail.errMsg === 'launch:fail') {
                  window.location.href = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque';
                }              
              }, true);
            }
          });
        });
      }
    }
  },
  created() {

  },
  mounted() {
    if (process.client) {
      const ua = navigator.userAgent.toLowerCase();

      this.isWechat = /micromessenger\/([\d.]+)/i.test(ua);
      this.isIOS = /(iPhone|iPad)/i.test(ua);
      this.isAndroid = /(Android)/i.test(ua);

      this.checkInWechatFn = this.checkInWechat();
      // 如果有微信分享进行的config设置，则此行不用打开
      // this.checkInWechatFn(this.getSignMap);
      // （根据项目需要）设置跳转的额外参数
      this.setPlatformMessage();
    }
  },
  methods: {
    callAppAction() {
      console.log('in callAppAction');
      this.$emit('launchApp');
      setTimeout(() => {
        this.$callApp('');          // 不用直接唤起
        // this.$callApp(this.url); // 可以直接唤起指定页面，但只限于是h5页面的URL
      }, 100);
    },

    // 设置平台跳转信息
    setPlatformMessage() {
      let modeCode = 'M300'; let path = this.url; const
        params = [];
      const keys = Object.keys(this.params);

      if (this.platform === 'native') {
        modeCode = 'M200';
        params.push({ key: 'className', value: path });
      } else {
        if (path === '' || !path) {
          path = window.location.href;
        }
        console.log('传入的path', path);
        params.push({ key: 'pageUrl', value: path });
      }

      for (let i = 0; i < keys.length; i++) {
        const key = keys[i];

        params.push({
          key,
          value: this.params[key],
        });
      }

      // 暂时不用直接唤起
      // this.extinfo = '';      
      this.extinfo = JSON.stringify({
        name: 'dispatchEventByModuleCode',
        param: {
          modeCode,
          jsonString: params,
        },
      });
      console.log('回到APP参数2', JSON.parse(this.extinfo));
    },
    checkInWechat() {
      const self = this;
      const isWechatSuitable = self.checkWechatSuitable();

      self.isWechatSuitable = isWechatSuitable;
      console.log('是否展示功能', self.isWechatSuitable);

      // eslint-disable-next-line func-names
      return function (fn) {
        if (isWechatSuitable) fn();
        return self;
      };
    },
    checkWechatSuitable() {
      if (!this.isWechat) return false;

      const ua = navigator.userAgent.toLowerCase();
      const SUITABLE_WECHAT_VERSION = '7.0.12';
      const SUITABLE_IOS_VERSION = '10.3.0';
      const SUITABLE_ANDROD_VERSION = '5';
      // eslint-disable-next-line no-useless-escape
      const wechatInfo = ua.match(/micromessenger\/([\d\.]+)/i);
      const wechatVersion = wechatInfo[1];
      let suitWechat = false;
      let suitApp = false;
      let appVersion = '0';

      function versionCompare(pre, cur) {
        const pres = pre.split('.');
        const curs = cur.split('.');
        const maxL = Math.max(pres.length, curs.length);
        let flag = 0;

        for (let i = 0; i < maxL; i++) {
          const pv = pres.length > i ? pres[i] : 0;
          const cv = curs.length > i ? curs[i] : 0;
          const pn = isNaN(Number(pv)) ? pv.charCodeAt() : Number(pv);
          const cn = isNaN(Number(cv)) ? cv.charCodeAt() : Number(cv);

          if (cn !== pn) {
            flag = cn > pn ? 1 : -1;
            break;
          }
        }
        return flag !== -1;
      }

      suitWechat = versionCompare(SUITABLE_WECHAT_VERSION, wechatVersion);
      if (this.isIOS) {
        appVersion = ua.match(/cpu iphone os (.*?) like mac os/)[1].replace(/_/g, '.');
        suitApp = versionCompare(SUITABLE_IOS_VERSION, appVersion);
      } else if (this.isAndroid) {
        // eslint-disable-next-line prefer-destructuring
        appVersion = ua.match(/android (.*?);/)[1];
        suitApp = versionCompare(SUITABLE_ANDROD_VERSION, appVersion);
      }

      console.log(`wechatVersion: ${wechatVersion}`, `appVersion: ${appVersion}`);

      return suitWechat && suitApp;
    },
    getSignMap() {
      /**
       * 各个环境目前使用：dev=1, test1=15, uat=30, prod=5
       * 微信类型 1、云鹊医联  5、云鹊健康  10、基层大众版 15、云鹊医 20、基层医生版 25、云鹊慧测试账号 30云鹊医导流公众号
       */
      const authUrl = encodeURIComponent(window.location.href);
      const url = `https://sc.yunqueyi.com/wechats/signs?url=${authUrl}&type=1`;

      axios.get(url).then(({ data: res }) => {
        if (res && res.code === '000000') {
          const { signMap } = res.data;

          this.signMap = signMap;
          this.initWeiXin(signMap);
        }
      });
    },
    initWeiXin(data) {
      this.$wx.config({
        // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
        // debug: true,
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名
        jsApiList: ['onMenuShareAppMessage'], // 必填，需要使用的JS接口列表
        openTagList: ['wx-open-launch-app', 'wx-open-launch-weapp'], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
      });
      this.$wx.ready(() => {
        console.log('wx.ready is ok.');
      });
      this.$wx.error((res) => {
        console.log('wx.error res => ', res);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.launch-app {
  width: 100%;
  // min-height: 50px;
}
.pic {
  width: 100%;
  display: block;
}
</style>
