<template>
	<div class="menu-panel">
		<el-icon size="18" title="放大" @click="lf.zoom(true)">
			<component :is="'el-icon-zoom-in'"/>
		</el-icon>
		<el-icon size="18" title="缩小" @click="lf.zoom(false)">
			<component :is="'el-icon-zoom-out'"/>
		</el-icon>
		<el-icon size="18" title="大小还原" @click="lf.resetZoom()">
			<component :is="'el-icon-refresh-left'"/>
		</el-icon>
		<el-icon size="18" title="居中" @click="lf.translateCenter()">
			<component :is="'el-icon-aim'"/>
		</el-icon>
		<el-icon size="18" title="位置还原" @click="lf.resetTranslate()">
			<component :is="'el-icon-position'"/>
		</el-icon>
		<el-icon size="18" title="自动布线" @click="layout">
			<component :is="'pi-icon-auto-layout'"/>
		</el-icon>
		<el-icon :class="{disabled: !canUndo}" size="18" title="上一步" @click="canUndo && lf.undo()">
			<component :is="'el-icon-back'"/>
		</el-icon>
		<el-icon :class="{disabled: !canRedo}" size="18" title="下一步" @click="canRedo && lf.redo()">
			<component :is="'el-icon-right'"/>
		</el-icon>
		<el-icon size="18" title="删除" @click="remove">
			<component :is="'el-icon-delete'"/>
		</el-icon>
		<el-icon size="18" title="小地图" @click="map">
			<component :is="'el-icon-map-location'"/>
		</el-icon>
		<el-icon size="18" title="下载图片" @click="download">
			<component :is="'el-icon-download'"/>
		</el-icon>
	</div>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, ref} from "vue";
import LogicFlow from "@logicflow/core";
import {ElMessageBox} from "element-plus";
import {useI18n} from "vue-i18n";

const props = defineProps({
	lf: {type: LogicFlow}
})
const {t} = useI18n()

let canUndo = ref(false)
let canRedo = ref(false)

const updateHistoryButtons = () => {
	// 直接从 lf.history 读取最新长度
	canUndo.value = props.lf.history.undos.length > 0;
	canRedo.value = props.lf.history.redos.length > 0;
};

onMounted(() => {
	if (props.lf) {
		props.lf.on('history:change', updateHistoryButtons)
		// 初始化一次状态
		updateHistoryButtons()
	}
})

onUnmounted(() => {
	// 记得移除监听器
	props.lf?.off('history:change', updateHistoryButtons)
})

function remove() {
	// 在你的Vue组件或事件回调中
	const selectedElements = props.lf.getSelectElements()
	// 提取选中的节点
	const selectedNodes = selectedElements.nodes
	if (selectedNodes.length > 0) {
		ElMessageBox.confirm(t('flow.deleteNode'), t('system.warning'), {
			confirmButtonText: t('system.ok'), cancelButtonText: t('system.cancel'), type: 'warning'
		}).then(() => {
			props.lf.deleteNode(selectedNodes[0].id)
		}).catch(() => {
		})
		return
	}
	// 提取选中的连线
	const selectedEdges = selectedElements.edges
	if (selectedEdges.length > 0) {
		ElMessageBox.confirm(t('flow.deleteLine'), t('system.warning'), {
			confirmButtonText: t('system.ok'), cancelButtonText: t('system.cancel'), type: 'warning'
		}).then(() => {
			props.lf.deleteEdge(selectedEdges[0].id)
		}).catch(() => {
		})
		return
	}
}

function map() {
	const miniMap = props.lf.extension.miniMap as any
	if (miniMap.isShow) {
		miniMap.hide()
	} else {
		miniMap.show()
	}
}

function download() {
	props.lf.getSnapshot("下载-" + (Date.now()), {backgroundColor: "#FFFFFF"})
}

function layout() {
	const dagre = props.lf.extension.dagre as any
	// 先应用布局
	dagre.layout({
		nodesep: 50,
		ranksep: 80,
		isDefaultAnchor: true
	})
	// 然后适配视图
	props.lf.fitView()
}
</script>

<style lang="scss" scoped>
.menu-panel {
	background: rgb(255, 255, 255);
	top: 10px;
	right: 330px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	position: absolute;
	z-index: 999;
	padding: 10px;
	box-shadow: 3px 0 10px 1px #e4e0db;
	gap: 10px;

	i {
		cursor: pointer;
	}

	.disabled {
		color: #909399;
	}
}
</style>
