<template>
  <div id="app" ref="rootApp">
    <cr-nav-bar v-if="header" :title="title" left-text="" @click-left="backFun" />
    <div class="app">
      <keep-alive :max="15" :include="keepAliveMap">
        <router-view />
      </keep-alive>
    </div>
    <cr-tabbar
      v-if="tabBar"
      v-model="router"
      inactive-color="#000"
      class="tab-bar"
      @change="handleTabBar"
    >
      <cr-tabbar-item :icon="homeIcon">精选</cr-tabbar-item>
      <cr-tabbar-item :icon="memberIcon">会员</cr-tabbar-item>
      <cr-tabbar-item :badge="cartCount || undefined" :icon="cartIcon">购物车</cr-tabbar-item>
      <cr-tabbar-item :icon="userIcon">我的</cr-tabbar-item>
    </cr-tabbar>
    <div v-if="loading" class="loading-container">
      <cr-loading class="loading" size="24px">加载中...</cr-loading>
    </div>
    <net-error />
    <LoginAuthorize />
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import NetError from '@/components/NetError';
import LoginAuthorize from '@/components/loginAuthorize/index.vue';
import localStorage from '@/service/localStorage.service';
import TMDConfig from '@/customize/tmd-config';
import {
  mapGetters as ShopCartMapGetters,
  mapActions as ShopCartMapActions
} from '@/views/shopCart/shopCartModules.js';

const homeSelected = 'https://img.lkbang.net/home-cur.47903e4ae9d08c4e.47903e4a.png';
const homeIcon = 'https://img.lkbang.net/home.7d4f65b0d01fba.7d4f65b0.png';
const cartSelected = 'https://img.lkbang.net/cart-cur.08b92b167a8592.08b92b16.png';
const cartIcon = 'https://img.lkbang.net/cart.4040b7d6f3c3a5a.4040b7d6.png';
const userSelected = 'https://img.lkbang.net/user-cur.e46c0ec5a4b27d16a.e46c0ec5.png';
const userIcon = 'https://img.lkbang.net/user.27bd25d441abd27.27bd25d4.png';
const memberIconSelected = 'https://img.lkbang.net/member_incon_selected.a48af1f5.png';
const memberIcon = 'https://img.lkbang.net/member_icon.b566de02.png';

export default {
  name: 'App',
  components: {
    NetError,
    LoginAuthorize
  },

  data() {
    return {
      router: 0,
      configTmd: ''
    };
  },
  computed: {
    ...ShopCartMapGetters(['cartCount']),
    ...mapGetters(['title', 'header', 'loading', 'tabBar', 'routeIdx', 'keepAliveMap']),
    homeIcon() {
      return this.routeIdx === 0 ? homeSelected : homeIcon;
    },
    memberIcon() {
      return this.routeIdx === 1 ? memberIconSelected : memberIcon;
    },
    cartIcon() {
      return this.routeIdx === 2 ? cartSelected : cartIcon;
    },
    userIcon() {
      return this.routeIdx === 3 ? userSelected : userIcon;
    }
  },
  watch: {
    header: {
      immediate: true,
      handler(val, oldVal) {
        if (val !== oldVal) {
          document.body.className = val ? 'has-header' : '';
        }
      }
    },
    routeIdx: {
      immediate: true,
      handler(val) {
        console.log('val====', val);
        this.router = val;
      }
    },
    tabBar: {
      immediate: true,
      handler(val, oldVal) {
        if (val !== oldVal) {
          document.body.className = val ? 'has-tab-bar' : '';
        }
      }
    }
  },
  created() {
    const config = new TMDConfig();
    this.configTmd = config;
  },
  async mounted() {
    if (localStorage.get('vccToken') && location.pathname !== '/login') {
      this.queryCartCount();
    }
    if (localStorage.get('vccChannel') == 161085) {
      this.$nextTick(() => {
        // document.getElementById('#app').innerHTML = '';
        this.$refs.rootApp.innerHTML =
          '<div class="cr-image" style="width: 100%; height: 100%;"><img src="https://img.lkbang.net/error.19ace11d.png" style="display: block; margin: 0 auto; width: 80%; height: auto; margin-top: 20px;" class="cr-image--img" ></div>';
      });
    }
  },
  methods: {
    ...ShopCartMapActions(['queryCartCount']),
    backFun() {
      this.$router.go(-1);
    },
    handleTabBar(idx) {
      console.log('idx', idx);
      const channelId = localStorage.get('vccChannel');
      // console.log(location.href,"location.href",location.origin)
      switch (idx) {
        case 0:
          this.$router.replace({ name: 'Home' });
          break;
        case 1:
          this.$router.replace({ name: 'Member' });
          // window.location.href = 'https://www.baidu.com';
          break;
        case 2:
          if (channelId == this.configTmd.channelId.id && localStorage.get('vccPhone')) {
            // console.log('jinlaile');
            // 第三方进来
            localStorage.get('vccToken')
              ? this.$router.replace({ name: 'Cart' })
              : this.$router.replace({ name: 'LoginMiddle', query: { backUrl: location.href } });
          } else {
            // 之前逻辑
            localStorage.get('vccToken')
              ? this.$router.replace({ name: 'Cart' })
              : this.$router.replace({ name: 'Login', query: { backUrl: location.href } });
          }
          break;
        case 3:
          if (channelId == this.configTmd.channelId.id && localStorage.get('vccPhone')) {
            // 第三方进来
            localStorage.get('vccToken')
              ? this.$router.replace({ name: 'User' })
              : this.$router.replace({ name: 'LoginMiddle', query: { backUrl: location.href } });
          } else {
            // 之前逻辑
            this.$router.replace({ name: 'User' });
          }
          break;
      }
    }
  }
};
</script>
<style lang="less">
@import './style/index';
.app {
  user-select: none;
  height: 100%;
  min-height: 100%;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.loading-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  .loading {
    padding: 6px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    @{deep} .cr-loading--text {
      color: #fff;
    }
  }
}
.tab-bar {
  position: relative;
  padding-top: 10px !important;
  box-sizing: border-box;
  z-index: 11;
  height: calc(@tab-bar-height + constant(safe-area-inset-bottom));
  height: calc(@tab-bar-height + env(safe-area-inset-bottom));
  align-items: flex-start !important;
  .cr-icon {
    display: block;
    height: 24px;
  }
  .cr-info--badge {
    padding: 0 4px;
  }
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: rgba(0, 0, 0, 0.33);
  }
}
</style>
