<script>
export default {
  name:"MobileConsole",
  props: {},
  data() {
    return {
      lastClickTime: 0,
      count: 0,
      limit: ['production', 'prod'].includes(process.env.VUE_APP_ENV) ? 3 : 1,
      style: {
        position: 'fixed',
        top: 'calc(50% - 30px)',
        left: 0,
        width: '8px',
        height: '60px',
        color: '#fff'
      }
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  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
      }
    }
  },
  // 通过render创建组件而不是通过template。没有:绑定参数的操作而是直接{}绑定参数
  render(h) {
    console.log('render')
    return h('div', {
      style: this.style,
      on: {
        click: () => {
          this.toggleVc()
        }
      }
    })
  }
}
</script>

<style lang="scss">
#__vconsole {
  display: none;
}
.vconsole_show {
  display: block !important;
}
</style>
