<template>
  <button
    class="up-btn-class up-btn"
    :class="[
      'up-btn-' + size,
      plain ? 'up-' + type + '-outline' : 'up-btn-' + (type || 'primary'),
      getDisabledClass(disabled, type, plain),
      getShapeClass(shape, plain),
      getShadowClass(type, shadow, plain)
    ]"
    :hover-class="getHoverClass(disabled, type, plain)"
    :style="{ width: width, height: height, lineHeight: height, fontSize: size + 'rpx', margin: margin }"
    :loading="loading"
    :open-type="openType"
    @getuserinfo="bindgetuserinfo"
    :disabled="disabled"
    :form-type="formType"
    v-if="!hidden"
    @tap="handleClick"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'fuiButton',
  props: {
    //样式类型 primary, white, danger, warning, green,blue, gray，black, gradual
    type: {
      type: String,
      default: 'gradual',
      default: 'primary'
    },
    //是否加阴影
    shadow: {
      type: Boolean,
      default: false
    },
    // 宽度 rpx或 %
    width: {
      type: String,
      default: '100%'
    },
    //高度 rpx
    height: {
      type: String,
      default: '96rpx'
    },
    //字体大小 rpx
    // block, mini, small
    size: {
      type: [String, Number],
      default: 'block',
      default: 32
    },
    margin: {
      type: String,
      default: '0'
    },
    //形状 circle(圆角), square(默认方形)，rightAngle(平角)
    shape: {
      type: String,
      default: 'square'
    },
    plain: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    //禁用后背景是否为灰色 （非空心button生效）
    disabledGray: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    openType: {
      type: String,
      default: ''
    },
    index: {
      type: [Number, String],
      default: 0
    },
    formType: {
      type: String,
      default: ''
    },
    hidden: {
      type: Boolean,
      default: false
    },
    bottom: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick() {
      if (this.disabled) {
        return false;
      }
      // this.$emit('click', {});
      this.$emit('click', {
        index: Number(this.index)
      });
    },
    bindgetuserinfo({ detail = {} } = {}) {
      this.$emit('getuserinfo', detail);
    },
    getShadowClass(type, shadow, plain) {
      let className = '';
      if (shadow && type != 'white' && !plain) {
        className = 'up-shadow-' + type;
      }
      return className;
    },
    getDisabledClass(disabled, type, plain) {
      let className = '';
      if (disabled && type != 'white' && type != 'gray') {
        className = type == 'gradual' ? 'btn-gradual-disabled' : 'up-dark-disabled';
      }
      if (disabled && type != 'white') {
        let classVal = this.disabledGray ? 'up-gray-disabled' : 'up-dark-disabled';
        className = plain ? 'up-dark-disabled-outline' : classVal;
      }
      return className;
    },
    getShapeClass(shape, plain) {
      let className = '';
      if (shape == 'circle') {
        className = plain ? 'up-outline-fillet' : 'up-fillet';
      } else if (shape == 'rightAngle') {
        className = plain ? 'up-outline-rightAngle' : 'up-rightAngle';
      }
      return className;
    },
    getHoverClass(disabled, type, plain) {
      let className = '';
      if (!disabled) {
        className = plain ? 'up-outline-hover' : 'up-' + (type || 'gradual') + '-hover';
        className = plain ? 'up-outline-hover' : 'up-' + (type || 'primary') + '-hover';
      }
      return className;
    }
  }
};
</script>

<style scoped>
/**
============ 旧的
*/
/* button start*/

.up-btn-block {
  font-size: 36rpx;
  height: 90rpx;
  line-height: 90rpx;
}

.up-btn-white.up-rightAngle::after {
  border-radius: 0;
}

.up-outline-rightAngle::after {
  border-radius: 0;
}

/*渐变 */

.up-btn-gradual {
  background: linear-gradient(-90deg, #5677fc, #5c8dff);
  border-radius: 45rpx;
  color: #fff;
}

.up-btn-gradual-hover {
  color: #d5d4d9 !important;
  background: linear-gradient(-90deg, #4a67d6, #4e77d9);
}

.up-btn-gradual-disabled {
  color: #fafbfc !important;
  border-radius: 45rpx;
  background: linear-gradient(-90deg, #cad8fb, #c9d3fb);
}

/*不同尺寸 */
.up-btn-mini {
  width: auto;
  font-size: 30rpx;
  height: 70rpx;
  line-height: 70rpx;
}

.up-btn-small {
  width: auto;
  font-size: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
}

/* button end*/
/**
============ 旧的
*/
.up-btn-primary {
  background: #5677fc !important;
  color: #fff;
}

.up-shadow-primary {
  box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
}

.up-btn-danger {
  background: #eb0909 !important;
  color: #fff;
}

.up-shadow-danger {
  box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.2);
}

.up-btn-warning {
  background: #ff7900 !important;
  background: #fc872d !important;
  color: #fff;
}

.up-shadow-warning {
  box-shadow: 0 10rpx 14rpx 0 rgba(252, 135, 45, 0.2);
}

.up-btn-green {
  background: #19be6b !important;
  background: #35b06a !important;
  color: #fff;
}

.up-shadow-green {
  box-shadow: 0 10rpx 14rpx 0 rgba(53, 176, 106, 0.2);
}

.up-btn-blue {
  background: #007aff !important;
  color: #fff;
}

.up-shadow-blue {
  box-shadow: 0 10rpx 14rpx 0 rgba(0, 122, 255, 0.2);
}

.up-btn-white {
  background: #fff !important;
  color: #333 !important;
}

.up-btn-gray {
  background: #ededed !important;
  color: #999 !important;
  background: #bfbfbf !important;
  color: #fff !important;
}

.up-btn-black {
  background: #333 !important;
  color: #fff !important;
}

.up-shadow-gray {
  box-shadow: 0 10rpx 14rpx 0 rgba(191, 191, 191, 0.2);
}

.up-btn-red {
  background: #e41f19 !important;
  color: #fff;
}

.up-hover-gray {
  background: #f7f7f9 !important;
}

.up-black-hover {
  background: #555 !important;
  color: #e5e5e5 !important;
}

/* button start*/

.up-btn-old {
  width: 100%;
  position: relative;
  border: 0 !important;
  border-radius: 10rpx;
  display: inline-block;
}

.up-btn {
  width: 100%;
  position: relative;
  border: 0 !important;
  border-radius: 6rpx;
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
}
.up-btn-old::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  left: 0;
  top: 0;
  border-radius: 20rpx;
}
.up-btn::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  transform-origin: 0 0;
  transform: scale(0.5, 0.5) translateZ(0);
  box-sizing: border-box;
  left: 0;
  top: 0;
  border-radius: 12rpx;
  border: 0;
}

