<template>
  <van-overlay :show="scanning" :duration="0">
    <div class="wrapper" @click.stop>
      <van-loading size="64px" text-size="22px" :vertical="true">{{_message}}</van-loading>
    </div>
  </van-overlay>
</template>

<script>
import {Overlay, Loading} from 'vant';

export default {
    name: 'scan-overlay',
    components: {
      [Overlay.name]: Overlay,
      [Loading.name]: Loading,
    },
    props: {
      message: {
        type: String,
        default: '加载中...'
      }
    },
    data() {
      return {
        scanning: false,
        _message: this.message,
        defaultStatusBarColor: '#000000'
      }
    },
    methods: {
      // 显示
      show(msg) {
        this.listeningBack();
        this._message = msg ? msg : '加载中...';
        this.scanning = true;
        this.$nativeQRCode.setStatusBarColor(this.defaultStatusBarColor, "white");
      },
      // 隐藏
      hide() {
        this.scanning = false
        window.onpopstate = null;
        // this.$nativeQRCode.setStatusBarColor("#006953", "white");
        if (this.$nativeQRCode.statusBarColor == this.defaultStatusBarColor) {
          this.$nativeQRCode.setStatusBarColor(this.$nativeQRCode.beforeStatusBarColor, "white");
        }
      },
      // 监听返回键
      listeningBack() {
        // 可以监听返回键关闭图片查看界面
        const _this = this
        // history.pushState({}, null, window.location.href)
        window.onpopstate = () => {
          _this.hide()
          // this.$nativeQRCode.setStatusBarColor("#ededed", "black");
        }
      },
    }
  }
</script>
<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>