<template>
	<div class="home-entrance-container">
		<el-dialog v-model="isShowDialog" draggable title="常用入口设置">
			<div class="entrance-list">
				<p class="entrance-list-title">首页入口</p>
				<div class="mb20" v-loading="loading">
					<div>
						<draggable
							:list="entranceList"
							:force-fallback="true"
							animation="300"
							@end="onEnd"
							itemKey="id"
							class="entrance-list-box"
							v-show="entranceList.length"
						>
							<template #item="item">
								<div class="entrance-list-box-item" :title="item.element.pageName">
									<img v-lazy="getImageUrl(item.element.fastIcon)" alt="" class="my-handle" />
									<p class="entrance-list-box-item-name">{{ item.element.pageName }}</p>
									<SvgIcon name="ele-RemoveFilled" class="plus-icon location" color="#ccc" size="24px" @click="removeOne(item.element)" />
								</div>
							</template>
						</draggable>
					</div>
					<Empty v-show="!entranceList.length" />
				</div>
			</div>
			<div class="entrance-select">
				<p class="entrance-select-title">
					<span>系统功能</span>
					<el-input v-model="searchKey" :prefix-icon="Search" placeholder="请输入关键字" class="input" @keyup.enter="getEntranceSelect">
						<template #suffix>
							<el-button type="primary" size="small" round @click="getEntranceSelect">搜索</el-button>
						</template>
					</el-input>
				</p>
				<div class="mb20" v-loading="selectLoading">
					<template v-if="entranceSelect.length">
						<ul class="entrance-list-box">
							<li class="entrance-list-box-item" v-for="(item, index) in entranceSelect" :key="index" :title="item.pageName">
								<img v-lazy="getImageUrl(item.fastIcon)" alt="" class="mb10" />
								<p class="entrance-list-box-item-name">{{ item.pageName }}</p>
								<SvgIcon
									name="ele-CirclePlusFilled"
									class="remove-icon location"
									color="var(--el-color-primary)"
									size="24px"
									@click="plusOne(item)"
								/>
							</li>
						</ul>
					</template>
					<Empty v-else />
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="isShowDialog = false" class="default-button">取 消</el-button>
					<el-button type="primary" @click="onSubmit">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import { getImageUrl } from '/@/utils/tools';
import { geFastMenu, fastMenu, setFastMenu } from '/@/api/home';
import draggable from 'vuedraggable';
interface StateBacklist {
	isShowDialog: boolean;
	searchKey: string;
	entranceList: any[];
	sortEntranceList: any[];
	entranceSelect: any[];
	loading: boolean;
	selectLoading: boolean;
}
const state = reactive<StateBacklist>({
	isShowDialog: false,
	searchKey: '',
	entranceList: [],
	sortEntranceList: [],
	entranceSelect: [],
	loading: false,
	selectLoading: false,
});
const { isShowDialog, searchKey, entranceList, entranceSelect, loading, selectLoading } = toRefs(state);
const emit = defineEmits(['updateEntrance', 'openDialog', 'closeDialog']);
// 打开弹窗
const openDialog = () => {
	state.isShowDialog = true;
	getEntrance();
	getEntranceSelect();
	emit('openDialog');
};

// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
	emit('closeDialog');
};
// 获取我的入口
const getEntrance = () => {
	state.loading = true;
	geFastMenu()
		.then((res: any) => {
			state.entranceList = res?.result ?? [];
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
// 获取可选入口
const getEntranceSelect = () => {
	state.selectLoading = true;
	fastMenu({ name: state.searchKey })
		.then((res: any) => {
			state.entranceSelect = res?.result ?? [];
			setTimeout(() => {
				state.selectLoading = false;
			}, 300);
		})
		.catch(() => {
			state.selectLoading = false;
		});
};
// 移除
const removeOne = (val: any) => {
	state.entranceList = state.entranceList.filter((i: any) => i.id !== val.id);
	state.entranceSelect.push(val);
};
// 新增
const plusOne = (val: any) => {
	state.entranceList.push(val);
	state.entranceSelect = state.entranceSelect.filter((i: any) => i.id !== val.id);
};
//结束拖拽事件
const onEnd = () => {
	console.log(entranceList.value);
};
// 保存
const onSubmit = async () => {
	try {
		let req = state.sortEntranceList.length
			? state.sortEntranceList.map((item: any) => item.permissionCode)
			: state.entranceList.map((item: any) => item.permissionCode);
		await setFastMenu({ fastMenuArr: req });
		ElMessage.success('操作成功');
		emit('updateEntrance');
	} catch {
		// 处理错误
		isShowDialog.value = false;
	} finally {
		isShowDialog.value = false;
	}
};
defineExpose({ closeDialog, openDialog }); //暴漏方法
</script>
<style lang="scss" scoped>
.home-entrance-container {
	.entrance-list {
		color: var(--hotline-color-text-main);

		&-title {
			padding-bottom: 20px;
			font-size: var(--el-font-size-medium);
		}

		&-box {
			display: grid;
			justify-content: space-between;
			grid-template-columns: repeat(auto-fill, 110px);
			grid-gap: 15px;
			margin-bottom: 20px;

			&-item {
				background: #f0f4ff;
				border-radius: 8px;
				text-align: center;
				padding: 10px 20px;
				width: 110px;
				height: 110px;
				color: var(--el-text-color-regular);
				position: relative;
				user-select: none;

				.my-handle {
					width: 40px;
					height: 50px;
					margin-bottom: 10px;
					cursor: grab;
				}

				.location {
					position: absolute;
					top: -5px;
					right: -5px;
					cursor: pointer;
				}

				&-name {
					width: 70px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.entrance-select {
		color: var(--hotline-color-text-main);

		&-title {
			padding-bottom: 20px;
			font-size: var(--el-font-size-medium);

			span {
				display: inline-block;
				min-width: 80px;
				margin-right: 40px;
			}

			.input {
				max-width: 350px;

				:deep(.el-input__wrapper) {
					border-radius: 40px;
				}
			}
		}
	}
}
</style>
