<template>
   <div class="system-task">
        <div class="header-tabs">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="实时进度" name="0">
              <component :is='components' v-bind="$attrs" v-if="activeName == 0" :review="review" :tableHeight="height"></component>
            </el-tab-pane>
            <el-tab-pane label="任务列表" name="1">
              <component :is='components' v-bind="$attrs" v-if="activeName == 1" :review="review" :tableHeight="height"></component>
            </el-tab-pane>
          </el-tabs>
          
        </div>
        
  </div>
</template>

<script>
import realTime from './components/realTime.vue';
import taskList from './components/todoList.vue';
export default {
  components: {
    realTime,
    taskList
  },
  props: {},
  data() {
    return {
        activeName:0,
        components:'realTime',
        height:null,
        review:false
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.getHeight()
  },
  methods: {
    getQueueList(){
      this.review = true
      this.$nextTick(()=>{
        this.review = false
      })
    },
    getHeight(){
      this.height = document.getElementsByClassName('el-main')[0].clientHeight
    },
    handleClick(){
      var components= {
        0:'realTime',
        1:'taskList'
      }
      this.components = components[this.activeName]
      // console.log(this.activeName)
    },
  },
};
</script>
<style lang="scss" scoped>
.system-task {
  height: 100%;
  background: #fff;
  padding: 10px;
  .header-tabs {
    // position: absolute;
    // bottom: 0;
    height: 100%;
    padding-right: 9px;
    // left: 12px;
    // .el-tabs {
    //   margin-top: 19px;
    // }
    .el-tabs__header {
      margin-bottom: 0 !important;
    }
  }
 
}

</style>