<template>
  <mu-tooltip :config="{tip: currentConfig.tip}" v-if="currentConfig.tip">
    <el-button :class="['mu-' + currentConfig.size, currentConfig.type ? 'mu-btn-' + currentConfig.type : 'mu-btn' ]"
               :disabled="currentConfig.disabled" :icon="!$slots.default ? currentConfig.icon : ''"
               @click="handleClick" :loading="currentConfig.loading">
      <span v-if="!$slots.default && !!currentConfig.text">{{currentConfig.text}}</span>
      <slot></slot>
    </el-button>
  </mu-tooltip>
  <el-button v-else
             :class="['mu-' + currentConfig.size, currentConfig.type ? 'mu-btn-' + currentConfig.type : 'mu-btn' ]"
             :disabled="currentConfig.disabled" :icon="!$slots.default ? currentConfig.icon : ''"
             @click="handleClick" :loading="currentConfig.loading">
    <span v-if="!$slots.default && !!currentConfig.text">{{currentConfig.text}}</span>
    <slot></slot>
  </el-button>
</template>

<script lang="ts">
  import { Component, Prop, Vue, Emit } from 'vue-property-decorator';

  type Type = 'border' | 'text';
  type Size = 'small' | 'medium' | 'large';

  interface BtnConfig {
    type: Type,
    size?: Size,
    icon?: string,
    text?: string,
    tip?: string,
    disabled?: boolean,
    loading?: boolean,
  }

  @Component({
    name: 'mcBtn'
  })
  export default class extends Vue {
    @Prop({ default: () => [] }) private config!: BtnConfig;
    private defaultConfig: any = {
      size: 'medium'
    };

    // 合并默认数据
    get currentConfig() {
      const result = this.config;
      Object.keys(this.defaultConfig).forEach((key: string) => {
        if (this.config[key] === undefined) result[key] = this.defaultConfig[key];
      });
      return result;
    }

    @Emit('click')
    handleClick(event: any, data: any = {}) {
      data.setDisabled = this.setDisabled;
      data.setLoading = this.setLoading;
    }

    setDisabled(disabled: boolean = true) {
      this.config.disabled = disabled;
    }

    setLoading(isLoading: boolean = true) {
      this.config.loading = isLoading;
    }
  }
</script>

<style lang="scss">
  $colorPrimary: #1878C9;
  $fontDefault: 12px;
  $fontLarge: 14px;
  $colorHover: #3698EA;
  $bgIconDisabled: #D0D0C7;
  $textDisabled: rgba(41, 41, 41, 0.4);
  .mu-btn {
    height: 26px;
    line-height: normal;
    padding: 0 6px;
    text-align: center;
    background: $colorPrimary;
    border-color: $colorPrimary;
    color: #ffffff;
    font-size: $fontDefault;
    display: inline-block;

    i ~ span span {
      padding-left: 4px;
    }

    i {
      font-size: $fontLarge;
    }

    span {
      line-height: 22px;
    }

    &.mu-small {
      height: 22px;
      padding: 0 4px;
    }

    &.mu-large {
      height: 30px;
      padding: 0 8px;
    }

    &.el-button:focus, &.el-button:hover {
      background: $colorPrimary;
      border-color: $colorPrimary;
      color: #ffffff;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    }

    &.el-button:active {
      background: $colorHover;
      border-color: $colorHover;
      color: #ffffff;
    }

    &.el-button.is-disabled, &.el-button.is-disabled:focus, &.el-button.is-disabled:hover {
      color: #ffffff;
      background-color: $bgIconDisabled;
      border-color: $bgIconDisabled
    }

    &.el-button.is-loading:before {
      background: none;
    }
}

.mu-btn-border {
  height: 26px;
  line-height: normal;
  padding: 0 6px;
  text-align: center;
  background: transparent;
  border-color: $colorPrimary;
  color: $colorPrimary;
  font-size: $fontDefault;
  display: inline-block;

  i ~ span span {
    padding-left: 4px;
  }

  i {
    font-size: $fontLarge;
  }

  span {
    line-height: 22px;
  }

  &.mu-small {
    height: 22px;
    line-height: 22px;
    padding: 0 4px;
  }

  &.mu-large {
    height: 30px;
    line-height: 30px;
    padding: 0 8px;
  }

  &.el-button:focus, &.el-button:hover {
    background: transparent;
    border-color: $colorPrimary;
    color: $colorPrimary;
  }

  &.el-button:active {
    background: transparent;
    border-color: $colorHover;
    color: $colorHover;
  }

  &.el-button.is-disabled, &.el-button.is-disabled:focus, &.el-button.is-disabled:hover {
    color: #ffffff;
    background-color: $bgIconDisabled;
    border-color: $bgIconDisabled
  }

  &.el-button.is-loading:before {
    background: none;
  }
}

.mu-btn-text {
  height: 26px;
  line-height: normal;
  padding: 0 6px;
  text-align: center;
  background: transparent;
  border: none;
  color: $colorPrimary;
  font-size: $fontDefault;
  display: inline-block;

  i ~ span span {
    padding-left: 4px;
  }

  i {
    font-size: $fontLarge;
  }

  span {
    line-height: 22px;
  }

  &.mu-small {
    height: 22px;
    line-height: 22px;
    padding: 0 4px;
  }

  &.mu-large {
    height: 30px;
    line-height: 30px;
    padding: 0 8px;
  }

  &.el-button:focus, &.el-button:hover {
    background: transparent;
    border: none;
    color: $colorPrimary;

    span {
      text-decoration: underline;
    }
  }

  &.el-button:active {
    background: transparent;
    border: none;
    color: $colorPrimary;

    span {
      text-decoration: underline;
    }
  }

  &.el-button.is-disabled, &.el-button.is-disabled:focus, &.el-button.is-disabled:hover {
    color: $textDisabled;
    background: transparent;
    border: none;
  }

  &.el-button.is-loading:before {
    background: none;
  }
}
</style>