/**
* author: Louie Butch
* date: 2020/10/30
* email: 844089357@qq.com
* desc: 按钮
*/
<template>
<el-button
        class="hd-button"
        :class="{'hd-text-button': type === 'text'}"
        :type="type"
        :loading="loading"
        :disabled="disabled"
        :size="size"
        @click="$emit('click')"
>
   <hd-icon :icon-name="icon" v-if="icon" :color="setColor" :size="iconSize" style="margin-right: 6px"></hd-icon>
    <slot></slot>
</el-button>
</template>

<script>
import hdIcon from '../../hdIcon/src/hdIcon';
export default {
    name: 'hd-button',
    components: {
        hdIcon
    },
    props: {
        type: {
            type: String,
            default: 'primary'
        },
        size: {
            type: String,
            default: 'small'
        },
        icon: {
            type: String
        },
        loading: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        color:{
			type: String,
			default: '#096db6'
        }
    },
    computed: {
        setColor(){
            if (this.type === 'text') {
                if (this.disabled) {
                    return  '#c0c4cc'
                } else if(this.color){
					return this.color;
                }else{
					return '#096db6'
                }
            } else {
                return '#ffffff'
            }
        },

        iconSize(){
            if (this.type === 'text') {
                return 14;
            } else {
                if (this.size === 'medium') {
                    return 16;
                } else if (this.size === 'small') {
                    return 14;
                } else {
                    return 12;
                }
            }
        }
    }
};
</script>

<style scoped lang="scss">
    .hd-button {

    }
    .hd-text-button{
        color: #45474d;
        &.is-disabled{
            color: #c0c4cc;
        }
    }
</style>