<template>
	<div class="btns_box">
		<div
			v-for="item in props.btns"
			:key="item.name"
			:style="item.style"
			class="btns_item"
			@click="handleBtnItemClick(item)"
		>
			<!-- CirclePlus -->
			<i :class="item.icon" style="margin-right: 6px" v-if="item.icon" />
			<span>{{ item.name }}</span>
		</div>
	</div>
</template>

<script setup>
import { msg } from '@/utils/lodash/msg.js';
import { ref } from 'vue';
const props = defineProps({
	btns: {
		type: Array,
		default: [],
		required: true,
	},
	isOperate: {
		type: Boolean,
	},
	handleBtnItemClick: {
		type: Function,
		default: () => {},
		required: true,
	},
});

const emits = defineEmits(['handleBtnItemClick']);

const handleBtnItemClick = (item) => {
	if (props.isOperate && item.name !== '新增') {
		// msg('warning', '请等待结果返回后再进行操作!');
		return;
	}
	emits('handleBtnItemClick', item);
};
</script>

<style lang="scss" scoped>
.btns_box {
	display: flex;
	margin: 16px 16px 0 16px;
	.btns_item {
		cursor: pointer;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #000;
		font-size: 12px;
		:hover {
			opacity: 0.5;
		}
	}
}
</style>
