<template>
	<div class="shadow rounded-[6px] shadow-blue-500" :style="{
		height:
			typeof props.height === 'string' ? props.height : props.height + 'px', 
		overflowY: 'hidden'
	}">
		<el-input class="pb-[10px]" v-model="filterText" placeholder="输入关键字过滤" @input="funfilterChange" />
		<el-tree ref="treeRef" :style="{height: `calc(${props.height} - 46px)`, overflow: 'auto'}" icon="" :data="props.data" :show-checkbox="props.showCheckbox" default-expand-all node-key="id"
			highlight-current :props="defaultProps" :current-node-key="''" @check="funCheckChange"
			:expand-on-click-node="false" @node-click="funCurrentChange" :filter-node-method="funTreeFilter">
			<template #default="{ node, data }">
				<p v-if="node.level === 1" class="flex justify-between items-center text-[12px]"
					:class="[props.showCheckbox ? 'w-[84%]' : 'w-[90%]']">
					<span>{{ node.label }}</span>
					<el-icon class="!text-[rgb(64,158,255)]" size="14" title="刷新" @click.stop="emits('refresh')">
						<RefreshRight />
					</el-icon>
				</p>

				<el-dropdown ref="dropdown1" v-else size="small" trigger="contextmenu" @command="funCommand"
					style="margin-right: 30px">
					<span class="el-dropdown-link text-[12px] flex items-center">
						{{ node.label }}
						<el-icon class="mr-[4px] !text-[#E6A23C]">
							<Folder v-if="!node.expanded || (node.isLeaf && !node.isCurrent)" />
							<FolderOpened v-else />
						</el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item class="text-[#409EFF]" v-if="props.dropdownMenu.includes('save')" :command="{ type: 'save', data, node }">保存</el-dropdown-item>
							<el-dropdown-item class="text-[#409EFF]" v-if="data.childs && data.childs.length && props.dropdownMenu.includes('export')" :command="{ type: 'export', data, node }">导出
							</el-dropdown-item>
							<el-dropdown-item class="text-[#F56C6C]" v-if="props.dropdownMenu.includes('delete')" :command="{ type: 'delete', data, node }">删除</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</template>
		</el-tree>

		<!--
			   <div class="buttons">
				   <el-button @click="getCheckedNodes">get by node</el-button>
				   <el-button @click="getCheckedKeys">get by key</el-button>
				   <el-button @click="setCheckedNodes">set by node</el-button>
				   <el-button @click="setCheckedKeys">set by key</el-button>
				   <el-button @click="resetChecked">reset</el-button>
			   </div>
		   -->
	</div>
</template>
<script lang="ts" setup name="search">
import { ref } from "vue";
import type Node from "element-plus/es/components/tree/src/model/node";
import { ElMessage, ElMessageBox } from "element-plus";
import config from "../api/config";
import request from "../api/axios.js";
const emits = defineEmits(["currentChange", "checkChange", "refresh"]);
interface Tree {
	id: string;
	label: string;
	children?: Tree[];
}
const props = withDefaults(
	defineProps<{
		data: Tree[];
		height?: number | string;
		showCheckbox?: boolean;
		type?: string;
		dropdownMenu?: string[]
	}>(),
	{
		data: () => [],
		height: 400,
		showCheckbox: false,
		type: 'wind',
		dropdownMenu: () => [
			'export',
			'delete',
		]
	}
);


