<template>
  <div
    :class="btnClass"
    class="btn"
    @click.stop="onButtonClick"
    :style="btnStyle"
    data-weiling-mobile-ui-wl-button
  >
    {{ text }}
    <slot></slot>
  </div>
</template>

<script lang="ts">
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2023-09-08 17:33:41
 */
export default {
  name: "WlButton",
};
</script>

<script setup lang="ts">
import { onDebounce } from "@mobileUI/utils";
import { computed } from "vue";
interface Props {
  text?: string;
  disabled?: boolean;
  type?: "default" | "primary" | "warning" | "danger";
  size?: "large" | "normal" | "small" | "mini";
  shape?: "default" | "circle" | "round";
  styleExtra?: object;
  plain?: boolean;
  color?: string;
}
const props = withDefaults(defineProps<Props>(), {
  text: "",
  disabled: false,
  type: "primary",
  size: "normal",
  shape: "default",
  styleExtra: null,
  plain: false,
  color: "",
});

const emit = defineEmits<{
  (e: "onClick");
}>();

const btnClass = computed(() => {
  return {
    [`btn-plain-${props.type}`]: props.plain,
    [`btn-type-${props.type}`]: !props.plain,
    [`btn-shape-${props.shape}`]: true,
    [`btn-size-${props.size}`]: true,
    disabled: props.disabled,
  };
});

const btnStyle = computed(() => {
  let colorStyle = {};
  if (props.plain && props.color) {
    colorStyle = {
      "border-color": props.color,
      color: props.color,
    };
  } else if (!props.plain && props.color) {
    colorStyle = {
      "background-color": props.color,
      "border-color": props.color,
    };
  }
  return {
    ...props.styleExtra,
    ...colorStyle,
  };
});

const onButtonClick = onDebounce(() => {
  if (props.disabled) return;
  emit("onClick");
}, 500);
</script>

<style lang="scss">
.btn[data-weiling-mobile-ui-wl-button] {
  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: var(--wl-text-color-secondary-2);
    border: j(1) solid #eeeeee;
  }

  &:not(.disabled) {
    @include btnClick();
  }

  &.btn-size {
    &-large {
      padding: j(10) j(14);
      font-size: j(14);
      border-radius: j(6);
    }

    &-normal {
      padding: j(10) 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;
    }
  }

  &.btn-type {
    &-primary {
      background-color: var(--wl-primary-color);
      border: j(1) solid var(--wl-primary-color);
    }

    &-warning {
      background-color: #e6a23c;
      border: j(1) solid #e6a23c;
    }

    &-danger {
      background-color: #f56c6c;
      border: j(1) solid #f56c6c;
    }

    &-success {
      background-color: #67c23a;
      border: j(1) solid #67c23a;
    }

    &-info {
      background-color: #909399;
      border: j(1) solid #909399;
    }

    &-default {
      background-color: white;
      border: j(1) solid #dcdfe6;
      color: #606266;
    }

    &-link {
      color: var(--wl-primary-color);
    }

    &-text {
      color: #606266;
    }
  }

  &.btn-plain {
    &-primary {
      color: var(--wl-primary-color);
      border: j(1) solid var(--wl-primary-color);
    }

    &-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 var(--wl-line-color-light);
    }

    &-default {
      background-color: white;
      border: j(1) solid #dcdfe6;
      color: #dcdfe6;
    }
  }

  &.btn-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);
    }
  }
}
</style>
