<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-navbar>
        <!-- tab-container -->
        <mt-tab-container v-model="selected" swipeable>
          <mt-tab-container-item id="1">
            <overtime-get-job ref="waitTab"></overtime-get-job>
          </mt-tab-container-item>
          <mt-tab-container-item id="2">
            <overtime-handle ref="confirmTab"></overtime-handle>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
      <tabbottom activeTabItem="JOB"/>
    </div>
  </transition>
</template>

<script>
  import OvertimeGetJob from './modules/OvertimeGetJob'
  import OvertimeHandle from './modules/OvertimeHandle'
  let isFromDetail = false
  export default {
    name: "OvertimeJobManage",
    components: {
      OvertimeGetJob,
      OvertimeHandle
    },
    data() {
      return {
        selected: '1'
      }
    },
    beforeRouteEnter(to, from, next) {
      if (from.name) {
        if (from.name.indexOf('jobDetail') === -1) {
          isFromDetail = false
        } else {
          isFromDetail = true
        }
      } else {
        isFromDetail = false
      }
      next()
    },
    created(){
      // 刷新对应的Tab
      const currentTab = this.selected
      if(currentTab=='1'){
        this.$refs.waitTab.loadTop()
      }else if(currentTab=='2'){
        this.$refs.confirmTab.loadTop()
      }
    },
    activated(){
      if (isFromDetail) { // 来自详情页面
        // 如果refresh为true，刷新页面，否则不动
        if(this.$route.query && this.$route.query.refresh){
          const currentTab = this.selected
          // 刷新对应的tab
          if(currentTab=='1'){
            this.$refs.waitTab.loadTop()
          }else if(currentTab=='2'){
            this.$refs.confirmTab.loadTop()
          }
        }else{ // 否则置为原位
          this.$refs.wrapper.scrollTop = this.$store.getters.pageYOffset;
        }
      }else{// 否则需要刷新当前页面
        if(this.$route.query && this.$route.query.tab){
          this.selected = this.$route.query.tab
        }
        const currentTab = this.selected
        if(currentTab=='1'){
          this.$refs.waitTab.loadTop()
        }else if(currentTab=='2'){
          this.$refs.confirmTab.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()
        }
      }
    }
  }
</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>