<!-- 功能开发 -->
<template>
	<div>
		<el-button type="primary" @click="handleEdit(null, null)">新增</el-button>
		<el-card>
			<el-tree
				ref="tree"
				style="height: 33.8rem; overflow: auto"
				class="filter-tree"
				:data="dataForm.treeData"
				default-expand-all
				:expand-on-click-node="false"
				:props="{ children: 'children', label: 'name' }"
				@node-contextmenu="rightClick"
				@node-click="handleNodeClick"
			>
				<template #-> </template>
			</el-tree>
		</el-card>
		<list-edit ref="listEditRef" @refresh-data-list="getTreeList" />
		<btn-edit ref="btnEditRef" @refresh-data-list="getTreeList" />
		<form-edit ref="formEditRef" @refresh-data-list="getTreeList" />

		<edit ref="addOrUpdateRef" @refresh-data-list="getTreeList" />
		<div class="dev-type-main-left">
			<!--鼠标右键菜单栏 -->
			<div v-show="dataForm.menuVisible">
				<ul id="menu" class="right-menu">
					<li class="menu-item" @click="editDevHandle">修改</li>
					<li class="menu-item" @click="addDevHandle">新增</li>
					<li class="menu-item" @click="addDegHandle">设计</li>
					<li class="menu-item" @click="addReviewHandle">预览功能</li>
					<li class="menu-item" @click="delDevHandle">删除</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { deleteById, functionTreeList } from '@/views/ebo/fast/api/function'
import edit from './edit.vue'
import listEdit from '../report/add-or-update.vue'
import btnEdit from '../form/formBtnEdit.vue'
import formEdit from '../form/indexFormDrawer.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import { useRouter } from 'vue-router'

const router = useRouter()

const dataForm = reactive({
	name: '',
	showEdit: false,
	editId: '',
	currentView: null,
	reportCode: '',
	formVisible: false,
	listVisible: false,
	listDataId: null,
	parentId: '',
	showFormCode: '',
	btnVisible: false,
	showBtnCode: '',
	menuVisible: false,
	treeData: [],
	tableData: [],
	rightClickData: { id: null, type: null, linkId: null, children: [] },
	tableHeight: window.innerHeight - 263,
	loading: false
})

const getTreeList = () => {
	dataForm.loading = true
	functionTreeList()
		.then(reponse => {
			dataForm.treeData = reponse.data
		})
		.finally(() => {
			dataForm.loading = false
		})
}
getTreeList()
const addOrUpdateRef = ref()
const listEditRef = ref()
const btnEditRef = ref()
const formEditRef = ref()
const handleEdit = (id: any, parentId: any) => {
	dataForm.showEdit = true
	dataForm.editId = id
	dataForm.parentId = parentId
	addOrUpdateRef.value.init(id, parentId)
}

const addDevHandle = () => {
	handleEdit(null, dataForm.rightClickData.id)
}

const rightClick = (event, data, node, obj) => {
	console.log('鼠标右键')
	dataForm.menuVisible = false // 先把模态框关死，目的是：第二次或者第n次右键鼠标的时候 它默认的是true
	dataForm.menuVisible = true
	let menu = document.querySelector('#menu')
	menu.style.left = event.clientX - 40 + 'px'
	menu.style.top = event.clientY - 90 + 'px'
	// 给整个document添加监听鼠标事件，点击任何位置执行closeRightMenu方法，及时将菜单关闭
	document.addEventListener('click', closeRightMenu)
	dataForm.rightClickData = data
}

const closeRightMenu = () => {
	dataForm.menuVisible = false
	// 及时关掉鼠标监听事件
	document.removeEventListener('click', closeRightMenu)
}
//修改
const editDevHandle = () => {
	handleEdit(dataForm.rightClickData.id, null)
}

const delDevHandle = () => {
	if (dataForm.rightClickData.children && dataForm.rightClickData.children.length > 0) {
		ElMessage.info({
			message: '存在子节点的不允许删除，需要先删除子节点',
			duration: 3000
		})
		return
	}
	handleDelete(dataForm.rightClickData)
}

const handleDelete = (row: any) => {
	ElMessageBox.confirm('请确认是否删除此数据？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		deleteById(row.id).then(response => {
			ElMessage.success({
				message: '删除成功',
				duration: 500
			})
			getTreeList()
		})
	})
}

//预览
const addReviewHandle = () => {
	if (dataForm.rightClickData.type == 'list') {
		router.push({ path: '/ebo/fast/report/reportDevReview/' + dataForm.rightClickData.linkId })
	} else if (dataForm.rightClickData.type == 'form') {
		router.push({ path: '/ebo/fast/form/formDevReview/' + dataForm.rightClickData.code + '/0' })
	} else {
		ElMessage.info({
			message: '不支持预览',
			duration: 3000
		})
	}
}
//设计
const addDegHandle = () => {
	handleDegClick(dataForm.rightClickData)
}

const handleDegClick = (data: any) => {
	if (data.type == 'list') {
		listEditRef.value.init(data.linkId)
	} else if (data.type == 'form') {
		formEditRef.value.init(data.code)
	} else if (data.type == 'btn') {
		btnEditRef.value.init(data.code)
	}
}

const handleNodeClick = (data: any) => {
	if (data.type == 'list') {
		router.push({ path: '/ebo/fast/report/reportDevReview/' + data.linkId })
	} else if (data.type == 'form') {
		router.push({ path: '/ebo/fast/form/formDevReview/' + data.code + '/0' })
	}
}
</script>

<style scoped>
.dev-type-main-left {
	overflow: auto;
	padding: 10px;
}

.right-menu {
	z-index: 1;
	position: absolute;
	height: 160px;
	width: 100px;
	position: absolute;
	border-radius: 5px;
	border: 1px solid #ccc;
	background-color: white;
}

.menu-item {
	line-height: 20px;
	text-align: left;
	margin-top: 10px;
	font-size: 14px;
	color: #606266;
}

li:hover {
	background-color: #edf6ff;
	color: #606266;
}
</style>
