<template>
    <!-- 全局button -->
    <button :class="getClass" :style="style" :loading="loading" :disabled="disabled">
        <global-icon class="icon" :icon="icon" v-if="icon"></global-icon>
        <slot></slot>
    </button>
</template>

<script setup>
import { computed } from 'vue'
const ps = defineProps({
    radius: {
        type: [String, Number],
        default: 52
    },
    class: {
        type: String,
        default: ''
    },
    style: {
        type: Object,
        default: () => {
            return {}
        }
    },
    //图标
    icon: {
        type: String,
        default: ''
    },
    //default,primary,success,warning,danger,text
    type: {
        type: String,
        default: 'default'
    },
    //default,small,medium,large
    size: {
        type: String,
        default: 'default'
    },
    //是否镂空
    plain: {
        type: Boolean,
        default: false
    },
    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.plain) {
        _class.push(ps.type + '-plain')
    } else {
        _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'
    }
})
const getRadius = computed(() => {
    return ps.radius + 'rpx'
})
</script>
<style lang="scss" scoped>
@import './global-button.scss';
.global-button {
    border-radius: v-bind(getRadius);
    height: v-bind(getSize);
    line-height: v-bind(getSize);
    .icon {
        margin-right: 8rpx;
    }
    &[disabled] {
        opacity: 0.75;
    }
}
</style>
