<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: () => {}
    },
    type: {
        type: String,
        default: 'default'
    },
    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>
.global-button {
    padding: 0 20rpx;
    margin: 0;
    height: v-bind(getSize);
    line-height: v-bind(getSize);
    font-size: 28rpx;
    border-radius: 52rpx;
    &.primary {
        background-color: $uni-color-primary;
        color: #fff;
    }
    &.success {
        background-color: $uni-color-success;
        color: #fff;
    }
    &.warning {
        background-color: $uni-color-warning;
        color: #fff;
    }
    &.danger {
        background-color: $uni-color-error;
        color: #fff;
    }
    &.text {
        color: $uni-color-primary;
        background-color: transparent;
        &::after {
            border: none;
        }
    }
}
</style>
