<template>
  <transition name="fade" mode="out-in" :duration="100">
    <Button
      :key="disabled + text"
      :text="text"
      class="rounded-full h-8"
      @btnClicked="handleCliCkBtn"
      border="border-0"
      :class="[
        disabled ? 'text-font-white bg-font-blue filter grayscale' : 'bg-font-blue',
        disabled ? 'text-font-white bg-font-blue filter grayscale' : ' text-white ',
        loading ? 'opacity-75': '',
      ]"
    >
      <template #icon-right>
        <div>
          <div v-if="!loading">
            <img
              v-if="!disabled"
              class="ml-2"
              src="@/assets/icons/arrow-right.png"
              alt="arrow-right"
            />
            <img
              v-else
              class="ml-2"
              src="@/assets/icons/arrow-right-dark.png"
              alt="arrow-right"
            />
          </div>
          <div v-else>
            <Loading class="w-4 ml-2" />
          </div>
        </div>
      </template>
    </Button>
  </transition>
</template>

<script lang="ts">
import Button from "@/components/common/Btn.vue";
import { Loading } from "vant";
import Vue from "vue";
export default Vue.extend({
  components: {
    Button,
    Loading,
  },
  props: {
    text: String,
    disabled: Boolean,
    loading: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleCliCkBtn(e: MouseEvent) {
      if (this.disabled) return;
      if (this.loading) return;
      this.$emit("click", e);
    },
  },
});
</script>

<style>
.darkBtn {
  background: #1d2649;
  color: #8899b3;
}
</style>
