<template>
  <el-button :style="initStyle" :class="binClass" :type="type" :plain="plain" :round="round"
             :circle="circle"
             :icon="icon" :size="size" v-bind="$attrs"
             @click="handleClick" :disabled="disabled">
    <svg-icon v-if="iconClass" :icon-class="iconClass"></svg-icon>
    {{ $t(label) }}
  </el-button>
</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: true
    },
    iconClass: {
      type: String,
      default: ""
    }
  },
  components: {},
  data() {
    return {
      loading: false,
      primaryStyle: {
        background: '#E70618',
        borderColor: '#E70618'
      },
      dangerStyle: {
        color: '#E74A4A',
        borderColor: '#E74A4A',
        background: '#fff'
      },
      defaultStyle: {
      },
      otherStyle: {
        color: '#000000',
        borderColor: '#E6E8EE'
      },
      sendStyle:{
        color:'rgba(241, 25, 83, 1)',
        borderColor:'rgba(241, 25, 83, 0.15)',
        background:'rgba(241, 25, 83, 0.15)',
      }
    };
  },
  computed: {
    initStyle() {
      switch (this.type) {
        case 'primary':
          return this.primaryStyle;
        case 'danger':
          return this.dangerStyle;
        case 'other':
          return this.otherStyle;
        case 'send':
          return this.sendStyle;
        default :
          return this.defaultStyle;
      }
    },
    binClass() {
      if (this.type !== 'primary' && this.type !== 'danger' && this.type !== 'other' && this.type !== 'send')  {
        return 'defaultClass';
      }
    },
  },
  watch: {},
  methods: {
    async handleClick() {
      this.$emit('handleClick')

    },
  },


  created() {

  },
  mounted() {

  },


}


</script>

<style scoped>
.el-button--other:hover {
  color: #1890ff !important;
  border-color: #badeff !important;
  background-color: #e8f4ff !important;
}

.el-button--other:focus {
  color: #1890ff !important;
  border-color: #badeff !important;
  background-color: #e8f4ff !important;
}

.defaultClass:hover {
  background-color: rgba(222, 147, 20, 0.1);
  color: #E70618;
  border-color:#E70618
}

.defaultClass:focus {
  background-color: rgba(222, 147, 20, 0.1);
  color:#E70618;
  border-color: #E70618
}
</style>

