<template>
    <button :class="getClass" :style="style" :loading="loading" :disabled="disabled">
        <slot></slot>
    </button>
</template>

<script setup>
import { computed } from 'vue'
const ps = defineProps({
    class: {
        type: String,
        default: ''
    },
    style: {
        type: Object,
        default: () => {}
    },
    //default,primary,success,warning,danger,text
    type: {
        type: String,
        default: 'default'
    },
    //default,small,medium,large
    size: {
        type: String,
        default: 'default'
    },
    loading: {
        type: Boolean,
        default: false
    },
    disabled: {
        type: Boolean,
        default: false
    }
})
const getClass = computed(() => {
    const _class = ['global-button']
    if (ps.class) {
        _class.push(ps.class)
    }
    if (ps.type) {
        _class.push(ps.type)
    }
    return _class
})
const getSize = computed(() => {
    if (ps.size == 'default') {
        return 64 + 'rpx'
    }
    if (ps.size == 'small') {
        return 56 + 'rpx'
    }
    if (ps.size == 'medium') {
        return 72 + 'rpx'
    }
    if (ps.size == 'large') {
        return 88 + 'rpx'
    }
})
</script>
<style lang="scss" scoped>
@import './global-button.scss';
.global-button {
    height: v-bind(getSize);
    line-height: v-bind(getSize);
}
</style>
