<template>
	<div class="system-menu-container layout-padding">
		<div class="layout-padding-auto layout-padding-view pd20">
			<div class="flex-center-between mb20">
				<p class="table-title">信息列表</p>
				<div>
					<el-button type="primary" @click="expand">
						<SvgIcon
							name="ele-ArrowDownBold"
							style="transition: transform var(--el-transition-duration)"
							:style="state.isExpand ? 'transform: none' : 'transform: rotateZ(180deg)'"
							class="mr5"
						/>{{ state.isExpand ? '收起' : '展开' }}</el-button
					>
					<el-button type="primary" @click="onOpenAddMenu" v-auth="'100401'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
				</div>
			</div>
			<!-- 表格 -->
			<el-auto-resizer class="table" v-loading="state.loading">
				<template #default="{ height, width }">
					<el-table-v2
						v-model:expanded-row-keys="expandedRowKeys"
						:columns="state.columns"
						:data="state.menuTableData"
						expand-column-key="pageName"
						fixed
						:width="width"
						:height="height"
					>
					</el-table-v2>
				</template>
			</el-auto-resizer>
		</div>
		<AddMenu ref="addMenuRef" @updateList="getMenuListApi" />
		<EditMenu ref="editMenuRef" @updateList="getMenuListApi" />
	</div>
</template>

<script lang="ts" setup name="systemmenu">
import { defineAsyncComponent, ref, h, reactive, onMounted, watch } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { ElMessageBox, ElMessage, ElButton, ElTag } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
import { getMenuList, removeMenu } from '/@/api/system/menu';
import SvgIcon from '/@/views/system/menu/component/SvgIcon.vue';
// 引入组件
const AddMenu = defineAsyncComponent(() => import('/@/views/system/menu/component/addMenu.vue'));
const EditMenu = defineAsyncComponent(() => import('/@/views/system/menu/component/editMenu.vue'));

