<template>
  <view>
    <!-- 扫码页面 -->
    <!-- #ifndef APP-PLUS -->
    <view class="wrap">
      <view class="u-tips-color">
        请在app中打开
      </view>
    </view>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <!--   <view class="wrap" @click="intsao">
      <view class="u-tips-color" style="color: #39b54a;">
        点击屏幕扫描二维码
      </view>
    </view> -->
    <!-- #endif -->

  </view>
</template>

<script>
  import storage from '@/utils/storage'
  export default {
    data() {
      return {
        barcode: null,
        flash: false,
        tip: '将二维码放入框中，即可自动扫描',
      }
    },
    onShow() {
      // 页面展示时，重新启动扫描检测
      if (this.barcode) {
        this.barcode.start()
      }
    },
    onLoad(params) {
      this.intsao(params);

    },
    mounted() {

    },
    methods: {

      intsao(params = {}) {
        //扫二维码 初始化 
        const {
          tip
        } = params
        if (tip) {
          this.tip = tip
        }
        // #ifdef APP-PLUS
        plus.navigator.setFullscreen(true); //全屏
        let currentWebview = this.$scope.$getAppWebview();
        this.createBarcode(currentWebview)
        this.createTipInfoView(currentWebview)
        this.createFlashBarView(currentWebview)
        // #endif

      },

      /**
       * 创建二维码
       * @param {Object} currentWebview
       */
      createBarcode(currentWebview) {
        if (!this.barcode) {
          this.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
            top: `0px`,
            left: '0px',
            height: `100%`,
            width: '100%',
            position: 'absolute',
            background: '#FFCC00',
            frameColor: '#FFCC33',
            scanbarColor: '#FFCC33',
          });
          this.barcode.onmarked = this.onmarked;
          this.barcode.setFlash(this.flash);
          //此处未演示扫码成功回调的地址设置，实际请参考HTML5Plus API自行处理  
          //注意扫码区域需为正方形，否则影响扫码识别率  
          currentWebview.append(this.barcode);
        }
        this.barcode.start()
      },

      /**
       * 创建提示信息
       * @param {Object} currentWebview
       */
      createTipInfoView(currentWebview) {
        const content = new plus.nativeObj.View('content', {
            top: '0px',
            left: '0px',
            height: '100%',
            width: '100%'
          },
          [{
            tag: 'font',
            id: 'scanTips',
            text: this.tip,
            textStyles: {
              size: '14px',
              color: '#ffffff',
              whiteSpace: 'normal'
            },
            position: {
              top: '90px',
              left: '10%',
              width: '80%',
              height: 'wrap_content'
            }
          }]);
        currentWebview.append(content);

      },
      // 创建 开关灯按钮
      createFlashBarView(currentWebview) {

        const openImg = this.crtFlashImg('static/yellow-scanBar.png')
        const closeImg = this.crtFlashImg('static/scanBar.png')
        const scanBarVew = new plus.nativeObj.View('scanBarVew', {
            top: '65%',
            left: '40%',
            height: '10%',
            width: '20%',
          },
          closeImg);
        scanBarVew.interceptTouchEvent(true);

        currentWebview.append(scanBarVew);

        scanBarVew.addEventListener("click", (e) => { //点亮手电筒
          this.flash = !this.flash;
          if (this.flash) {
            scanBarVew.draw(openImg);
          } else {
            scanBarVew.draw(closeImg)
          }
          if (this.barcode) {
            this.barcode.setFlash(this.flash);
          }
        }, false)
      },
      crtFlashImg(imgsrc) {
        return [{
          tag: 'img',
          id: 'scanBar',
          src: imgsrc,
          position: {
            width: '28%',
            left: '36%',
            height: '30%'
          }
        }, {
          tag: 'font',
          id: 'font',
          text: '轻触照亮',
          textStyles: {
            size: '10px',
            color: '#ffffff'
          },
          position: {
            width: '80%',
            left: '10%'
          }
        }]
      },
      // 扫码成功回调
      onmarked(type, result) {
        //	console.log('条码类型：' + type);
        //	console.log('条码内容：' + result);
        // 在页面 A 中触发事件，传递数据到页面 B
        //	uni.$emit('numcode_update', result);
        let _self = this;
        uni.setStorageSync('duankou', result);
        setTimeout(function() {
          uni.navigateTo({
            url: `/pages/shujucaiji/index?ipinfo=${result}`
          })
        }, 200);
        // 业务代码
        // 核对扫描结果
        // 判断是否是正确的格式
        // 不正确则跳转到 错误页面

      }

    }
  }
</script>

<style scoped>
  .wrap {
    height: calc(100vh);
    /* #ifdef H5 */
    height: calc(100vh - var(--window-top));
    /* #endif */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>