<template>
    <div :class="buttonClass">
      <div v-if="disabled" class="cyber-button-disable-wrapper" style="cursor: not-allowed" @click.stop="(e) => e"></div>
      <button v-bind="buttonAttrs">
        <div class="cyber-button-wrapper">
          <div class="cyber-button-prefix">
            <slot name="prefix"></slot>
          </div>
  
          <div>
            <!-- <span class="loading-icon show">
              <svg-icon icon-class="loading1" style="color: red"></svg-icon>
            </span> -->
            <slot></slot>
          </div>
          <div class="cyber-button-suffix">
            <slot name="suffix"></slot>
          </div>
        </div>
      </button>
    </div>
  </template>
  
  <script lang="ts">
  import { computed, defineComponent } from "vue";
  import SvgIcon from "../../svg-icon";

  const ButtonTypes = ["default", "normal", "danger", "primary", "text", "error", "success", "warning"];
  const ButtonSizes = ["default", "large", "small"];
  export default defineComponent({
    props: {
      type: {
        type: String,
        validate(v: string) {
          return ButtonTypes.includes(v.trim());
        },
        default: () => ButtonTypes[0],
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      icon: {
        type: Boolean,
        default: false,
      },
      size: {
        type: String,
        validate(v: string) {
          return ButtonSizes.includes(v);
        },
        default: ButtonSizes[0],
      },
      buttonAttrs: { type: Object },
    },
    components: {
      SvgIcon,
    },
    setup(props: any) {
      const buttonClass = computed(() => ({
        "cyber-button": true,
        ["theme-" + props.type]: true,
        disabled: props.disabled,
        "icon-button": props.icon,
        ["size-" + props.size]: true,
        loading: props.loading,
      }));
  
      return {
        buttonClass,
      };
    },
  });
  </script>
  