<template>
  <view>
    <web-view
      :fullscreen="true"
      ref="webview"
      style="height: 500rpx"
      :src="src"
      @onPostMessage="message"
    >
    </web-view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      src: '',
      webview_styles: {
        progress: {
          color: '#FF3333',
        },
      },
    }
  },
  computed: {
    ...mapGetters(['token']),
  },
  onLoad({ url }) {
    const host = process.env.VUE_APP_BASE_URL
    const queryParams = this.queryURLParams(decodeURIComponent(url))
    const query = {
      ...queryParams.query,
      token: this.token,
      appbar: 'hidden',
    }
    this.src = `${host}/#${queryParams.path}${uni.$u.queryParams(query)}`
    console.log(this.src);
  },
  onReady() {
    this.writeToWebView()
    // this.webviewContext = uni.createWebviewContext('web-view', this)
  },
  methods: {
    queryURLParams(URL) {
      // const url = location.search; // 项目中可直接通过search方法获取url中"?"符后的字串
      let url = URL.split('?')[1]

      let obj = {} // 声明参数对象
      if (url) {
        let arr = url.split('&') // 以&符号分割为数组
        for (let i = 0; i < arr.length; i++) {
          let arrNew = arr[i].split('=') // 以"="分割为数组
          obj[arrNew[0]] = arrNew[1]
        }
      }
      return {
        query: obj,
        path: URL.split('?')[0],
      }
    },
    writeToWebView(data) {},
    evalJs: function () {
      console.log(this.$refs.webview)
      this.$refs.webview.evalJs("document.body.style.background ='#00FF00'")
    },
    message(event) {
      console.log(JSON.stringify(event))
    },
  },
}
</script>
