<template>
  <transition name="slide">
    <div class="index-container">
      <!--标题-->
      <mt-header class="header" title="工单管理" fixed>
      </mt-header>
      <!--列表主体-->
      <div class="listbody">
        <mt-navbar v-model="selected" fixed>
          <mt-tab-item id="1">待处理</mt-tab-item>
          <mt-tab-item id="2">已完成</mt-tab-item>
          <mt-tab-item id="3">全部</mt-tab-item>
        </mt-navbar>
        <!-- tab-container -->
        <mt-tab-container v-model="selected" swipeable>
          <mt-tab-container-item id="1">
            <wait-get-job ref="waitTab"/>
          </mt-tab-container-item>
          <mt-tab-container-item id="2">
            <over-job ref="overTab"/>
          </mt-tab-container-item>
          <mt-tab-container-item id="3">
            <all-job ref="AllJob"/>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
      <tabbottom activeTabItem="JOB"/>
    </div>
  </transition>
</template>

<script>
  import WaitGetJob from './modules/WaitGetJob'
  import OverJob from './modules/OverJob'
  import AllJob from './modules/AllJob'
  import { appSpApi } from '@/api/special'
  export default {
    name: "JobManage",
    components: {
      WaitGetJob,
      OverJob,
      AllJob
    },
    data() {
      return {
        selected: '1'
      }
    },
    activated(){
      console.log('activated JobManage')
      if(this.$route.query && this.$route.query.tab){
        this.selected = this.$route.query.tab
      }
      const val = this.selected
      if(val=='1'){
        this.$refs.waitTab.loadTop()
      }else if(val=='2'){
        this.$refs.overTab.loadTop()
      }else if(val=='3'){
        this.$refs.allTab.loadTop()
      }
    },
    watch:{
      selected(val){
        console.log('watch selected val:'+val)
        if(val=='1'){
          this.$refs.waitTab.loadTop()
        }else if(val=='2'){
          this.$refs.overTab.loadTop()
        }else if(val=='3'){
          this.$refs.allTab.loadTop()
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .index-container {
    .listbody {
      margin-top 40px
      margin-bottom 50px
      .mint-navbar .mint-tab-item {
        font-size: 0.9rem
      }
    }
    .mint-tab-container-item {
      background-color #f0f0f0
      min-height: calc(100vh - 136px)
    }
  }

</style>