<template>
  <button
    class="ml-button"
    :class="[className || '', `type-${type}`, size ? `size-${size}` : '', status ? `ss-${status}` : '', {'is-round': round, 'is-underline': underline, 'is-disabled': disabled, 'is-fixed': width || shrink}]"
    :disabled="disabled"
    :open-type="openType"
    :style="styles"
    @getphonenumber="phoneNumberEvent"
    @tap.stop="tapEvent"
    @click="clickEvent">
    <slot>{{ content }}</slot>
  </button>
</template>

<script>
export default {
  name: 'MlButton',
  options: {
    virtualHost: true
  },
  props: {
    content: String,
    status: String,
    round: Boolean,
    type: {
      type: String,
      default: 'button'
    },
    size: String,
    disabled: Boolean,
    underline: Boolean,
    openType: String,
    shrink: Boolean,
    width: String,
    height: String,
    redirect: Boolean,
    url: String,
    className: String
  },
  computed: {
    styles () {
      const wStyle = this.width ? `width:${this.width};` : ''
      const hStyle = this.height ? `height:${this.height};line-height:${this.height};` : ''
      return `${wStyle}${hStyle}`
    }
  },
  methods: {
    tapEvent () {
      if (this.disabled) {
        return
      }
      if (this.url) {
        if (this.redirect) {
          uni.redirectTo({
            url: this.url
          })
        } else {
          uni.navigateTo({
            url: this.url
          })
        }
      }
      this.$emit('tap', {})
      this.$emit('click', {})
    },
    clickEvent () {
    },
    phoneNumberEvent (e) {
      this.$emit('getphonenumber', e)
    }
  }
}
</script>

<style lang="scss">
.ml-button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  // #ifdef H5
  cursor: pointer;
  // #endif
  &.is-fixed {
    flex-shrink: 0;
  }
  &.type-text {
    display: inline;
    border: 0;
    padding: 0 10rpx;
    line-height: 1.5;
    vertical-align: middle;
    background: transparent;
    font-size: $ml-base-font-size;
    &.size-large {
      font-size: 40rpx;
    }
    &.size-medium {
      font-size: 36rpx;
    }
    &.size-small {
      font-size: 28rpx;
    }
    &.size-mini {
      font-size: 24rpx;
    }
    &.is-underline {
      text-decoration: underline;
    }
    &.ss-primary {
      color: $ml-theme-primary-color;
    }
    &.ss-success {
      color: $ml-theme-success-color;
    }
    &.ss-info {
      color: #909399;
    }
    &.ss-warning {
      color: $ml-theme-warning-color;
    }
    &.ss-danger {
      color: $ml-theme-error-color;
    }
    &.ss-gray {
      color: $ml-gray-color;
    }
    &.ss-blue {
      color: $ml-blue-color;
    }
    &.ss-green {
      color: $ml-green-color;
    }
    &.ss-pink {
      color: $ml-pink-color;
    }
    &.ss-red {
      color: $ml-red-color;
    }
    &.ss-orange {
      color: $ml-orange-color;
    }
    &.ss-purple {
      color: $ml-purple-color;
    }
  }
  &.type-button {
    width: 100%;
    padding: 0 30rpx;
    height: 76rpx;
    line-height: 76rpx;
    border: 1px solid #e5e5e5;
    border-radius: $ml-border-radius;
    font-size: 32rpx;
    background: #ffffff;
    &+.ml-button {
      margin-left: $ml-button-interval-margin;
    }
    &.size-large {
      height: 90rpx;
      line-height: 90rpx;
      font-size: 40rpx;
    }
    &.size-medium {
      height: 84rpx;
      line-height: 84rpx;
      font-size: 36rpx;
    }
    &.size-small {
      height: 68rpx;
      line-height: 68rpx;
      font-size: 28rpx;
    }
    &.size-mini {
      height: 60rpx;
      line-height: 60rpx;
      font-size: 24rpx;
    }
    &.ss-primary {
      color: #ffffff;
      background: $ml-theme-primary-color;
      border-color: $ml-theme-primary-color;
    }
    &.ss-success {
      color: #ffffff;
      background: $ml-theme-success-color;
      border-color: $ml-theme-success-color;
    }
    &.ss-info {
      color: #ffffff;
      background: #909399;
      border-color: #909399;
    }
    &.ss-warning {
      color: #ffffff;
      background: $ml-theme-warning-color;
      border-color: $ml-theme-warning-color;
    }
    &.ss-danger {
      color: #ffffff;
      background: $ml-theme-error-color;
      border-color: $ml-theme-error-color;
    }
    &.ss-gray {
      background: $ml-gray-color;
    }
    &.ss-blue {
      color: #ffffff;
      background: $ml-blue-color;
      border-color: $ml-blue-color;
    }
    &.ss-green {
      color: #ffffff;
      background: $ml-green-color;
      border-color: $ml-green-color;
    }
    &.ss-pink {
      color: #ffffff;
      background: $ml-pink-color;
      border-color: $ml-pink-color;
    }
    &.ss-red {
      color: #ffffff;
      background: $ml-red-color;
      border-color: $ml-red-color;
    }
    &.ss-orange {
      color: #ffffff;
      background: $ml-orange-color;
      border-color: $ml-orange-color;
    }
    &.ss-purple {
      color: #ffffff;
      background: $ml-purple-color;
      border-color: $ml-purple-color;
    }
    &.is-round {
      border-radius: 50rpx;
      &.size-medium {
        padding: 0 50rpx;
        border-radius: 60rpx;
      }
      &.size-small {
        padding: 0 40rpx;
        border-radius: 40rpx;
      }
      &.size-mini {
        padding: 0 30rpx;
        border-radius: 30rpx;
      }
    }
  }
  &.is-disabled {
    opacity: 0.5;
    // #ifdef H5
    cursor: no-drop;
    // #endif
  }
}
</style>
