<template>
  <el-button :type="type" :disabled="disabled" :loading="type == 'text' ? false : isLoading || callback" :plain="plain"
    :id="id" :class="['ps-button', type == 'text' && 'text--' + textPlain, isLoading && 'is-loading', size && size]" @click="operaClick">
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  name: "PsButton",
  props: {
    type: {
      type: String,
      default: "info",
    },
    plain: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    loadingTime: {
      type: Boolean,
      default: true,
    },
    callback: {
      type: Boolean,
      default: false,
    },
    textPlain: {
      type: String,
      default: "info",
    },
    size: {
      type: String,
      default: null,
    },
    id: { type: String, default: "" }
  },
  data() {
    return {
      isLoading: false,
    };
  },
  created() {

  },
  mounted() {
  },
  methods: {
    operaClick(evt) {
      this.isLoading = this.loadingTime;
      this.$emit("click", evt);
      setTimeout(() => {
        this.isLoading = false;
      }, 1.5 * 1000);
    },
  },
};
</script>

<style></style>
