<template>
	<div class="le-flow-chart_toolbar">
		<template v-for="item in toolbarItemList" :key="item.type">
			<el-tooltip placement="bottom" v-bind="item.disabled ? { visible: false } : {}">
				<template #content>{{ item.tooltip }}</template>
				<span v-if="item.icon" class="le-flow-chart_toolbar__icon" @click="onControl(item)">
					<PickerIcon :icon-class="item.icon" :class="item.disabled ? 'cursor-not-allowed disabled' : 'cursor-pointer'"/>
<!--					<LeIcon :icon="item.icon" :class="item.disabled ? 'cursor-not-allowed disabled' : 'cursor-pointer'" />-->
				</span>
			</el-tooltip>
		</template>
	</div>
</template>
<script lang="ts" setup>
import { ToolbarConfig, ToolbarTypeEnum } from './types'
import { ref, onUnmounted, unref, nextTick, watchEffect } from 'vue'
import { useFlowChartContext } from './useFlowContext'
import PickerIcon from '@/components/IconPicker/PickerIcon.vue'
defineOptions({ name: 'FlowChartToolbar' })

defineProps({})

const emit = defineEmits(['view-data'])

const toolbarItemList = ref<ToolbarConfig[]>([
	{
		type: ToolbarTypeEnum.ZOOM_IN,
		icon: 'zoom-out',
		tooltip: '缩小'
	},
	{
		type: ToolbarTypeEnum.ZOOM_OUT,
		icon: 'zoom-in',
		tooltip: '放大'
	},
	{
		type: ToolbarTypeEnum.RESET_ZOOM,
		icon: 'le-suoxiao1',
		tooltip: '重置比例'
	},
	{ separate: true },
	{
		type: ToolbarTypeEnum.UNDO,
		icon: 'DArrowLeft',
		tooltip: '后退',
		disabled: true
	},
	{
		type: ToolbarTypeEnum.REDO,
		icon: 'DArrowRight',
		tooltip: '前进',
		disabled: true
	},
	{ separate: true },
	{
		type: ToolbarTypeEnum.SNAPSHOT,
		icon: 'Download',
		tooltip: '下载'
	},
	{
		type: ToolbarTypeEnum.VIEW_DATA,
		icon: 'Document',
		tooltip: '查看数据'
	}
])

const { logicFlow } = useFlowChartContext()

function onHistoryChange({ data: { undoAble, redoAble } }) {
	const itemsList = unref(toolbarItemList)
	const undoIndex = itemsList.findIndex(item => item.type === ToolbarTypeEnum.UNDO)
	const redoIndex = itemsList.findIndex(item => item.type === ToolbarTypeEnum.REDO)
	if (undoIndex !== -1) {
		unref(toolbarItemList)[undoIndex].disabled = !undoAble
	}
	if (redoIndex !== -1) {
		unref(toolbarItemList)[redoIndex].disabled = !redoAble
	}
}

const onControl = item => {
	const lf = unref(logicFlow)
	if (!lf) {
		return
	}
	switch (item.type) {
		case ToolbarTypeEnum.ZOOM_IN:
			lf.zoom()
			break
		case ToolbarTypeEnum.ZOOM_OUT:
			lf.zoom(true)
			break
		case ToolbarTypeEnum.RESET_ZOOM:
			lf.resetZoom()
			break
		case ToolbarTypeEnum.UNDO:
			lf.undo()
			break
		case ToolbarTypeEnum.REDO:
			lf.redo()
			break
		case ToolbarTypeEnum.SNAPSHOT:
			lf.getSnapshot()
			break
		case ToolbarTypeEnum.VIEW_DATA:
			emit('view-data')
			break
	}
}

watchEffect(async () => {
	if (unref(logicFlow)) {
		await nextTick()
		unref(logicFlow)?.on('history:change', onHistoryChange)
	}
})

onUnmounted(() => {
	unref(logicFlow)?.off('history:change', onHistoryChange)
})
</script>
<style lang="scss">
//@prefix-cls: ~'@{namespace}-flow-chart_toolbar';
.#{$prefix}flow-chart_toolbar {
	display: flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	//padding-bottom: 0.25rem;
	height: 36px;
	border-bottom: 1px solid var(--el-border-color);
	background-color: var(--el-bg-color-page);
	//background-color: var(--el-bg-color);

	.disabeld {
		color: var(--el-text-color-disabled);
	}

	&__icon {
		display: inline-block;
		margin-right: 10px;
		padding: 2px 4px;
		font-size: 16px;
		color: var(--el-text-color-primary);
		cursor: pointer;
		&:hover {
			color: var(--el-color-primary);
		}
	}
}
/*html[data-theme='dark'] {
	.lf-dnd {
		background: #080808;
	}
}*/
</style>
