<template>
  <div>
    <tabset v-ref:tabs>
      <tab v-for='tab of tabs' :header='tab.route.title'>
        <route :comp='tab.comp' :index='$index'></route>
      </tab>
    </tabset>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  data () {
    return {
      // 数据格式：{comp: {name, props}, route: {name, title}}
      // - comp: 给路由器传递初始组件的对象
      // - route: 路由器返回回来的，当前路由到的对象
      tabs: [],
    }
  },
  props: ['comps', 'name','selecttab'],
  ready () {
    // 把初始组件放到tab中
    for (let comp of this.comps) {
      this.tabs.push({comp: comp, route: {name: comp.name, title: ''}})
    }
    // 获取全局注册名，放到vue里注册
    if (this.name) {
      // 第一次注册，产生注册用的容器
      if (!Vue.routes) {
        Vue.routes = {}
      }
      Vue.routes[this.name] = this
    }
  },
  methods: {
    // 从外面路由进来
    init (name, props) {
      console.log('this.tabs....', this.tabs, name, props)
      let index = this.tabs.findIndex((v) => v.route.name === name&&(v.comp.props.compid==props.compid))
      // 如果标签页存在，且不是激活的页签，给该标签页的路由器设置初始组件
      if (index !== -1 && index !== this.$refs.tabs.active) {
        this.$refs.tabs.active = index
        // 通过广播通知路由器，组件变了
        this.$broadcast('route-init', index, name, props)
      } else {
        // 往tab页添加新页签
        this.tabs.push({comp: {name, props}, route: {name, title: ''}})
        this.$refs.tabs.active = this.tabs.length - 1
      }
    },
    // 移除关闭页签(自己添加)
    remove (name) {
      // console.log('dynamic remove --->', name)
      this.deleteTab(name)
      // let index = this.tabs.findIndex((v) => v.route.name === name)
      // // 如果标签不存在，不动作，几乎不可能发生
      // if (index === -1) {
      //   this.$refs.tabs.active = index
      //   // 通过广播通知路由器，组件变了
      //   this.$broadcast('route-init', index, name, props)
      // } else {
      //   // 往tab页添加新页签
      //   // this.tabs.push({comp: {name, props}, route: {name, title: ''}})
      //   this.deleteTab(name)
      //   this.$refs.tabs.active = this.tabs.length - 1
      // }
    },
    deleteTab (name) {
      // 找到当前删除页签的下标
      let index = this.tabs.findIndex((t) => {
        // console.log(JSON.stringify('t-->', t))
        return t.comp.name === name
      })
      // console.log('要删除的下标为： ', index)
      this.tabs.splice(index, 1)
      this.$broadcast('delete', index, name)
    }
  },
  events: {
    'route-tab' (name, props) {
      this.init(name, props)
    },
    // 路由结束处理，保存组件名及标题到激活页签
    'route-end' (name, title, index) {
      // let tab = this.tabs[this.$refs.tabs.active]
      if (!index && index !== 0) {
        return
      }
      // console.log('end: ' + index)
      let tab = this.tabs[index]
      Object.assign(tab.route, {name, title})
    },
    // 自己添加
    'remove-tab' (name) {
      // console.log('dynamic-->', name)
      this.remove(name)
    }
  },
  watch:{
    'tabs.length'(){
        this.$emit('tabscg',this.tabs)
    },
    'selecttab'(val){
      let index = 0
      for(let i = 0;i< this.tabs.length; i++){
        if(this.tabs[i].comp.name == val){
          index = i
          break
        }
      }
      this.$refs.tabs.active = index
    }
  }
}
</script>
