<template>
  <ibps-toolbar
    v-if="hasActions"
    ref="frToolbar"
    :actions="actions"
    :more-actions="moreActions"
    icon-prefix="ibps-icon"
    @action-event="handleActionEvent"
  />
</template>
<script>
import IbpsToolbar from '@/components/ibps-toolbar'// 工具栏

export default {
  components: {
    IbpsToolbar
  },
  props: {
    /**
     * @description 工具栏
     */
    buttons: {
      type: Array
    }
  },
  data() {
    return {
      loading: false
    }
  },
  computed: {
    actions() {
      if (this.toolbars.length > 4) {
        return this.toolbars.slice(0, 4)
      } else {
        return this.toolbars
      }
    },
    moreActions() {
      if (this.toolbars.length > 4) {
        return this.toolbars.slice(4, this.toolbars.length)
      } else {
        return null
      }
    },
    toolbars() {
      return this.getActions()
    },
    hasActions() {
      return this.actions && this.actions.length > 0
    }
  },

  methods: {
    getActions() {
      if (this.$utils.isEmpty(this.buttons)) {
        return []
      }

      const actions = []
      this.buttons.forEach((btn, i) => {
        actions.push(btn)
      })
      return actions
    },
    closeMoreAction() {
      this.$refs.frToolbar.closeMoreAction()
    },
    handleButtonEvent(button, position, data, index) {
      const action = this.actions.find((action) => {
        return button.key === action.key
      })
      if (action) {
        action.callback()
      }
    },
    handleActionEvent(actionKey, args = {}) {
      this.$emit('action-event', actionKey, args)
    },
    /**
     * 获取表单验证
     */
    validate(callback) {
      this.validateForm((result) => {
        if (result) { callback(result) }
      })
    },
    // 处理表单提交验证
    formSubmitVerify(callback) {
      callback(true)
    }

  }
}
</script>
