<template>
  <el-link :underline="false" :style="initStyle" :type="type" :plain="plain" :round="round" :circle="circle"
           :icon="icon" :size="size"
           :disabled="disabled" @click="handleClick">{{ $t(label) }}
  </el-link>
</template>

<script>

export default {
  props: {
    label: {
      type: String,
      default: "",
    },
    size: {
      type: String,
      default: "medium"
    },
    type: {
      type: String,
      default: ""
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false
    },
    showLoading: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data() {
    return {
      loading: false,
      primaryStyle: {
        background: '#E70618',
        borderColor: '#E70618'
      },
      dangerStyle: {
        color: '#E74A4A',
        borderColor: '#E74A4A',
      },
      defaultStyle: {
        color: '#E70618',
        borderColor: '#E70618'
      }
    };
  },
  computed: {
    initStyle() {
      switch (this.type) {
        case 'primary':
          return this.primaryStyle;
        case 'danger':
          return this.dangerStyle;
        default :
          return this.defaultStyle;
      }
    }
  },
  watch: {},
  methods: {
    handleClick() {
      if (this.showLoading) {
        this.loading = true
      }
      this.$emit('handleClick')
      if (this.showLoading) {
        setTimeout(() => {
          this.loading = false
        }, 1000)
      }

    }
  },


  created() {

  },
  mounted() {

  },


}


</script>

<style scoped>
.el-link--primary {
  color: #1890ff !important;
}
</style>