const treeRef = ref();
const filterText = ref("");
/**输入框过滤 */
const funfilterChange = () => {
	treeRef.value!.filter(filterText.value);
};
const funTreeFilter = (value: string, data: Tree) => {
	if (!value) return true;
	return data.label.includes(value);
};
/**选中节点变化 */
const funCurrentChange = (current: Tree, currentNode: Node) => {
	emits("currentChange", { current, currentNode });
};
/**复选框选中变化 */
const funCheckChange = (
	current: Tree,
	{ checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }
) => {
	emits("checkChange", {
		current,
		checkedNodes,
		checkedKeys,
		halfCheckedNodes,
		halfCheckedKeys,
	});
};
//右键时, command菜单
// const funCommand = async ({ type, data, node }) => {
// 	switch (type) {
// 		case 'save': 
// 			/**该保存功能目前暂用于风电场, combine页 */
// 			if(props.type !== 'wind'){
// 				return false
// 			}
// 			ElMessageBox.confirm("确认保存当前节点的拟合功率?", "保存", {
// 				confirmButtonText: "确认",
// 				cancelButtonText: "取消",
// 				type: "warning",
// 			}).then(async () => {
// 				let saveArr = [];
// 				const repeatArr = (arr, saveArr) => {
// 					for (const unit of arr) {
// 						if (unit.childs?.length) {
// 							saveArr.push(...unit.childs.map((o) => o.id));
// 						} else if (unit.children?.length) {
// 							repeatArr(unit.children, saveArr);
// 						}
// 					}
// 				};
// 				if (data.childs?.length) {
// 					saveArr = data.childs.map((o) => o.id);
// 				} else if (data.children?.length) {
// 					repeatArr(data.children, saveArr);
// 				}
// 				let res = {code: 500}
// 				res = await request.get("/power/fitting/curve/save", {
// 					params: { ids: saveArr.join(",") },
// 				}); //删除当前节点
				
// 				if (res.code === 200) {
// 					ElMessage.success(res.msg);
// 				}
// 			});
// 			break;
// 		case "export":
// 			ElMessageBox.confirm("确认导出当前节点的所有数据?", "导出", {
// 				confirmButtonText: "确认",
// 				cancelButtonText: "取消",
// 				type: "warning",
// 			}).then(() => {
// 				const a = document.createElement("a");
// 				let childs = []
// 				childs = props.type==='wind'? data.childs.map((o) => o.id): data.childs.map((o) => o.path)
// 				const url = props.type==='wind'? '/data/option/download?ids=': '/export/files?filename='
// 				a.href =
// 					config.baseURL + url + childs.join(",");
// 				a.download = "";
// 				a.target='_blank'
// 				a.click();
// 			});
// 			break;
// 		case "delete":
// 			ElMessageBox.confirm("确认删除当前节点的所有数据?", "删除", {
// 				confirmButtonText: "确认",
// 				cancelButtonText: "取消",
// 				type: "warning",
// 			}).then(async () => {
// 				let deleteArr = [];
// 				const repeatArr = (arr, deleteArr) => {
// 					for (const unit of arr) {
// 						if (unit.childs?.length) {
// 							deleteArr.push(...unit.childs.map((o) => props.type==='wind'? o.id : o.path));
// 						} else if (unit.children?.length) {
// 							repeatArr(unit.children, deleteArr);
// 						}
// 					}
// 				};
// 				if (data.childs?.length) {
// 					deleteArr = data.childs.map((o) => props.type==='wind'? o.id : o.path);
// 				} else if (data.children?.length) {
// 					repeatArr(data.children, deleteArr);
// 				}
// 				let res = {code: 500}
// 				if(props.type==='wind'){
// 					res = await request.get("/data/option/delete", {
// 						params: { ids: deleteArr.join(",") },
// 					}); //删除当前节点
// 				}else{
// 					res = await request.delete("/delete/files", {
// 						data: { filename: deleteArr.join(",") },
// 					}); //删除当前节点
// 				}
// 				if (res.code === 200) {
// 					ElMessage.success(res.msg);
// 					emits("refresh");
// 				}
// 			});

// 			break;
// 	}
// };

const getCheckedNodes = () => {
	// // console.log(treeRef.value!.getCheckedNodes(false, false));
};
const getCheckedKeys = () => {
	// // console.log(treeRef.value!.getCheckedKeys(false));
};
const setCheckedNodes = () => {
	treeRef.value!.setCheckedNodes(
		[
			{
				id: 5,
				label: "Level two 2-1",
			},
			{
				id: 9,
				label: "Level three 1-1-1",
			},
		],
		false
	);
};
const setCheckedKeys = (keyArr) => {
	treeRef.value!.setCheckedKeys(keyArr, false);
};
const resetChecked = () => {
	treeRef.value!.setCheckedKeys([], false);
};

const defaultProps = {
	children: "children",
	label: "label",
};
defineExpose({setCheckedKeys})
</script>