<template>
    <div class="content blue" ref="content">
        <jxHeader
        :title="title"
        @switchColor="switchColor"
        />
        <div class="body-container">
          <div v-show="$route.meta.guidePath !== '4'" class="tabs_wrap">
              <ul class="tabs">
                  <li v-for="i in menus" :key="i.index">
                      <router-link :to="i.router" :class="{'router-link-active': i.router === $route.path}">{{i.label}}</router-link>
                  </li>
              </ul>
          </div>
          <div class="main-container" :style="$route.meta.guidePath !== '4' ? 'height: calc(100% - 44px)' : 'height: 100%'">
              <keep-alive :include="keepAlive" >
                <router-view/>
              </keep-alive>
          </div>
        </div>
    </div>
    </template>

<script>
import { mapGetters } from 'vuex'
import jxHeader from '@components/header.vue'
export default {
  components: {
    jxHeader
  },
  data () {
    return {
      menus: [
        {
          label: '清洗上料',
          router: '/cleaningloading'
        },
        {
          label: '清洗下料',
          router: '/cleaningcutting'
        },
        {
          label: '人工倒料',
          router: '/manpour'
        }
      ]
    }
  },
  computed: {
    title () {
      let res = ['清洗上料', '清洗下料', '人工倒料', '选择物料'][Number(this.$route.meta.guidePath) - 1]
      return res
    },
    ...mapGetters(['keepAlive'])
  },
  methods: {
    switchColor (type) {
      switch (type) {
        case 1:
          this.$refs.content.classList.value = 'content overall_orange'
          break
        case 2:
          this.$refs.content.classList.value = 'content overall_lightgreen'
          break
        case 3:
          this.$refs.content.classList.value = 'content overall_blue'
          break
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin.styl'
.content
    _wh(100%, 100vh)
.body-container
    _wh(calc(100% - 30px), calc(100% - 55px))
    margin 0 auto 10px
    padding 5px
    border 1px solid #484cce
.tabs_wrap
    height 34px
    margin-bottom 10px
.tabs
  height 34px
  li
    float left
    line-height 32px
    text-align center
    padding-right 10px
    a
      display inline-block
      color #fff
      width 100%
      padding 0 10px
      font-size 14px
      border-bottom 1px solid #2aa6f9
    .router-link-active
        background linear-gradient(#0de0ff 0%,#2aa6f9 100%)
        border-top-left-radius 12px
        border-top-right-radius 12px
.main-container
  width 100%
</style>
