<template>
    <div class="content blue" ref="content">
        <jxHeader
        :title="title"
        @switchColor="switchColor"
        />
        <div class="body-container">
            <div class="main-container">
                <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 {}
  },
  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
.main-container
    _wh(100%, 100%)
</style>
