<template>
  <el-button
    v-if="accessible"
    :type="type"
    :size="size"
    :plain="plain"
    :round="round"
    :circle="circle"
    :loading="loading"
    :disabled="disabled"
    :icon="icon"
  >
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  name: 'auth-button',
  data() {
    return {
      accessible: null
    };
  },
  props: {
    code: {
      type: String
    },
    type: {
      type: String
    },
    size: {
      type: String
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String
    }
  },
  methods: {
    init() {
      if (this.code) {
        this.accessible = this.$store.getters.authBtnCodes.includes(this.code);
      } else {
        this.accessible = true;
      }
    },
    handleClick() {
      this.$emit('click');
    }
  },
  created() {
    this.init();
  }
};
</script>

<style></style>
