<template>
  <button
    :type="nativeType"
    class="md-button"
    :class="[
      type,
      inactive ? 'inactive' : 'active',
      inline ? 'inline' : 'block',
      round ? 'round' : '',
      plain ? 'plain' : '',
      size === 'small' ? 'small' : ''
    ]"
    :disabled="inactive || type === 'disabled'"
    v-on="$listeners"
  >
    <div class="md-button-inner">
      <template v-if="loading">
        <md-activity-indicator-rolling class="md-button-loading"></md-activity-indicator-rolling>
      </template>
      <!--新添加图片判断位置-->
      <template v-else-if="icon&&iconAlign=='left'">
        <md-icon :name="icon" :svg="iconSvg"></md-icon>
      </template>
      <div class="md-button-content">
        <slot></slot>
      </div>
      <!--添加右图标-->
      <template v-if="icon&&iconAlign=='right'">
        <md-icon :name="icon" :svg="iconSvg"></md-icon>
      </template>
    </div>
  </button>
</template>

<script>
  import ActivityIndicatorRolling from '../activity-indicator/roller'
  import Icon from '../icon'

  export default {
    name: 'md-button',

    components: {
      [ActivityIndicatorRolling.name]: ActivityIndicatorRolling,
      [Icon.name]: Icon,
    },

    props: {
      type: {
        type: String,
        default: 'default', // default, primary, warning, disabled, link
      },
      nativeType: {
        type: String,
        default: 'button',
      },
      icon: {
        type: String,
        default: '',
      },
      iconSvg: {
        type: Boolean,
        default: false,
      },
      size: {
        type: String,
        default: 'large', // large, small
      },
      plain: {
        type: Boolean,
        default: false,
      },
      round: {
        type: Boolean,
        default: false,
      },
      inline: {
        type: Boolean,
        default: false,
      },
      inactive: {
        type: Boolean,
        default: false,
      },
      loading: {
        type: Boolean,
        default: false,
      },
      iconAlign: { // 迁移属性，自定义添加属性，图标位置
        type: String,
        default: 'left', // left/right
      }
    },
  }

</script>


<style lang="stylus">
  .md-button
    position relative
    display block
    height button-height
    line-height button-height
    font-size button-font-size
    font-weight button-font-weight
    font-family font-family-normal
    text-align center
    border none
    border-radius button-radius
    box-sizing border-box
    outline none
    transition all .3s
    -webkit-appearance none
    -webkit-user-select none
    -webkit-tap-highlight-color transparent
    overflow visible

  .md-button-inner
    display flex
    align-items center
    justify-content center
    width 100%
    height 100%
    overflow hidden
    text-overflow ellipsis
    word-break break-word
    white-space nowrap

  .md-button-loading
    .md-activity-indicator-svg
      width 18px !important
      height 18px !important
      margin-right 5px

  .md-button-content
    display flex
    align-items center
    padding 0 3px

    .md-icon
      padding 0

  .md-button
    position relative

    .md-icon
      display flex
      align-items center
      justify-content center
      padding 0 3px

    // type

    &.default
      background button-default-fill
      color button-default-color
      hairline(all, color-border-element, button-radius, 2px)

      &.active:active
        background button-default-active-fill

      .md-button-loading .md-activity-indicator-svg .circle circle
        stroke button-default-color !important

    &.primary
      background button-primary-fill
      color button-primary-color
      hairline(all, button-primary-fill, button-radius, 2px)

      &.active:active
        background button-primary-active-fill

      .md-button-loading .md-activity-indicator-svg .circle circle
        stroke button-primary-color !important

    &.warning
      background button-warning-fill
      color button-warning-color
      hairline(all, button-warning-fill, button-radius, 2px)

      &.active:active
        background button-warning-active-fill

      .md-button-loading .md-activity-indicator-svg .circle circle
        stroke button-warning-color !important

    &.disabled
      background button-disabled-fill
      color button-disabled-color
      hairline(all, button-disabled-fill, button-radius, 2px)

      .md-button-loading .md-activity-indicator-svg .circle circle
        stroke button-disabled-color !important

    &.plain
      background transparent

      &.default
        color button-default-plain-color
        hairline(all, color-border-element, button-radius, 2px)

        &.active:active
          background button-default-plain-active-fill

        .md-button-loading .md-activity-indicator-svg .circle circle
          stroke button-default-plain-color !important

      &.primary
        color button-primary-plain-color
        hairline(all, button-primary-fill, button-radius, 2px)

        &.active:active
          background button-primary-plain-active-fill

        .md-button-loading .md-activity-indicator-svg .circle circle
          stroke button-primary-plain-color !important

      &.warning
        color button-warning-plain-color
        hairline(all, button-warning-fill, button-radius, 2px)

        &.active:active
          background button-warning-plain-active-fill

        .md-button-loading .md-activity-indicator-svg .circle circle
          stroke button-warning-plain-color !important

      &.disabled
        color button-disabled-plain-color
        hairline(all, color-border-element, button-radius, 2px)

        .md-button-loading .md-activity-indicator-svg .circle circle
          stroke button-disabled-plain-color !important

    &.round
      border-radius button-height

      &:after
        border-radius button-height !important

    &.inline
      display inline-block
      padding 0 h-gap-md

    &.block
      width 100%

    &.small
      height button-small-height
      line-height button-small-height
      font-size button-small-font-size

      &.round
        border-radius button-small-height

        &:after
          border-radius button-small-height

    &.link
      display inline
      width auto
      height auto
      line-height 1
      font-size button-small-font-size
      font-weight font-weight-normal
      color button-primary-fill
      background transparent

      &.inactive
        color color-text-disabled
        opacity 1

    &.inactive
      opacity opacity-disabled

      &.disabled
        opacity 1
</style>
