<template>
    <div>
        <button :class="className" @click.stop="click">
            <div class="icon" v-if="icon">
                <img :src="icon">
            </div>
            <div class="text">
                <slot></slot>
            </div>
        </button>
    </div>
</template>
<script>
export default {
    name: 'GmButton',
    props: ['icon', 'type'],
    computed: {
        className() {
            var className = ['gm-button']
            if ('dark' === this.type) {
                className.push('dark')
            } else if ('primary' === this.type) {
                className.push('primary')
            } else if ('borderless' === this.type) {
                className.push('borderless')
            } else {
                className.push('default')
            }
            return className
        }
    },
    methods: {
        click() {
            this.$emit('click')
        }
    }
}
</script>
<style lang="less" scoped>
.gm-button {
    height: 0.88rem;
    width: 100%;
    border-radius: 0.44rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
}
.gm-button.default {
    color: #15a8aa;
    background: #fff;
    // box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
    border: 0.02rem solid rgba(21, 168, 170, 1);
}
.gm-button.default:active {
    background: shade(#fff, 10%);
}
.gm-button.dark {
    color: #fff;
    background: #CCCCCC;
}
.gm-button.dark:active {
    // background: shade(#CCCCCC, 20%);
}
.gm-button.primary {
    color: #fff;
    background: #15a8aa;
   box-shadow:0rem 0.08rem 0.2rem 0rem rgba(21,168,170,0.36);
}
.gm-button.primary:active {
    background: shade(#15a8aa, 20%);
}
.gm-button.borderless {
    color: #005580;
    background: none;
    box-shadow: none;
}
.gm-button.primary:borderless {
    color: shade(#005580, 20%);
}
.text {
    font-size: 0.32rem;
    font-weight: bold;
    line-height: 0.88rem;
}
.icon {
    margin: 0 8px;
    * {
        width: 40px;
        height: 40px;
    }
}
</style>
