<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-tab-item id="4">已完成</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"></wait-get-job>
          </mt-tab-container-item>
          <mt-tab-container-item id="2">
            <wait-confirm-job ref="confirmTab"></wait-confirm-job>
          </mt-tab-container-item>
          <mt-tab-container-item id="3">
            <in-handle-job ref="handleTab"/>
          </mt-tab-container-item>
          <mt-tab-container-item id="4">
            <over-job ref="overTab"/>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
      <tabbottom activeTabItem="JOB"/>
    </div>
  </transition>
</template>

<script>
  import WaitGetJob from './modules/WaitGetJob'
  import WaitConfirmJob from './modules/WaitConfirmJob'
  import InHandleJob from './modules/InHandleJob'
  import OverJob from './modules/OverJob'
  export default {
    name: "JobManage",
    components: {
      WaitGetJob,
      WaitConfirmJob,
      InHandleJob,
      OverJob
    },
    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.confirmTab.loadTop()
      }else if(val=='3'){
        this.$refs.handleTab.loadTop()
      }else if(val=='4'){
        this.$refs.overTab.loadTop()
      }
    },
    watch:{
      selected(val){
        console.log('watch selected val:'+val)
        if(val=='1'){
          this.$refs.waitTab.loadTop()
        }else if(val=='2'){
          this.$refs.confirmTab.loadTop()
        }else if(val=='3'){
          this.$refs.handleTab.loadTop()
        }else if(val=='4'){
          this.$refs.overTab.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>