<template>
  <v-app>
    <Loading v-show="loading"></Loading>
    <div id="app" v-show="!loading">
        <div>
            <router-view />
        </div>
        <div class="nav" v-if="windowWidth">
            <div class="navBox">
                <router-link to="/home">
                    <div class="cell">
                        <div>
                            <van-icon :color="navNum==1?'#38d0c9':'#818181'" class="iconfont" size="26" class-prefix="icon" slot="left-icon" name="lvyou"></van-icon>
                        </div>
                        <div><span :style="{color:navNum==1?'#38d0c9':'#818181'}">{{ $t("navbar.home") }}</span></div>
                    </div>
                </router-link>
                <router-link to="/news">
                    <div class="cell">
                        <div>
                            <van-icon :color="navNum==2?'#38d0c9':'#818181'" size="24" name="chat-o" />
                        </div>
                        <div><span :style="{color:navNum==2?'#38d0c9':'#818181'}">{{ $t("navbar.news") }}</span></div>
                    </div>
                </router-link>
                <router-link to="/shopping">
                    <div class="cell">
                        <div>
                            <van-icon :color="navNum==3?'#38d0c9':'#818181'" size="24" name="shopping-cart-o" />
                        </div>
                        <div><span :style="{color:navNum==3?'#38d0c9':'#818181'}">{{ $t("navbar.shopping") }}</span></div>
                    </div>
                </router-link>
                <router-link to="/personal">
                    <div class="cell">
                        <div>
                            <van-icon :color="navNum==4?'#38d0c9':'#818181'" size="24" name="user-o" />
                        </div>
                        <div><span :style="{color:navNum==4?'#38d0c9':'#818181'}">{{ $t("navbar.personal") }}</span></div>
                    </div>
                </router-link>
            </div>
        </div>
        <van-notify />
    </div>
  </v-app>
</template>
<script>
import Loading from '@/views/home/loading'
import { VueLoading } from 'vue-loading-template'
import { setToken } from "@/utils/auth"; // get token from cookie
import { login, lineLogin } from "@/api/login.js";
import Cookies from 'js-cookie'

export default {
    name: "App",
    computed: {
        windowWidth() {
            return this.$store.state.app.navbarShow;
        },
        navNum() {
            return this.$store.state.app.navbarType;
        },
    },
  data: () => ({
    api_loading: false,
    initialized: false,
    loggedIn: false,
    inClient: false,
    name: "",
    userId: "",
    pictureUrl: "",
    loading: true,
    parmLiffId:"",
  }),
  created: function() {
     this.parmLiffId = this.getQueryString("liffId");
     if (this.parmLiffId) {
       Cookies.set('liffId', this.parmLiffId);
     } else {
       this.parmLiffId = Cookies.get('liffId');
     }
     this.$store.commit("user/SET_LIFF_ID", this.parmLiffId);
  },
  mounted: function() {
    setTimeout(() => {
      this.loading = false;
    }, 1000);
    this.initializeLiff()
    if (process.env.ENV != 'production') {
      // this.initVConsole()
    }
  },
  methods: {
    initializeLiff: function () {
      this.api_loading = true
      liff.init(
        {
          liffId: this.parmLiffId,
          withLoginOnExternalBrowser: true,
        },
        data => {
          this.initialized = true
          this.loggedIn = liff.isLoggedIn()
          this.inClient = liff.isInClient()
          this.api_loading = false
        },
        err => {
          console.log('LIFF initialization failed', err)
          this.api_loading = false
        }
      ).then(() => {
         // Start to use liff's api
         liff
           .getProfile().then(profile => {
             this.name = profile.displayName
             this.pictureUrl = profile.pictureUrl
             this.userId = profile.userId
             this.logins()
           }).catch(err => {
             console.log(`Error at getProfile: ${err}`)
             this.name = ""
           })
       });
    },
    initVConsole: async function() {
      window.vConsole = new window.VConsole({
          defaultPlugins: ['system', 'network', 'element', 'storage'],
          maxLogNumber: 1000,
          onReady: function () {
              console.log('vConsole is ready.')
          },
          onClearLog: function () {
              console.log('on clearLog')
          }
      })
    },
    doLogout: function() {
      if (liff.isLoggedIn()) {
        liff.logout()
        this.loggedIn = false
        window.location.reload()
      }
    },
    logins: function () {
         let requer = {
           username: this.userId,
           password: '',
           name : this.name,
           liffId : this.parmLiffId,
         };
        //获取token
        this.$store
            .dispatch("user/LineLogin", requer)
            .then(() => {
                //Cookies.set('phone',this.loginForm.phone);
                // Cookies.set('password',this.loginForm.password);
                // 获取用户信息
                this.$store.dispatch("user/GetInfo").then((res) => {
                    if(res.code==200){
                        //this.$router.push({ path: "/" }).catch(() => {});
                        console.log(`line login ok.`)
                    }
                });
            })
            .catch((err) => {
                console.log(`linelogin Error at logins: ${err}`)
            });
    },

    getQueryString(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return unescape(r[2]);
      }
      return null;
    },

  },
  components: {
      Loading,
  },
};
//这里做一个rem的fong-size的适应 默认size是1rem=100px 默认设计图是375的
var windowWidth = document.documentElement.getBoundingClientRect().width;
windowWidth = windowWidth > 750 ? 750 : windowWidth;
var fontSize = windowWidth / 3.75;
document.documentElement.style.fontSize = fontSize + "px";
// store.state.app.navbarShow

</script>
<style lang="scss">
#app {
    margin: auto;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    .nav {
        width: 100%;
        height: 0.78rem /* 84/100 */;

        .navBox {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0.84rem /* 84/100 */;
            height:0.78rem;
            display: flex;
            padding: 0.14rem /* 14/100 */ 0.34rem /* 34/100 */ 0.24rem
                /* 24/100 */ 0.34rem /* 34/100 */;
            box-sizing: border-box;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0px 0px 5px #e9e9e9;
            background: #fff;
            z-index: 2;
            .cell {
                width: 0.6rem /* 30/100 */;
                line-height:1.1;
                > div:nth-child(1) {
                    font-size: 0.3rem /* 12/100 */;
                    margin-top:-30px;
                }
                > div:nth-child(2) {
                    font-size: 0.1rem /* 12/100 */;
                    font-weight:500;
                }
            }
        }
    }
}

#nav {
    // padding: 0.3rem /* 30/100 */;
    a {
        font-weight: bold;
        color: #2c3e50;

        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>
