<script>
export default {
  name: 'SyButtonContainer',
  props: {
    buttons: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    trigger() {
      return this.$parent.trigger
    },
    num() {
      return this.$parent.num
    }
  },
  render(h) {
    let contents = []
    if (this.buttons.length < this.num) {
      contents = this.buttons.map((btn) => {
        return btn.$slots.default
      })
    } else {
      const idx = this.num - 1
      const preBtns = this.buttons.slice(0, idx).map((btn) => btn.$slots.default)
      const moreBtns = this.buttons.slice(idx).map((btn) => {
        const slotDefault = btn.$slots.default
        const elBtn = slotDefault[0].componentOptions.children[0]
        const listenersFn = slotDefault[0].componentOptions.listeners.click
        const icon = slotDefault[0].componentOptions.propsData.icon || ''
        const text = elBtn.text
        return h(
          'el-dropdown-item',
          {
            props: { icon },
            nativeOn: {
              click: listenersFn
            }
          },
          [text]
        )
      })
      const moreDiv = h('div', { class: 'sy-button-dots' }, [h('i', { class: 'el-icon-more' })])
      const dropDown = h(
        'el-dropdown',
        {
          props: { trigger: this.trigger, size: 'mini', placement: 'bottom-end' }
        },
        [moreDiv, h('el-dropdown-menu', { slot: 'dropdown' }, moreBtns)]
      )
      contents = [...preBtns, dropDown]
    }

    return h(
      'div',
      {
        class: 'sy-buttons'
      },
      contents
    )
  }
}
</script>

<style lang="scss" scoped>
.sy-buttons {
  display: flex;
  align-items: center;
}

.sy-button-dots {
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: #EFF5FB;
  border-radius: 4px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover{
    background: #E6EFF8;
  }
  .el-icon-more{
    color: #037AFF;
  }
}
</style>
