<template>
  <div
    class="
      px-3
      py-2
      text-center
      cursor-pointer
      rounded
      my-3
      flex
      items-center
      justify-center
      base-btn
    "
    :class="[
      disabled ? '  bg-app-btn-disabled' : ' bg-app-blue',
      loading ? ' opacity-75' : '',
    ]"
    @click="eventEmit"
  >
    <div class="btn-text" :class="{ 'text-white': disabled }">{{ text }}</div>
    <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 { defineComponent } from "vue";

export default defineComponent({
  components: {
    Loading,
  },
  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>
<style lang="less" scoped>
.base-btn {
  height: 50px;
  border-radius: 10px;
  .btn-text {
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>

