<template>
	<div class="sys-grantApi-container">
		<el-drawer v-model="state.isVisible" size="30%">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Link /> </el-icon>
					<span>{{ state.drawerTitle }}</span>
				</div>
			</template>
			<el-card class="tree-card" shadow="hover" style="height: calc(100vh - 110px)" body-style="height:100%; overflow:auto">
				<template #header>
					<div class="card-header">
						<div class="tree-h-flex">
							<div class="tree-h-left">
								<el-input :prefix-icon="Search" v-model="filterText" placeholder="API路由" />
							</div>
						</div>
					</div>
				</template>
				<el-form-item v-loading="state.loading" style="margin-bottom: 45px">
					<el-row :gutter="24">
						<el-col :span="24" class="mb8">
							<el-tree
								ref="treeRef"
								class="filter-tree"
								:data="state.allApiData"
								:filter-node-method="filterNode"
								node-key="route"
								:props="{ children: 'children', label: 'name' }"
								show-checkbox
								icon="ele-Menu"
								highlight-current
							>
								<template #default="{ node, data }">
									<span v-if="node.level == 1 || node.level == 2">{{ node.label }}</span>
									<span v-if="node.level == 3">
										<el-icon style="margin-right: 3px; display: inline; vertical-align: middle"><ele-Link /></el-icon>
										{{ node.label }} 【{{ node.key }}】
										<el-tag type="primary" v-if="data.httpMethod === 'GET'">GET</el-tag>
										<el-tag type="success" v-else-if="data.httpMethod === 'POST'">POST</el-tag>
										<el-tag type="warning" v-else-if="data.httpMethod === 'PUT'">PUT</el-tag>
										<el-tag type="danger" v-else-if="data.httpMethod === 'DELETE'">DELETE</el-tag>
										<el-tag type="info" v-else>{{ data.httpMethod }}</el-tag>
									</span>
								</template>
							</el-tree>
						</el-col>
					</el-row>
				</el-form-item>
			</el-card>
			<template #footer>
				<div style="margin-bottom: 20px; margin-right: 20px">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</div>
			</template>
		</el-drawer>
	</div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref, watch } from 'vue';
import type { ElTree } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import { useI18n } from 'vue-i18n';

import { getAPI } from '/@/utils/axios-utils';
import { SysCommonApi, SysRoleApi } from '/@/api-services/api';

const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
const { t } = useI18n();

const state = reactive({
	loading: false,
	isVisible: false,
	allApiData: [] as any,
	ownApiList: [] as any,
	roleId: 0,
	selectRow: [] as any,
	drawerTitle: '',
	selectedTabName: 0,
});

// 页面初始化
onMounted(() => {
	initTreeData();
});

// 节点过滤
watch(filterText, (val) => {
	treeRef.value!.filter(val);
});

// 初始化树
const initTreeData = async () => {
	state.loading = true;
	var res = await getAPI(SysCommonApi).apiSysCommonApiListGet();
	var tData = res.data.result ?? [];
	treeRef.value?.setCheckedKeys([]); // 清空选中值
	state.allApiData = tData;
	state.loading = false;

	// 翻译所有控制器名称
	state.allApiData.forEach((pNode: any) => {
		pNode.children.forEach((cNode: any) => {
			cNode.name = t('message.apiservice.' + cNode.name) + '【' + cNode.name + '】';
		});
	});
};

// 打开页面
const openDrawer = async (row: any) => {
	state.selectedTabName = 0;
	state.roleId = row.id;
	state.drawerTitle = '设置角色接口黑名单【' + row.name + '】';

	state.loading = true;
	// 获取已有接口资源
	var res1 = await getAPI(SysRoleApi).apiSysRoleRoleApiListGet(state.roleId);
	state.ownApiList = res1.data.result ?? [];

	setTimeout(() => {
		treeRef.value?.setCheckedKeys(state.ownApiList ?? []);
	}, 200);

	state.loading = false;
	state.isVisible = true;
};

// 节点过滤
const filterNode = (value: string, data: any) => {
	if (!value) return true;
	return data.route.includes(value);
};

// 取消
const cancel = () => {
	state.isVisible = false;
};

// 授权角色接口资源
const submit = async () => {
	state.ownApiList = treeRef.value?.getCheckedKeys() as Array<string>;
	await getAPI(SysRoleApi).apiSysRoleGrantApiPost({ id: state.roleId, apiList: state.ownApiList });
	cancel();
};

// 导出对象
defineExpose({ openDrawer });
</script>
