<template>
    <!-- 按钮组件 -->
    <el-button
        :type="type"
        :icon="icon"
        :size="size"
        :link="link"
        :style="style"
        :round="round"
        :plain="plain"
        :circle="circle"
        :loading="loading"
        :disabled="disabled"
        :autofocus="autofocus"
        @click="onButtonClick"
        v-bind="omit(attrs, ['onClick'])"
    >
        <slot></slot>
    </el-button>
</template>

<script setup name="ComButton">
import { ref, useAttrs } from 'vue'
import { omit } from 'lodash-es' // 忽略属性
const loading = ref(false) // 按钮加载状态
const attrs = useAttrs() // 获取按钮属性

// 不继承属性
defineOptions({
    inheritAttrs: false,
})

// 定义按钮属性
defineProps({
    // 按钮类型
    type: {
        type: String,
        default: 'primary',
    },
    // 按钮图标

    icon: {
        type: String,
        default: '',
    },
    // 按钮大小
    size: {
        type: String,
        default: 'default',
    },
    // 按钮是否链接
    link: {
        type: Boolean,
        default: false,
    },
    // 样式
    style: {
        type: Object,
        default: {},
    },
    // 按钮是否圆角
    round: {
        type: Boolean,
        default: false,
    },
    // 按钮是否朴素
    plain: {
        type: Boolean,
        default: false,
    },
    // 按钮是否圆形
    circle: {
        type: Boolean,
        default: false,
    },
    // 按钮是否禁用
    disabled: {
        type: Boolean,
        default: false,
    },
    // 按钮是否自动聚焦
    autofocus: {
        type: Boolean,
        default: false,
    },
})

// 按钮点击事件
const onButtonClick = async () => {
    // 设置按钮loading
    loading.value = true
    try {
        // 执行父组件按钮点击事件
        await attrs.onClick?.()
    } catch (error) {
        console.error(error)
    } finally {
        // 重置按钮loading
        loading.value = false
    }
}
</script>