// 定义变量内容
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo);
const addMenuRef = ref();
const editMenuRef = ref();
const state = reactive({
	menuTableData: <any>[], // 获取所有菜单
	loading: false,
	columns: [
		{
			key: 'pageName',
			dataKey: 'pageName',
			title: '菜单名称',
			width: 300,
			cellRenderer: (data: any) => {
				return h('p', { style: { justifyContent: 'flex-end' } }, [
					h(SvgIcon, { name: data.rowData.icon }, ''),
					h('span', { class: 'pl5' }, { default: () => data.rowData.pageName }),
				]);
			},
		},
		{
			key: 'path',
			dataKey: 'path',
			title: '路由路径',
			width: 400,
		},
		{
			key: 'component',
			dataKey: 'component',
			title: '组件路径',
			width: 400,
		},
		{
			key: 'permissionCode',
			dataKey: 'permissionCode',
			title: '权限编码',
			width: 100,
		},
		{
			key: 'isFast',
			dataKey: 'isFast',
			title: '快捷入口',
			width: 100,
			cellRenderer: (data: any) => {
				return h(ElTag, { type: data.rowData.isFast ? 'success' : 'info' }, { default: () => (data.rowData.isFast ? '是' : '否') });
			},
		},
		{
			key: 'isHide',
			dataKey: 'isHide',
			title: '是否隐藏',
			width: 100,
			cellRenderer: (data: any) => {
				return h(ElTag, { type: data.rowData.isHide ? 'success' : 'info' }, { default: () => (data.rowData.isHide ? '是' : '否') });
			},
		},
		{
			key: 'isKeepAlive',
			dataKey: 'isKeepAlive',
			title: '是否缓存',
			width: 100,
			cellRenderer: (data: any) => {
				return h(ElTag, { type: data.rowData.isKeepAlive ? 'success' : 'info' }, { default: () => (data.rowData.isKeepAlive ? '是' : '否') });
			},
		},
		{
			key: 'isAffix',
			dataKey: 'isAffix',
			title: '是否固定',
			width: 100,
			cellRenderer: (data: any) => {
				return h(ElTag, { type: data.rowData.isAffix ? 'success' : 'info' }, { default: () => (data.rowData.isAffix ? '是' : '否') });
			},
		},
		{
			key: 'isLink',
			dataKey: 'isLink',
			title: '是否外链',
			width: 100,
			cellRenderer: (data: any) => {
				return h(ElTag, { type: data.rowData.isLink ? 'success' : 'info' }, { default: () => (data.rowData.isLink ? '是' : '否') });
			},
		},
		{
			key: 'displayOrder',
			dataKey: 'displayOrder',
			title: '排序',
			width: 80,
		},
		{
			key: 'handle',
			title: '操作',
			width: 100,
			fixed: 'right',
			align: 'center',
			cellRenderer: (data: any) => {
				if (userInfos.value.authBtnList.includes('100402') && userInfos.value.authBtnList.includes('100403')) {
					// 权限判断
					return h('span', { class: 'flex' }, [
						h(
							ElButton,
							{
								onClick: () => onOpenEditMenu(data.rowData),
								type: 'primary',
								icon: h(SvgIcon, { name: 'ele-Edit', size: '16px' }, {}),
								link: true,
								title: '修改',
							},
							{ default: () => '' }
						),
						h(
							ElButton,
							{
								onClick: () => onTabelRowDel(data.rowData),
								type: 'danger',
								icon: h(SvgIcon, { name: 'ele-Delete', size: '16px' }, {}),
								link: true,
								title: '删除',
							},
							{ default: () => '' }
						),
					]);
				} else if (userInfos.value.authBtnList.includes('100402')) {
					return h(
						ElButton,
						{
							onClick: () => onOpenEditMenu(data.rowData),
							type: 'primary',
							icon: h(SvgIcon, { name: 'ele-Edit', size: '16px' }, {}),
							link: true,
							title: '修改',
						},
						{ default: () => '' }
					);
				} else if (userInfos.value.authBtnList.includes('100403')) {
					h(
						ElButton,
						{
							onClick: () => onTabelRowDel(data.rowData),
							type: 'danger',
							icon: h(SvgIcon, { name: 'ele-Delete', size: '16px' }, {}),
							link: true,
							title: '删除',
						},
						{ default: () => '' }
					);
				}
			},
		},
	],
	isExpand: false,
});
const expandedRowKeys = ref<string[]>([]);
// 打开新增菜单弹窗
const onOpenAddMenu = () => {
	addMenuRef.value.openDialog();
};
// 打开编辑菜单弹窗
const onOpenEditMenu = (row: RouteRecordRaw) => {
	editMenuRef.value.openDialog(row);
};
const expand = () => {
	state.isExpand = !state.isExpand;
};
watch(
	() => state.isExpand,
	(old: Boolean) => {
		if (old) getAllIds(state.menuTableData);
		else expandedRowKeys.value = [];
	}
);
const getAllIds = (arr: any) => {
	if (!arr) return [];
	arr.forEach((v: any) => {
		if (v.children?.length) {
			getAllIds(v.children);
			expandedRowKeys.value.push(v.id);
		}
	});
};
// 删除当前行
const onTabelRowDel = (row: any) => {
	ElMessageBox.confirm(`此操作将永久删除菜单：${row.pageName}, 是否继续?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
	})
		.then(() => {
			removeMenu(row.id).then(() => {
				ElMessage.success('删除成功');
				getMenuListApi();
			});
		})
		.catch(() => {});
};
// 获取所有菜单
const getMenuListApi = () => {
	state.loading = true;
	getMenuList()
		.then((res: any) => {
			state.menuTableData = res?.result ?? [];
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
// 页面加载时
onMounted(() => {
	getMenuListApi();
});
</script>
<style lang="scss" scoped>
.system-menu-container {
	.table {
		flex: 1;
	}
}
</style>
