<!-- vue3不支持defineEmits动态添加    暂时无法使用配置按钮 --> 
<template>
	<div :class="buttonAlign=='right'?'sx-button-right' :'sx-button-left'">
		<el-card :body-style="cardBodyStyle">
			<el-button v-for="item in buttonList" :key="item.id" :type="item.buttonType"
				:size="item.buttonSize" :icon="item.icon" :plain="item.plain" :round="item.round" :circle="item.circle"
				:loading="item.loading" :disabled="item.disabled" :autofocus="item.autofocus"
				@click="handleClick(item)">{{item.buttonName}}
			</el-button>
		</el-card >
	</div>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		onMounted, 
		defineProps,
		defineEmits
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)


	const props = defineProps({
		buttonAlign: {
			type: String,
			default:   'left'
		},
		area: {
			type: String,
			default:  'area'
		},
		clickDisabled: {
			type: Boolean,
			default:  false
		}
	})

	const buttonList = ref([])
    const clickEvents = ref([] )

	onMounted(() => {
		getButton()
	})
    const emit = defineEmits( ) 
	const getButton = () => {
		var url = 'framework/SysMenu/queryButtonList'
		var param = {
			area: props.area 
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				for (var i = 0; i < response.data.data.length; i++) {
					response.data.data[i].plain = Boolean(response.data.data[i].plain)
					response.data.data[i].round = Boolean(response.data.data[i].round)
					response.data.data[i].circle = Boolean(response.data.data[i].circle)
					response.data.data[i].loading = Boolean(response.data.data[i].loading)
					response.data.data[i].disabled = Boolean(response.data.data[i].disabled)
					response.data.data[i].autofocus = Boolean(response.data.data[i].autofocus)
					clickEvents.value.push(response.data.data[i].click) 
				}
				buttonList.value = response.data.data 
				 
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败' + response.data.msg,
				});
			}
		});
	}

	
	const handleClick = (item) => {
		console.log('Sx Button handleClick(' + item.click + ')')
		emit(item.click);
		if (props.clickDisabled) {
			item.disabled = true
			setTimeout(() => {
				item.disabled = false
			}, 10000)
		}
	}

	const cancelDisabled = () => {
		for (var button of buttonList.value) {
			button.disabled = false
		}
	}
</script>

<style>
</style>