<!--
  @name: 按钮
  @description: -
  @author 张文
  @date: 2022-01-12
-->
<template>
  <button
    ref="tyButton"
    :type="nativeType"
    :class="[
      'ty-button',
      'ty-global-click-style',
      `ty-button-${type}`,
      mini?'ty-mini-button':'',
      round?'ty-button-round':'',
      disabled?'ty-button-disabled':'',
      plain?`ty-button-plain-${type}`:'',
      autoBlurClass
    ]"
    :style="[
      block?{display:'block',width:'100%',marginLeft:'0'}:{},
      color?{background:color,border:'none'}:{}
    ]"
    :disabled="disabled"
    @click="click"
  >
    <slot></slot>
  </button>
</template>

<script>

export default {
  name: "tyButton",
  props: {
    // 按钮类型 main、normal、last
    type: {
      type: String,
      default: 'main'
    },
    // 是否是mini按钮
    mini: {
      type: Boolean,
      default: false
    },
    // 是否是圆角按钮
    round: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否点击后立刻失焦
    autoBlur: {
      type: Boolean,
      default: true
    },
    // 是否是块级元素
    block: {
      type: Boolean,
      default: false
    },
    // 是否是朴素按钮
    plain: {
      type: Boolean,
      default: false
    },
    // 自定义按钮颜色
    color: String,
    // 原生的type属性
    nativeType: String
  },
  data() {
    return {
      autoBlurClass:''
    }
  },
  methods: {
    // 按钮被点击
    click(ev) {
      if (this.autoBlur) {
        this.$refs.tyButton.blur()

        // 用于解决自动失焦后没有点击效果的问题
        this.autoBlurClass = 'ty-button-auto-blur-action'
        setTimeout(()=>{
          this.autoBlurClass = ''
        },200)
      }
      this.$emit('click', ev)
    }
  }
}
</script>

<style lang="less" scoped>

@import "../../assets/css/var.less";

// 常规按钮
.ty-button {
  border-radius: 4px;
  font-weight: 400;
  padding: 0 10px;
  border: none;
  transition: opacity 0.2s;
  position: relative;
  min-height: 30px;
  font-size: 14px;

  &+.ty-button{
    margin-left: 5px;
  }
}

// 自动失焦后的点击动画
.ty-button-auto-blur-action:before{
  opacity: 0.1;
}

// mini按钮
.ty-mini-button{
  min-height: 20px;
  font-size: 12px;
}

// 圆角样式
.ty-button-round {
  border-radius: 999px;
}

// 主要按钮样式
.ty-button-main {
  background: @mainButtonBackgroundColor;
  color: @mainButtonFontColor;
  border: 1px solid @mainButtonBackgroundColor;
}

// 主要按钮朴素样式
.ty-button-plain-main {
  background: #fff;
  color: @baseColor;
  border: 1px solid @baseColor;
}

// 正常按钮样式
.ty-button-normal {
  background: @normalButtonBackgroundColor;
  color: @normalButtonFontColor;
  border: 1px solid @normalButtonBackgroundColor;
}

// 正常按钮朴素样式
.ty-button-plain-normal {
  background: #fff;
  color: @normalButtonBackgroundColor;
}

// 次要按钮样式
.ty-button-last {
  background: @lastButtonBackgroundColor;
  color: @lastButtonFontColor;
  border: 1px solid @lastButtonBackgroundColor;
}

// 次要按钮朴素样式
.ty-button-plain-last {
  background: #fff;
  color: @lastButtonBackgroundColor;
}

// 禁用
.ty-button-disabled{
  cursor: no-drop;
  opacity: 0.5;
}


</style>
