export default  {
  props: {
    activeStyle: {
      type: Object,
      default: () => ({ color: '#A8D7E7' })
    },
    otherStyle: {
      type: Object,
      default: () => ({ color: "#85e9ff" })
    },
    separator: {
      type: String,
      default: '>'
    }
  },
  methods: {
    createPathNodes(path, h, style = null) {
      const otherNodes = []
      const { $router, $route } = this
      path.forEach((item, index) => {
        otherNodes.push(h('span', { 
          style: { ...style, cursor: "pointer" }, 
          on: {
            click: () => {  
              if ($route.path !== item.path) {
                $router.push(item.path)
              }
            }  
          }  
        }, item.label))
        
        if (index !== path.length - 1) {
          otherNodes.push(h('span', { style }, ` ${this.separator} `))
        }
      })
      return otherNodes;
    }
  },
  render (h) {
    const { address, index  } = this.$route.meta
    const children = []

    const currentNodes = this.createPathNodes(address.slice(0, index + 1), h, this.activeStyle)
    children.push(...currentNodes)

    if (index !== address.length - 1) {
      const otherNodes = this.createPathNodes(address.slice(index + 1), h, this.otherStyle)
      children.push(h('span', { style: this.otherStyle }, ` ${this.separator} `))
      children.push(...otherNodes)
    }

    return h('div', null, children)
  }
}
