<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="计划执行" name="Plan"></el-tab-pane>
      <el-tab-pane label="过程跟踪" name="Track"></el-tab-pane>
      <el-tab-pane label="产出实绩" name="Quality"></el-tab-pane>
      <el-tab-pane label="停机明细" name="Stop"></el-tab-pane>
      <el-tab-pane label="实绩报表" name="PdoAnalysis"></el-tab-pane>
      <el-tab-pane label="停机报表" name="StopAnalysis"></el-tab-pane>
      <!-- <el-tab-pane label="换辊报表" name="RollerAnalysis"></el-tab-pane> -->
    </el-tabs> 

    <keep-alive> 
      <div v-if="ready" class="app-container">
        <component :is="activeName" :baseURL="baseURL" />
      </div> 
    </keep-alive>  
  </div>
</template> 
 
<script>
import { getConfigKey } from '@/api/system/config'
import Plan from './panels/plan/index.vue'
import Track from './panels/track/index.vue'
import Quality from './panels/quality/index.vue'
import Stop from './panels/stop/index.vue'
import PdoAnalysis from './panels/analysis/pdo.vue'
import StopAnalysis from './panels/analysis/stop.vue'
import RollerAnalysis from './panels/analysis/roller.vue'

  export default {
    name: 'Lines',
    components: {
      Plan,
      Track,
      Quality,
      Stop,
      PdoAnalysis,
      StopAnalysis,
      RollerAnalysis
    },
    data() {
      return {
        activeName: 'Plan',
        baseURL: '',
        ready: false
      }
    },
    created() {
      // 获取路由地址的最后一项
      const route = this.$route.path.split('/').pop()
      getConfigKey(`line.${route}.baseURL`).then(res => {
        this.baseURL = res.msg
        this.ready = true
      }) 
    }
  }
</script>

<style>

</style>