<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
  <!-- #endif -->
    <view>
      <button @click="JsOnUts">1. js监听uts消息</button>
      <button @click="emitFromUts">2. uts中触发监听</button>
      <button @click="emitUtsMessageUTSObject">2.1 uts中触发监听(UTSJSONObject)</button>
      <button @click="emitUtsMessages">2.2 uts中触发监听(多个参数)</button>
      <button @click="emitUtsMessageNoArgument">2.3 uts中触发监听(无参数)</button>
      <button @click="offUts">取消uts消息监听</button>

      <button @click="UtsOnJS">1. uts监听js消息</button>
      <button @click="emitFormJS">2 .js中触发监听</button>
      <button @click="emitFormJSObject">2.1 js中触发监听(UTSJSONObject)</button>
      <button @click="offJs">取消js消息监听</button>
      <button @click="clear">清空消息</button>

      <view class="box">
        <view>收到的消息：</view>
        <view>
          <view v-for="(item, index) in log" :key="index">{{ item }}</view>
        </view>
      </view>
    </view>
    <button @click="testAll">test all</button>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  import {
    onJsMessage,
    offJsMessage,
    emitUtsMessage,
    emitUtsMessageUTSObject,
    emitUtsMessageNoArgument,
    emitUtsMessages,
    getMessageChannel,
    getRevJsMessage,
    clearJsMessage,
    onJsMessageOnce,
  } from "@/uni_modules/uts-eventbus"


  export default {
    data() {
      return {
        log: [] as string[],
      }
    },
    methods: {
      fn(res : any, res2 : any) {
        if (res != null){
          console.log("on rev: " + JSON.stringify(res))
          this.log.push(res)
        }
        if (res2 != null) {
          console.log("on rev: " + JSON.stringify(res2))
          this.log.push(res2)
        }
      },
      fn2(res : string) {
        this.log.push(res)
      },
      JsOnUts() {
        uni.$off(getMessageChannel(), this.fn)
        uni.$on(getMessageChannel(), this.fn)
      },
      offUts() {
        uni.$off(getMessageChannel(), this.fn)
      },
      emitFromUts() {
        emitUtsMessage("emit form uts")
      },
      emitUtsMessageUTSObject() {
        emitUtsMessageUTSObject({
            latitude: 39.951028,
            longitude: 116.354662,
            name: '金运大厦',
            address: '西直门北大街xx号'
          })
      },
      emitUtsMessages() {
        emitUtsMessages({
            latitude: 39.951028,
            longitude: 116.354662,
            name: '金运大厦',
            address: '西直门北大街xx号'
          }, "emit form uts")
      },
      emitUtsMessageNoArgument() {
        emitUtsMessageNoArgument()
      },
      JsOnUtsOnce() {
        uni.$once(getMessageChannel(), this.fn2)
      },
      UtsOnJS() {
        onJsMessage("JsMessage")
      },
      UtsOnJSOnce() {
        onJsMessageOnce("JsMessage")
      },
      offJs() {
        offJsMessage("JsMessage")
      },
      emitFormJS() {
        clearJsMessage()
        uni.$emit("JsMessage", "emit form js")
        let msg = getRevJsMessage()
        console.log("message:"+msg)
        if (msg && msg.length){
          this.log.push(msg)
        }
      },
      emitFormJSObject() {
        clearJsMessage()
        uni.$emit("JsMessage", {
            latitude: 39.951028,
            longitude: 116.354662,
            name: '金运大厦form js',
            address: '西直门北大街xx号 from js'
          })
        let msg = getRevJsMessage()
        console.log("message:"+msg)
        if (msg && msg.length){
          this.log.push(msg)
        }
      },
      clear() {
        clearJsMessage()
        this.log.length = 0
      },
      testAll() {
      	this.JsOnUts();
      	this.emitFromUts();
      	this.UtsOnJS();
      	this.emitFormJS();
      }
    },
  }
</script>

<style>
  .box {
    padding: 10px;
  }
</style>