<template>
  <el-button
    class="ui-button"
    :class="[{'is-link': link, 'is-block': block}]"
    v-bind="$props"
    :loading="innerLoading"
    @click="handleClick"
  >
    <template v-if="!innerLoading">
      <ui-icon class="ui-button__icon" v-if="icon" :name="icon"></ui-icon>
    </template>
    <slot></slot>
  </el-button>
</template>
<script>
import ElButton from 'element-ui/lib/button'
import 'element-ui/lib/theme-chalk/button.css'
import { getClosestPopup } from './utils'
import UiIcon from '@huntianning/components/packages/icon'

export default {
  name: 'UiButton',
  inject: {
    UiToolbar: {
      default: null
    }
  },
  components: {
    UiIcon,
    ElButton
  },
  props: Object.assign({}, ElButton.props, {
    link: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String
    },
    click: {
      type: Function
    },
    block: {
      type: Boolean,
      default: false
    }
  }),
  data() {
    return {
      innerLoading: this.loading
    }
  },
  watch: {
    loading() {
      this.innerLoading = this.loading
    }
  },
  methods: {
    closeDialog() {
      if (this.$parent.$options.name === 'UiToolbar') {
        const popup = getClosestPopup(this)
        if (popup && this.UiToolbar && this.UiToolbar.bindClose) {
          popup.close()
        }
      }
    },
    handleClick(evt) {
      if (this.innerLoading) {
        return
      }
      if (typeof this.click === 'function') {
        const rs = this.click()
        if (rs && rs.then) {
          this.innerLoading = true
          rs.then(() => {
            this.innerLoading = false
            this.closeDialog()
          }, () => {
            this.innerLoading = false
          })
        } else {
          this.closeDialog()
        }
      } else {
        this.closeDialog()
      }
      this.$emit('click', evt)
    }
  }
}
</script>
<style lang="less">
.ui-button {
  &.is-block {
    width: 100%;
    box-sizing: border-box;
  }
  &.el-button.el-button--primary{
    &:not(.is-disabled) {
      &:not(.is-link) {
        background-color: #202D40;
        border-color: #202D40;
        &.el-button.el-button--primary:hover{
          background-color: #141d2a;
          border-color: #141d2a;
        }
      }
    }
    &.is-disabled {
      &:not(.is-link) {
        background-color: #b0b4ba;
        border-color: #b0b4ba;
        &.el-button.el-button--primary:hover{
          background-color: #b0b4ba;
          border-color: #b0b4ba;
        }
      }
    }
  }
  &.el-button.el-button--small{
    font-size: 14px;
    font-weight: normal;
  }
  &.el-button{
    font-weight: normal;
    &.is-link{
      padding-left: 0;
      padding-right: 0;
      border-color: transparent;
      background-color: transparent;
      &:hover {
        border-color: transparent;
        background-color: transparent;
      }
      &.el-button--primary{
        color: #409EFF;
      }
      &.el-button--danger{
        color: #F91B22;
      }
      &.el-button--success{
        color: #7ebf4a;
      }
      &.el-button--info{
        color: #919399;
      }
      &.el-button--warning{
        color: #dba54a;
      }
    }
  }
  &.el-button--mini{
    font-size: 14px;
  }
  &.el-button--large {
    padding-top: 12px;
    padding-bottom: 12px;
    height: 54px;
  }
}
</style>
