<template>
  <div class="headerContainer">
    <div class="lt" :class="this.curLogoClass">
      <img id="logo" @click="showConsole()" :src="this.curLogoImg">
      <span>{{ this.$store.state.shopName }}</span>
      <img v-show="this.$store.state.bleDiscovery" src="../static/img/bleDiscovery.svg">
      <img v-show="this.$store.state.wsState" src="../static/img/bleUpload.svg">
    </div>
    <div class="rt">
      <p @click="showUuid()">版本 {{ this.$store.state.localVersion }}</p>
      <span>{{ this.$store.state.curTime }}</span>
      <span>{{ this.$store.state.curWeek }}</span>
      <span>{{ this.$store.state.curDay }}</span>
      <!-- <span @click="refreshPage()">{{ nowWeeks }}</span> -->
      <!-- <span @click="showfullScreen()">{{ nowDay }}</span> -->
    </div>

    <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="60%"
    >
      <span class="eqSnText">当前设备uuid</span>
      <br>
      <span class="eqSnText">{{ eqSn }}</span>
      <div id='qrcode' class="qrcode" ref="qrCodeUrl">
      </div>
      <table>
        <tr>
          <td>版本</td>
          <td>热点IP</td>
        </tr>
        <tr>
          <td>{{ currunVersion }}</td>
          <td>{{ curheadapi }}</td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import '../Global'
import '../libs/rem';
import QRCode from 'qrcodejs2'

import logo from '../assets/imgs/headside/logo.png'
import logo_xfl from '../assets/imgs/headside/logo_xfl.svg'

export default {
  data() {
    return {
      dialogVisible: false,
      lastClickTime: 0,
      count: 0,
      eqSn: localStorage.eqSn,
      nowWeeks: '',
      nowDay: '',
      nowTime: '',
      curAppType: appType,
      curLogoImg: logo,
      curLogoClass: 'logo_bsw',
      currunVersion: runVersion,
      curheadapi: headapi,
      // timer: null,
    }
  },
  mounted() {
    console.log("Headside mounted");
    console.log("route: " + this.$route.path);
    // console.log("[Headside mounted] timer_headclock = " + timer_headclock);

    this.getLogo();
    this.getCurVersion();

    // this.clearTimer();
    // console.log("[Headside mounted] clearTimer run! timer_headclock = " + timer_headclock);

    // // if (this.timer == null) {
    // if (timer_headclock == null) {
    //   timer_headclock = setInterval(() => {
    //     this.getCurrentTime();
    //   }, 1000);
    //   console.log("[Headside mounted] getCurrentTime run! timer_headclock = " + timer_headclock);

    //   this.$once('hook:beforeDestroy', () => {
    //     console.log("[Headside hook:beforeDestroy] timer_headclock = " + timer_headclock);
    //     this.clearTimer();
    //     console.log("[Headside hook:beforeDestroy] timer_headclock = " + timer_headclock);
    //   });
    // }
    // else {
    //   console.log("[Headside mounted] 不加载时间 timer_headclock = " + timer_headclock);
    // }
  },
  // beforeDestroy() {
  //   console.log("[Headside beforeDestroy] timer_headclock = " + timer_headclock);
  //   this.clearTimer();
  //   console.log("[Headside beforeDestroy] timer_headclock = " + timer_headclock);
  // },
  methods: {
    // clearTimer() {
    //   if (timer_headclock != null) {
    //     clearInterval(timer_headclock);
    //     timer_headclock = null;
    //   }
    // },
    // getCurrentTime() {
    //   let date = new Date();
    //   let h = date.getHours();
    //   h = h < 10 ? '0' + h + ':' : h + ':';

    //   let m = date.getMinutes();
    //   m = m < 10 ? '0' + m + ':' : m + ':';

    //   let s = date.getSeconds();
    //   s = s < 10 ? '0' + s : s;

    //   this.nowTime = h + m + s;
    //   // this.nowTime = h + m;
    //   // console.log(this.nowTime);

    //   this.nowDayFunc();

    // },
    getLogo() {
      if (this.curAppType == 1) {    // 1: 小飞龙
        this.curLogoImg = logo_xfl;
        this.curLogoClass = 'logo_xfl';
      }
    },
    // 手动开启输出控制台
    showConsole() {
      let vconDom = document.getElementById('__vconsole');
      this.toggleClass(vconDom, 'show')
    },
    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, ' ');
      }
    },
    // 全屏展示
    showfullScreen() {
      let elem = document.body;
      if (elem.webkitRequestFullScreen) {
        elem.webkitRequestFullScreen();
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
      } else if (elem.requestFullScreen) {
        elem.requestFullscreen();
      } else {
        notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
      }
    },
    refreshPage() {
      location.reload();
    },
    // nowDayFunc() {
    //   let days = new Date().getDay();
    //   let wd = numberToWeekdays(days);
    //   this.nowWeeks = wd;
    //   this.nowDay = globalcurrentByCN();
    // },
    // 获取当前版本
    getCurVersion() {
      this.currunVersion = runVersion;
      this.curheadapi = headapi;
    },
    qrcode(code) {
      this.$refs.qrCodeUrl.innerHTML = "";
      let qrcode = new QRCode(this.$refs.qrCodeUrl, {
        width: 100,
        height: 100, // 高度
        text: code, // 二维码内容
        image: '',
        render: 'canvas',// 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        background: '#f0f',
        foreground: '#ff0',
      });
    },
    showUuid() {
      this.eqSn = localStorage.eqSn;
      this.dialogVisible = true;
      this.$nextTick(function () {
        setTimeout(() => {
          this.qrcode(localStorage.eqSn);
        }, 500);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin cube {
  width: 96.8%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.headerContainer {
  @include cube;

  .lt {
    float: left;
    color: #fff;

    img {
      float: left;      
      
      &:nth-of-type(2) {
        width: 0.16rem;
        margin-top: 0.25rem;
        margin-left: 0.2rem;
      }
      &:nth-of-type(3) {
        width: 0.18rem;
        margin-top: 0.27rem;
        margin-left: 0.1rem;
      }
    }

    span {
      float: left;
      font-size: 0.28rem;
      line-height: 0.4rem;
      margin-left: 0.2rem;
      margin-top: 0.2rem;
    }
  }

  .rt {
    float: right;
    color: #fff;

    span {
      float: right;
      font-size: 0.28rem;
      line-height: 0.4rem;
      margin-right: 0.2rem;
      margin-top: 0.2rem;
    }

    p {
      float: right;
      margin: 0;
      margin-top: 0.2rem;
      text-align: right;
      font-size: 0.28rem;
      line-height: 0.4rem;
    }

    img {
      float: right;
      width: 0.39rem;
      margin: 0;
      margin-top: 0.19rem;
      margin-right: 0.03rem;

      &:nth-of-type(1) {
        margin-right: 0.2rem;
      }
    }
  }

  .logo_bsw {
    #logo {
      position: absolute;
      left: 0.3rem;
      height: 0.46rem;
      margin-top: 0.23rem;
    }

    span {
      margin-left: 1.36rem;
    }
  }
   
  .logo_xfl {
    #logo {
      width: 1.5rem;
      // height: 0.45rem;
      margin-top: 0.2rem;
    }
  }

}

</style>