.up-btn-white::after {
  border: 1px solid #eaeef1;
  border: 1rpx solid #bfbfbf;
}

.up-white-hover {
  background: #e5e5e5 !important;
  color: #2e2e2e !important;
}

.up-dark-disabled {
  opacity: 0.6 !important;
  color: #fafbfc !important;
}

.up-dark-disabled-outline {
  opacity: 0.5 !important;
}

.up-gray-disabled {
  background: #f3f3f3 !important;
  color: #919191 !important;
  box-shadow: none;
}

.up-outline-hover {
  opacity: 0.5;
}

.up-primary-hover {
  background: #4a67d6 !important;
  color: #e5e5e5 !important;
}

.up-primary-outline::after {
  border: 1px solid #5677fc !important;
  border: 1rpx solid #5677fc !important;
}

.up-primary-outline {
  color: #5677fc !important;
  background: transparent;
}

.up-danger-hover {
  background: #c80808 !important;
  color: #e5e5e5 !important;
}

.up-danger-outline {
  color: #eb0909 !important;
  background: transparent;
}

.up-danger-outline::after {
  border: 1px solid #eb0909 !important;
  border: 1rpx solid #eb0909 !important;
}

.up-warning-hover {
  background: #e56d00 !important;
  background: #d67326 !important;
  color: #e5e5e5 !important;
}

.up-warning-outline {
  color: #ff7900 !important;
  background: none;
  color: #fc872d !important;
  background: transparent;
}

.up-warning-outline::after {
  border: 1px solid #ff7900 !important;
  border: 1px solid #fc872d !important;
}

.up-red-hover {
  background: #c51a15 !important;
  color: #e5e5e5 !important;
}

.up-red-outline {
  color: #e41f19 !important;
  background: none;
}

.up-red-outline::after {
  border: 1px solid #e41f19 !important;
}

.up-green-hover {
  background: #16ab60 !important;
  background: #2d965a !important;
  color: #e5e5e5 !important;
}

.up-green-outline {
  color: #44cf85 !important;
  background: none;
  color: #35b06a !important;
  background: transparent;
}

.up-green-outline::after {
  border: 1px solid #44cf85 !important;
  border: 1rpx solid #35b06a !important;
}

.up-blue-hover {
  background: #0062cc !important;
  color: #e5e5e5 !important;
}

.up-blue-outline {
  color: #007aff !important;
  background: transparent;
}

.up-blue-outline::after {
  border: 1rpx solid #007aff !important;
}

/* #ifndef APP-NVUE */
.up-btn-gradual {
  background: linear-gradient(90deg, rgb(255, 89, 38), rgb(240, 14, 44)) !important;
  color: #fff !important;
}

.up-shadow-gradual {
  box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.15);
}

/* #endif */

.up-gray-hover {
  background: #d5d5d5 !important;
  background: #a3a3a3 !important;
  color: #898989;
}

/* #ifndef APP-NVUE */
.up-gradual-hover {
  background: linear-gradient(90deg, #d74620, #cd1225) !important;
  color: #fff !important;
}

/* #endif */

.up-gray-outline {
  color: #999 !important;
  background: none !important;
  background: transparent !important;
}

.up-white-outline {
  color: #fff !important;
  background: none !important;
  background: transparent !important;
}

.up-black-outline {
  background: transparent !important;
  color: #333 !important;
}

.up-gray-outline::after {
  border: 1px solid #ccc !important;
  border: 1rpx solid #ccc !important;
}

.up-white-outline::after {
  border: 1px solid #fff !important;
}

.up-black-outline::after {
  border: 1px solid #333 !important;
}

/*圆角 */

.up-fillet {
  border-radius: 45rpx;
  border-radius: 50rpx;
}

.up-btn-white.up-fillet::after {
  border-radius: 98rpx;
}
.up-white.up-fillet::after {
  border-radius: 90rpx;
}
.up-outline-fillet::after {
  border-radius: 90rpx;
  border-radius: 98rpx;
}

/*平角*/
.up-rightAngle {
  border-radius: 0;
}

.up-btn-white.up-rightAngle::after {
  border-radius: 0;
}

.up-outline-rightAngle::after {
  border-radius: 0;
}
</style>
