<template>
  <div
    class="
      text-xs
      px-3
      py-2
      text-center
      cursor-pointer
      rounded
      my-3
      flex
      items-center
      justify-center
    "
    :class="[disabled ? 'filter grayscale' : '', loading ? ' opacity-75' : '']"
    @click="eventEmit"
  >
    {{ text }} <slot name="icon-right"></slot>
    <Loading type="spiner" size="16" class="ml-2" v-if="loading" />
  </div>
</template>

<script lang="ts">
import { Loading } from "vant";
import Vue from "vue";
export default Vue.extend({
  components: {
    Loading,
  },
  name: "AppIcon",
  props: {
    size: String,
    disabled: {
      type: Boolean,
      default: false,
    },
    text: {
      type: String,
      required: true,
    },
    border: {
      type: String,
      default: "border border-app-dark-4",
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    eventEmit(v: any) {
      if (this.disabled || this.loading) {
        return;
      }
      this.$emit("btnClicked", v);
    },
  },
});
</script>

