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

<script>
import Vue from 'vue'

export default {
  data () {
    return {
      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('tabs===>**',this.tabs)
      console.log('name====>',name,'****props',props)
      let index = this.tabs.findIndex((v) => (v.indexId==props.compid))
      // 如果标签页存在，且不是激活的页签，给该标签页的路由器设置初始组件
      if (index !== -1 && index !== this.$refs.tabs.active) {
        this.$refs.tabs.active = index
        if(this.tabs[index].route.name != name){
          this.$showMessage('存在未完成操作，请继续进行该操作！')
        }
        this.$refs.tabs.handleTabListClick(index)
        // 通过广播通知路由器，组件变了
        //this.$broadcast('route-init', index, name, props)
      } else {
        // 往tab页添加新页签
        //不存在才加
        if(!this.findId(props.compid)){
          console.log('props==>********',props)
          this.tabs.push({comp: {name, props}, route: {name, title: ''},indexId:props.compid})
          this.$refs.tabs.active = this.tabs.length - 1
        } else {
          console.log('props===>', props)
        }
      }
    },
    // 移除关闭页签(自己添加)
    remove (name) {
      this.deleteTab(name)
    },
    removeAll () {
      this.tabs = []
      this.$refs.tabs.renderData = []
    },

    findId (id) {
      var flag=false
      this.tabs.findIndex((t) => {
        if(t.indexId==id){
          flag=true
        }
      })
      return flag
    },
    deleteTab (name) {
      // 找到当前删除页签的下标
      let index = this.tabs.findIndex((t) => {
        return t.comp.name == name.comp.name&&t.indexId==name.indexId
      })
      this.tabs.splice(index, 1)
      this.$broadcast('delete', index, name)
    },
    flush(val){
      if(val){
        this.$parent.refresh(val)
      }else {
        this.$parent.refresh(0)
      }

    }
  },
  events: {
    'route-tab' (name, props) {
      this.init(name, props)
    },

    // 路由结束处理，保存组件名及标题到激活页签
    'route-end' (name, title, index) {
      if (!index && index !== 0) {
        return
      }
      let tab = this.tabs[index]
      Object.assign(tab.route, {name, title})
    },
    // 自己添加
    'remove-tab' (name,props) {
      // 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>
