<template>
  <div class="vc-tigger" @click="toggleVc"></div>
</template>

<script>
/**
 * @module components-MobileConsole组件
 * @desc MobileConsole组件
 */
// 组件参考地址 https://github.com/BryanAdamss/vue-awesome-template/blob/master/src/base/BasePopUp.vue
export default {
  name: 'MobileConsole',
  data() {
    return {
      lastClickTime: 0,
      count: 0,
      limit: ['production', 'prod'].includes(process.env.VUE_APP_ENV) ? 3 : 1
    }
  },
  created() {
    // if (!['production', 'prod'].includes(process.env.VUE_APP_ENV)) {
    //   const that = this
    //   setTimeout(() => {
    //     const vconDom = document.getElementById('__vconsole')
    //     that.toggleClass(vconDom, 'vconsole_show')
    //   }, 1000)
    // }
  },
  methods: {
    hasClass(obj, cls) {
      return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
    },
    addClass(obj, cls) {
      if (!this.hasClass(obj, cls)) obj.className += ' ' + cls
    },
    toggleClass(obj, cls) {
      if (this.hasClass(obj, cls)) {
        this.removeClass(obj, cls)
      } else {
        this.addClass(obj, cls)
      }
    },
    removeClass(obj, cls) {
      if (this.hasClass(obj, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
        obj.className = obj.className.replace(reg, ' ')
      }
    },
    toggleVc() {
      const nowTime = new Date().getTime()
      if (nowTime - this.lastClickTime < 3000) {
        this.count++
      } else {
        this.count = 0
      }
      this.lastClickTime = nowTime
      if (this.count >= this.limit) {
        const vconDom = document.getElementById('__vconsole')
        console.log(vconDom)
        this.toggleClass(vconDom, 'vconsole_show')
        this.count = 0
      }
    }
  }
}
</script>

<style lang="scss">
#__vconsole {
  display: none;
}
.vc-tigger {
  position: fixed;
  top: calc(50% - 30px);
  left: 0;
  width: 8px;
  height: 60px;
  color: #fff;
}
.vconsole_show {
  display: block !important;
}
</style>
