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

export default {
  components: {
    IbpsToolbar
  },
  props: {
    /**
     * @description 工具栏
     */
    buttons: {
      type: Array
    },
    validateForm: Function,
    onLoadActions: Function,
    beforeScript: Function,
    afterScript: Function
  },
  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() {
      // this.hasStepButton ||
      return this.actions && this.actions.length > 0
    }
  },

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

      const actions = []
      this.buttons.forEach((btn, i) => {
        const key = btn.getAlias()
        let disabled = false
        let hidden = false
        // if (btn.getAlias() !== 'close' && this.hasStepButton && !this.finishStep) {
        //   disabled = true
        // }

        hidden = this._onLoadActions(key, btn, 'hidden', hidden)
        disabled = this._onLoadActions(key, btn, 'disabled', disabled)

        const button = {
          key: key,
          name: btn.getLabel(),
          icon: btn.getIcon(),
          type: btn.getStyle(),
          plain: btn.getPlain(),
          disabled: disabled,
          hidden: hidden,
          callback: () => {
            if (i >= 4) {
              this.closeMoreAction()
            }
            // 前置事件
            this._beforeScript(btn.getAlias(), (result) => {
              if (result) {
                return btn.action.apply(this, [btn])
              }
            })
          }
        }
        actions.push(button)
      })
      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)
    },
    // 自定义按钮数据事件
    _onLoadActions: function(key, button, type, defaultVal) {
      if (!this.onLoadActions) {
        return defaultVal
      }
      const buttonActionResult = this.onLoadActions(key, button, type)
      if (typeof (buttonActionResult) !== 'undefined' && buttonActionResult) {
        return true
      }
      return defaultVal
    },
    // 前置脚本
    _beforeScript(action, callback) {
      if (!this.beforeScript) {
        return callback(true)
      }
      this.beforeScript(action, callback)
    },
    // 后置脚本
    _afterScript(action, params, callback) {
      if (!this.afterScript) {
        return callback(true)
      }
      this.afterScript(action, params, callback)
    }
  }
}
</script>
