<template>
  <div class="main">
    <web-view
      ref="webview"
      class="webview"
      :src="src"
      @message="handleMessage"
    ></web-view>
    <!-- src="https://dipper.in.ah.cn/wsth5/#/" -->
  </div>
</template>

<script>
var webView;
const listenList = {};
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      src: "",
      disabledApi: [
        "setStorage",
        "setStorageSync",
        "removeStorage",
        "removeStorageSync",
        "clearStorageSync",
        "clearStorage",
      ],
      nowObj: {},
      loginType: "",
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  onLoad() {
    let type = uni.getStorageSync("loginType");
    this.loginType = type;

    if (type === "min") {
      let phone = this.user.MEMBERSHIP_MOBILEPHONE;
      this.src = `https://dipper.in.ah.cn/wsth5/#/`;
    } else {
      this.src = `https://dipper.in.ah.cn/wsth5/#/`;
      var current = this.$scope.$getAppWebview();
      setTimeout(() => {
        webView = current.children()[0];
      }, 1000);
    }
    this.$utils.addUserBehaviorNew();
  },
  onHide() {
    // 页面即将退出时要清理监听的内容,防止内存泄露
    console.log("hide");
    for (var key in listenList) {
      uni[listenList[key].offName](listenList[key].callBack);
    }
  },
  onBackPress() {
    // 页面即将退出时要清理监听的内容,防止内存泄露
    console.log("onBackPress");
    for (var key in listenList) {
      uni[listenList[key].offName](listenList[key].callBack);
    }
  },

  methods: {
    init(url) {
      this.src = url;
    },
    // 接收h5页面发来的键值判断需要执行的操作
    handleMessage(evt) {
      console.log("postMessage: ", evt);
      var _this = this;
      const d = evt.detail.data[0];
      // H5 不能使用部分API
      for (const i in this.disabledApi) {
        if (i === d.apiName) {
          console.error("API CANNOT USE");
          return;
        }
      }

      if (d.apiName) {
        if (d.apiName === "openLocation") {
          let obj = d.params;
          uni.openLocation({
            latitude: obj.latitude * 1,
            longitude: obj.longitude * 1,
            scale: 16, // 缩放比例
            name: obj.name,
            address: "", // 这个可能会影响地图的定位，所以可以选择不填
            success(data) {
              console.log(data);
            },
            fail(err) {
              console.log(err);
            },
          });
        } else if (d.apiName === "openNewPage") {
          let obj = d.params;
          console.log("openNewPage", obj);
          uni.navigateTo({
            url: `/pages/thirdParty/newPage?url=${obj.url}&title=${obj.title}`,
          });
        } else {
          switch (d.type) {
            case 1:
              const f = function (res) {
                webView.evalJS(
                  `UNI_CALLBACK("${d.callBackList[0]}", ${JSON.stringify(res)})`
                );
              };

              // 此调用是监听调用
              if (d.offName) {
                listenList[d.apiName] = {
                  offName: d.offName,
                  callBack: f,
                };
              }

              uni[d.apiName](f);
              break;
            case 2:
              if (d.onName) {
                // 需要取消的监听对象
                uni[d.apiName](listenList[d.onName].callBack);
              } else {
                uni[d.apiName]();
              }
              break;
            case 3:
              if (d.callBackList && d.callBackList.length) {
                d.callBackList.forEach((item) => {
                  const n = item.split("_");
                  // 若是选择图片需要转base64
                  if (d.apiName === "chooseImage" && n[1] === "success") {
                  } else {
                    d.params[n[1]] = function (res) {
                      const a = JSON.stringify(res);
                      webView.evalJS(`UNI_CALLBACK("${item}", ${a})`);
                    };
                  }
                });
                delete d.callBackList;
              }
              uni[d.apiName](d.params);
              break;
            case 4:
              const c = function (res) {
                webView.evalJS(
                  `UNI_CALLBACK("${d.callBackList[0]}", ${JSON.stringify(res)})`
                );
              };
              c(uni[d.apiName](d.params));
              break;
          }
        }
      }
    },
    // 获取到对应webview(关键)通过evalJs(注意大小写，如果不知道evalJ是什么，可自行百度) 执行网页的函数，可对其进行传参，完成与网页的通讯
    handlePostMessage(res) {
      this.$refs.webview.evalJs(`window.abc=321`);
    },
    // onMessage(event) {
    //   let _this = this;
    //   if (event.detail.data[0].action === "scanCode") {
    //     uni.scanCode({
    //       success: function (res) {
    //         console.log("res", res);
    //         _this.sendMessageToH5({ type: "scanCode", res: res });
    //       },
    //     });
    //   } else if (event.detail.data[0].action === "position") {
    //     let req = {
    //       membershipId: _this.user.MEMBERSHIP_ID,
    //     };

    //     _this.$api.$get("/Html5/GetMemberLocation", req).then((res) => {
    //       console.log("resdasda", res);
    //     });

    //     // plus.geolocation.getCurrentPosition(async function (position) {
    //     //   console.log("当前位置:", position);
    //     //   let res = position.coords;
    //     //   let seatInfo = {
    //     //     latitude: res.latitude,
    //     //     longitude: res.longitude,
    //     //   };
    //     //   _this.sendMessageToH5({ type: "position", res: seatInfo });
    //     // });
    //   } else if (event.detail.data[0].action === "openLocation") {
    //     let obj = event.detail.data[0].res;
    //     console.log("openLocation", obj);
    //     uni.openLocation({
    //       latitude: obj.latitude * 1,
    //       longitude: obj.longitude * 1,
    //       scale: 16, // 缩放比例
    //       name: obj.name,
    //       address: "", // 这个可能会影响地图的定位，所以可以选择不填
    //       success(data) {
    //         console.log(data);
    //       },
    //       fail(err) {
    //         console.log(err);
    //       },
    //     });
    //   } else if (event.detail.data[0].action === "openNewPage") {
    //     let obj = event.detail.data[0].res;
    //     console.log("openNewPage", obj);
    //     uni.navigateTo({
    //       url: `/pages/thirdParty/newPage?url=${obj.url}&title=${obj.title}`,
    //     });
    //   }
    //   // event.data 包含 H5 发送过来的消息内容
    // },
    // sendMessageToH5(data) {
    //   let obj = this.nowObj;
    //   obj[data.type] = data.res;
    //   this.nowObj = obj;
    //   const jsonString = JSON.stringify(obj);
    //   const encodedData = encodeURIComponent(jsonString);
    //   this.webViewSrc = `https://saas.eshangtech.com/goaliPay/index.html#${encodedData}`;
    //   // const webView = this.$refs.myWebView;
    //   // webView.postMessage(data);
    // },
  },
};
</script>
<style scoped lang="less">
.main {
  width: 100vw;
  height: 100vh;
}
</style>