<template>
  <div id="app" style="height:100%;">
    <!-- main content -->
    <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="55px">
      <x-header slot="header"
                style="width:100%;position:absolute;left:0;top:0;z-index:100;"
                :left-options="leftOptions"
                :title="title">
      </x-header>
      <router-view transition transition-mode="out-in">
      </router-view>
      <tabbar class="vux-demo-tabbar" icon-class="vux-center" slot="bottom">
        <tabbar-item is-link :link="{path:'/'}" >
          <i slot="icon" class="icon-home" aria-hidden="true"></i>
          <span slot="label">Home</span>
        </tabbar-item>
        <tabbar-item is-link :link="{path:'/lights'}" >
          <i slot="icon" class="icon-lightbulb" aria-hidden="true"></i>
          <span slot="label">Lights</span>
        </tabbar-item>
        <tabbar-item is-link :link="{path:'/sprinklers'}" >
      	  <i slot="icon" class="icon-sprinklers" aria-hidden="true"></i>
          <span slot="label">Sprinklers</span>
        </tabbar-item>
        <tabbar-item is-link :link="{path:'/shutters'}" >
      	  <i slot="icon" class="icon-shutters" aria-hidden="true"></i>
          <span slot="label">Rolling Shutter</span>
        </tabbar-item>
        <tabbar-item is-link :link="{path:'/timers'}" >
      	  <i slot="icon" class="icon-alarm" aria-hidden="true"></i>
          <span slot="label">Timers</span>
        </tabbar-item>
        <tabbar-item is-link :link="{path:'/settings'}" >
          <i slot="icon" class="icon-settings" aria-hidden="true"></i>
          <span slot="label">Settings</span>
        </tabbar-item>
      </tabbar>
    </view-box>
   </div>
</template>

 
.icon-alarm:before { content: '\e800'; } /* '' */
.icon-home:before { content: '\e801'; } /* '' */
.icon-lightbulb-on-outline:before { content: '\e802'; } /* '' */
.icon-settings:before { content: '\e803'; } /* '' */
.icon-shutters:before { content: '\e804'; } /* '' */
.icon-sprinklers:before { content: '\e805'; } /* '' */
.icon-lightbulb:before { content: '\f0eb'; } /* '' */


<script>
import { Loading, Tabbar, TabbarItem, ViewBox, XHeader } from 'vux'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'app',
  components: {
    Loading,
    Tabbar,
    TabbarItem,
    ViewBox,
    XHeader
  },
  methods: {
    ...mapActions([
      'updateDemoPosition'
    ])
  },
  computed: {
    ...mapState({
      route: state => state.route,
      path: state => state.route.path,
      deviceready: state => state.app.deviceready,
      demoTop: state => state.vux.demoScrollTop,
      isLoading: state => state.vux.isLoading,
      direction: state => state.vux.direction
    }),
    leftOptions () {
      if ((this.route.path === '/') || (this.route.path === '/speaker') || (this.route.path === '/playback') ||
          (this.route.path === '/settings')) {
        return { showBack: false }
      } else {
        return { showBack: true, backText: 'Back' }
      }
    },
    headerTransition () {
      return this.direction === 'forward' ? 'vux-header-fade-in-right' : 'vux-header-fade-in-left'
    },
    componentName () {
      if (this.route.path) {
        const parts = this.route.path.split('/')
        const theSize = parts.length
        if (/settings/.test(this.route.path) && parts[theSize - 1]) {
          return parts[theSize - 1].charAt(0).toUpperCase() + parts[theSize - 1].slice(1)
        }
      }
    },
    title () {
      console.log(this.componentName)
      if (this.route.path === '/') return 'Home'
      if (this.route.path === '/speaker') return 'Speaker'
      if (this.route.path === '/playback') return 'Playback'
      if (this.route.path === '/settings') return 'Settings'
      return this.componentName ? `${this.componentName}` : 'Stream'
    }
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/tap.less';
@import 'assets/css/domo.css';
body {
  background-color: #fbf9fe;
}
html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.router-view {
  width: 100%;
  top: 46px;
}
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 500ms;
  height: 100%;
  top: 46px;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.menu-title {
  color: #888;
}
</style>
