<template>
  <div id="app">
    <m-nav-bar v-show="showNavBar" :title="title" />
    <router-view :class="routerViewClass" />
    <m-tab-bar v-show="showTabBar" :current="currentTab" />
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import {sysInfo,getUrlParam}  from "@/utils/common";
export default {
  data() {
    return {
      code: ''
    };
  },
  computed: {
    ...mapState(["currentTab", "title", "showNavBar", "showTabBar"]),

    routerViewClass() {
      let retClass = ["router-view-con"];
      if (this.showNavBar) {
        retClass.push("router-view-nav-bar");
      }
      if (this.showTabBar) {  
        retClass.push("router-view-tab-bar");
      }
      return retClass;
    },
  },
  methods: {
    // ...mapActions(["getShoppingCart"]),
    ...mapMutations(['setAppVersion',"setCurrentTime"]),
  },
  mounted() {
    var local = window.location.href // 获取页面url
    var appid = 'wxbdddd81913c795e9'
    this.timeTask = setInterval(() => {
      this.setCurrentTime(+new Date())
    }, 1000);
    this.code = getUrlParam('code') // 截取code
    if (this.code == null || this.code === ''){
      // 没有code去拿code;
      if(sysInfo.isWechat) {
          window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_base&state=1#wechat_redirect`;
      }
    }else{
      // 获取得code
      // 拿着code去获取openId
      if(!localStorage.getItem('openId')) {
        this.$api({
          apiName: 'getWxOpenId',
          postData: {code:this.code},
          success: (res) => {
            localStorage.setItem('openId',res)
          }
        })
      }
    }
    // this.hasLogin && this.getShoppingCart();
    this.getVersionCode(e => {
      this.setAppVersion(e)
    }) 
  },
};
</script>

<style lang="less">
#app {
  width: 100vw;
  height: 100%;
  > .m-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }
  > .router-view-con {
    height: 100%;
  }
  > .m-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  > .router-view-nav-bar {
    padding-top: @mall-nav-bar-height;
  }
  > .router-view-tab-bar {
    padding-bottom: @mall-tab-bar-height;
  }
}
</style>
