<template>
    <div class="content blue" ref="content">
        <jxHeader
        :title="title"
        @switchColor="switchColor"
        />
        <div class="body-container">
            <div class="main-container">
                <router-view></router-view>
            </div>
        </div>
    </div>
    </template>

<script>
import jxHeader from '@components/header.vue'
export default {
  components: {
    jxHeader
  },
  data () {
    return {}
  },
  computed: {
    title () {
      let res = ['半成品入库', '半成品入库查询', '半成品出库', '半成品出库查询', '半成品盘点', '半成品盘点查询', '半成品拼盘查询', '物料查询'][Number(this.$route.meta.guidePath) - 1]
      return res
    }
  },
  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>
