<template>
  <div :class="btnClass" class="btn" @click.stop="onDebounceSave" :style="btnStyle">
    <i class="'iconfont'" :class="icon"></i>
    {{ text }}
    <slot />
  </div>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: yangxin
 * @Last Modified time: 2022-07-21 19:58:27
 */
import { onDebounce } from "@packages/utils/index.js";
export default {
  name: "WlButton",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    text: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "primary",
    },
    size: {
      type: String,
      default: "default",
    },
    shape: {
      type: String,
      default: "default",
    },
    icon: {
      type: String,
      default: "",
    },
    styleExtra: {
      type: Object,
      default: () => {},
    },
    plain: {
      type: Boolean,
      default: false,
    },
    round: {
      type: Boolean,
      default: false,
    },
    url: {
      type: String,
      default: "",
    },
    to: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "",
    },
    needDebounce: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    btnClass() {
      return {
        [`btn-plain-${this.type}`]: this.plain,
        [`btn-type-${this.type}`]: !this.plain,
        [`btn-shape-${this.shape}`]: true,
        [`btn-size-${this.size}`]: true,
        "btn-round": this.round,
        disabled: this.disabled,
      };
    },
    btnStyle() {
      let colorStyle = {};
      if (this.plain && this.color) {
        colorStyle = {
          "border-color": this.color,
          color: this.color,
        };
      } else if (!this.plain && this.color) {
        colorStyle = {
          "background-color": this.color,
          "border-color": this.color,
        };
      }
      return {
        ...this.styleExtra,
        ...colorStyle,
      };
    },
  },
  methods: {
    callback() {
      if (this.disabled) return;
      if (this.url) {
        window.location.href = this.url;
      } else if (this.to) {
        this.$router.push(this.to);
      } else {
        this.$emit("onClick");
      }
    },
    onButtonClick: onDebounce(
      function() {
        this.callback();
      },
      500,
      true
    ),
    onDebounceSave() {
      if (this.needDebounce) {
        this.onButtonClick();
      } else {
        this.callback();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  color: #fff;
  padding: j(13) 0;
  font-size: j(16);
  font-weight: 500;
  font-size: j(14);
  cursor: pointer;
  border-radius: j(10);
  box-sizing: border-box;
  @extend %flex-middle-center;
  &.disabled {
    background-color: #e3e3e3 !important;
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6;
    color: #989898;
    border: j(1) solid #eeeeee;
  }
  &:not(.disabled) {
    @include btnClick();
  }
  &-size {
    &-large {
      padding: j(10) j(14);
      font-size: j(14);
      border-radius: j(6);
    }
    &-default {
      padding: j(8) j(12);
      border-radius: j(4);
    }
    &-small {
      padding: j(6) j(10);
      font-size: j(12);
      border-radius: j(4);
      display: inline-flex;
      align-items: center;
      align-content: center;
    }
    &-mini {
      padding: j(4) j(6);
      font-size: j(10);
      border-radius: j(4);
      display: inline-flex;
      align-items: center;
      align-content: center;
    }
  }
  &-type {
    &-primary {
      background-color: #1c9fff;
    }
    &-warning {
      background-color: #e6a23c;
    }
    &-danger {
      background-color: #f56c6c;
    }
    &-success {
      background-color: #67c23a;
    }
    &-info {
      background-color: #909399;
    }
    &-default {
      background-color: white;
      border: j(1) solid #dcdfe6;
      color: #606266;
    }
    &-link {
      color: #1c9fff;
    }
    &-text {
      color: #606266;
    }
  }
  &-plain {
    &-primary {
      color: #1c9fff;
      border: j(1) solid #1c9fff;
    }
    &-warning {
      color: #e6a23c;
      border: j(1) solid #e6a23c;
    }
    &-danger {
      color: #f56c6c;
      border: j(1) solid #f56c6c;
    }
    &-success {
      color: #67c23a;
      border: j(1) solid #67c23a;
    }
    &-info {
      color: #909399;
      border: j(1) solid #909399;
    }
    &-default {
      background-color: white;
      border: j(1) solid #dcdfe6;
      color: #dcdfe6;
    }
  }
  &-shape {
    &-default {
      border-radius: j(6);
    }
    &-circle {
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      align-content: center;
      width: j(36);
      height: j(36);
      padding: 0;
    }
    &-round {
      border-radius: j(100);
    }
  }
}
a {
  text-decoration: none;
  color: #1c9fff;
  &:link,
  &:visited,
  &:hover,
  &:active {
    color: #1c9fff;
  }
}
</style>
