<template>
    <div class="app-operation">
        <template v-for="(item, index) in dataList" :key="index">
            <el-button :class="item.className" :title="t('routes.' + item[defaultProps.value])" :size="size"
                :icon="item[defaultProps.icon]" :circle="circle" plain @click="onClick(item[defaultProps.value])">
                <slot :item="item" v-if="!circle">
                    {{ t('routes.' + item[defaultProps.value]) }}
                </slot>
            </el-button>
        </template>
    </div>
</template>

<script lang="ts" setup>
import { PropType, computed } from 'vue'
import { i18n } from '@/stores'

const props = defineProps({
    dataList: {
        type: Array,
        required: true
    },
    props: {
        type: Object as PropType<{
            label?: string;
            value?: string;
            icon?: string;
            className?: string;
        }>
    },
    size: {
        type: String as PropType<'large' | 'default' | 'small'>,
        default: 'default'
    },
    circle: {
        type: Boolean
    }
})

const emit = defineEmits(['click'])
const t = i18n.global.t

const defaultProps = computed(() => {
    const { label = 'title', value = 'resourceCode', icon = 'icon' } = props.props ?? {}
    return {
        label,
        value,
        icon
    }
})

const onClick = (value: unknown) => {
    emit('click', value)
}
</script>

<style lang="less">
@import './index.less';
</style>