<!--
  @description: 全局公用tabs组件
  @Modifier：肖文龙
  @routerPath:
  @date：  2019/11/5-13:14
-->
<template>
  <el-tabs v-model="activeName" @tab-click="tabClick">
    <el-tab-pane
      v-for="(item,index) in list"
      :key="index"
      :disabled="isOpenAll?!isOpenAll:(index>=active&&!isOpenAll)"
      :label="item.name"
      :name="item.path"
    />
  </el-tabs>
</template>
<script>
// tabs  tab页
export default {
  props: {
    // 在没有保存时，前几active可以点击进行切换
    active: {
      type: Number,
      default: 0
    },
    // 是否开启所有tabs
    isOpenAll: {
      type: Boolean,
      default: true
    },
    list: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 暂存草稿
    save: {
      type: Function,
      default: function() {}
    }
  },
  data() {
    return {
      activeName: ''// 当前索引
    }
  },
  watch: {
    $route(to, from) {
      this.initData()//  取当前索引
    },
    list: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function() {
        this.initData() //  取当前索引
      }
    }
  },
  created() {
    this.initData()//  取当前索引
  },
  methods: {
    // 取当前索引
    initData() {
      this.list.map(item => {
        if (item.path === this.$route.path) {
          this.activeName = this.$route.path // 获取当前路由
        }
      })
    },
    // 控制上一步 下一步跳转页面 子组件传给父组件
    // prev 上一步 next 下一步 或者是数字直接指定展示第几步的页面
    tabPage(page, query) {
      const tabListLen = this.list.length
      let active = 0// 下标
      for (let i = 0; i < tabListLen; i++) {
        if (this.list[i].path === this.activeName && page === 'prev') {
          active = i - 1
          break
        }
        if (this.list[i].path === this.activeName && page === 'next') {
          active = i + 1
          break
        }
      }
      // 如果传入的不是 prev 和 next 就直接赋值 active
      if (page !== 'prev' && page !== 'next') {
        active = page
      }
      // 路由跳转
      this.$router.push({
        path: this.list[active].path,
        query: {
          ...query
        }
      })
    },
    // 切换tab页
    tabClick(tab) {
      if (this.$route.path !== tab.name) {
        this.save('draft')// draft 点击步骤条切换-进行保存草稿
        // 携带参数
        const query = {
          ...this.$route.query
        }
        this.$router.push({ path: tab.name, query: query })
      }
    }
  }
}
</script>
<style lang="less" scoped>

  .div_line {
    width: 100%;
    overflow: hidden;

    .tools {
      min-width: 390px;
    }
  }

  .tab-item, .router-link-exact-active, .router-link-tab {
    box-sizing: border-box !important;
    height: 48px !important;
  }

</style>
