<template>
	<div class="layout-padding">
		<splitpanes>
			<pane class="ml10">
				<splitpanes>
					<pane size="30">
						<div class="layout-padding-auto layout-padding-view">
							<el-row>
								<div class="mb8" style="width: 100%">
									<el-button @click="dicDialogRef.openDialog()" class="ml10" icon="folder-add" type="primary">
										{{ $t('common.addBtn') }}
									</el-button>
									<el-button plain @click="handleRefreshCache()" class="ml10" icon="refresh-left" type="primary">
										{{ $t('common.refreshCacheBtn') }}
									</el-button>
								</div>
							</el-row>
							<el-scrollbar>
								<query-tree ref="dictTreeRef" :query="state.queryList" @node-click="handleNodeClick" placeholder="请输入字典项或名称">
									<template #default="{ data }">
										<span class="custom-tree-node">
											<span class="label">{{ data.description }}</span>
											<span class="code">{{ data.dictType }}</span>
											<span class="do">
												<el-button-group>
													<el-button icon="edit" size="small" @click.stop="dicDialogRef.openDialog(data.id)"></el-button>
													<el-tooltip :content="$t('sysdict.deleteDisabledTip')" :disabled="data.systemFlag === '0'" placement="top">
														<span style="margin-left: 12px">
															<el-button
																:disabled="data.systemFlag !== '0'"
																icon="delete"
																size="small"
																@click.stop="handleDelete([data.id])"
															></el-button>
														</span>
													</el-tooltip>
												</el-button-group>
											</span>
										</span>
									</template>
								</query-tree>
							</el-scrollbar>
							<el-footer style="height: 40px; line-height: 40px">
								<el-button type="primary" size="small" icon="Download" style="width: 100%" @click="exportExcel">{{
									$t('common.exportBtn')
								}}</el-button>
							</el-footer>
						</div>
					</pane>
					<pane class="ml8">
						<DicDialog @refresh="handleRefreshTree" ref="dicDialogRef" />
						<dict-item-dialog ref="dictItemDialogRef"></dict-item-dialog>
					</pane>
				</splitpanes>
			</pane>
		</splitpanes>
	</div>
</template>

<script lang="ts" name="systemDic" setup>
import { delObj, fetchList, refreshCache } from '/@/api/admin/dict';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
import { downBlobFile } from '/@/utils/other';

// 引入组件
const DicDialog = defineAsyncComponent(() => import('./form.vue'));
const DictItemDialog = defineAsyncComponent(() => import('./dictItem/index.vue'));
const QueryTree = defineAsyncComponent(() => import('/@/components/QueryTree/index.vue'));

const { t } = useI18n();
// 定义变量内容
const dicDialogRef = ref();
const dictTreeRef = ref();
const dictItemDialogRef = ref();
const state = reactive({
	queryForm: {},
	queryList: (name?: string) => {
		return fetchList({
			name: name,
		});
	},
});

// 导出EXCEL
const exportExcel = () => {
	downBlobFile('/admin/dict/export', state.queryForm, 'dict.xlsx');
};

//刷新缓存
const handleRefreshCache = () => {
	refreshCache().then(() => {
		useMessage().success('同步成功');
	});
};

// 点击树
const handleNodeClick = (data: any) => {
	dictItemDialogRef.value.open(data);
};

// 刷新树
const handleRefreshTree = async (data: any) => {
	await dictTreeRef.value.getdeptTree();
	// 选择当前编辑、新增的节点
	handleNodeClick(data);
};

// 删除操作
const handleDelete = async (ids: string[]) => {
	try {
		await useMessageBox().confirm(t('common.delConfirmText'));
	} catch {
		return;
	}

	try {
		await delObj(ids);
		useMessage().success(t('common.delSuccessText'));
		dictTreeRef.value.getdeptTree();
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};
</script>

<style scoped>
.menu:deep(.el-tree-node__label) {
	display: flex;
	flex: 1;
	height: 100%;
}
.custom-tree-node {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}
.custom-tree-node .code {
	font-size: 12px;
	color: #999;
}
.custom-tree-node .do {
	display: none;
}
.custom-tree-node:hover .code {
	display: none;
}
.custom-tree-node:hover .do {
	display: inline-block;
}
</style>
