<template>
	<a-drawer v-model:open="open" title="布局配置" placement="right" :width="420">
		<div class="setting-content">
			<div class="setting-item">
				<div class="setting-title">布局模式</div>
				<div class="layout-mode-list">
					<div
						v-for="mode in layoutModes"
						:key="mode.value"
						class="layout-mode-item"
						:class="{
							active: layoutStore.layoutMode === mode.value,
						}"
						@click="handleLayoutChange(mode.value)"
					>
						<div class="layout-preview" :class="`preview-${mode.value}`">
							<div class="preview-sidebar"></div>
							<div v-if="mode.value === 'default'" class="preview-sidebar-2"></div>
							<div class="preview-content">
								<div class="preview-header"></div>
								<div class="preview-body"></div>
							</div>
						</div>
						<div class="layout-name">{{ mode.label }}</div>
						<CheckOutlined v-if="layoutStore.layoutMode === mode.value" class="check-icon" />
					</div>
				</div>
			</div>

			<div class="setting-item">
				<div class="setting-title">主题颜色</div>
				<div class="color-list">
					<div v-for="color in themeColors" :key="color" class="color-item" :class="{ active: themeColor === color }" :style="{ backgroundColor: color }" @click="changeThemeColor(color)">
						<CheckOutlined v-if="themeColor === color" />
					</div>
				</div>
			</div>

			<div class="setting-item">
				<div class="setting-title">显示设置</div>
				<div class="toggle-list">
					<div class="toggle-item">
						<span>显示标签栏</span>
						<a-switch v-model:checked="showTags" @change="handleShowTagsChange" />
					</div>
					<div class="toggle-item">
						<span>显示面包屑</span>
						<a-switch v-model:checked="showBreadcrumb" @change="handleShowBreadcrumbChange" />
					</div>
				</div>
			</div>

			<div class="setting-item">
				<div class="setting-title">其他设置</div>
				<div class="action-buttons">
					<a-button type="primary" block @click="handleResetSettings">
						<ReloadOutlined />
						重置设置
					</a-button>
				</div>
			</div>
		</div>
	</a-drawer>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { useLayoutStore } from '@/stores/modules/layout'
import { CheckOutlined, ReloadOutlined } from '@ant-design/icons-vue'

// 定义组件名称（多词命名）
defineOptions({
	name: 'LayoutSetting',
})

const layoutStore = useLayoutStore()

const open = ref(false)
const themeColor = ref('#1890ff')
const showTags = ref(true)
const showBreadcrumb = ref(true)

const layoutModes = [
	{ value: 'default', label: '默认布局' },
	{ value: 'menu', label: '菜单布局' },
	{ value: 'top', label: '顶部布局' },
]

const themeColors = ['#1890ff', '#f5222d', '#fa541c', '#faad14', '#13c2c2', '#52c41a', '#2f54eb', '#722ed1']

const openDrawer = () => {
	open.value = true
}

const closeDrawer = () => {
	open.value = false
}

defineExpose({
	openDrawer,
	closeDrawer,
})

// 切换布局
const handleLayoutChange = (mode) => {
	layoutStore.setLayoutMode(mode)
	const modeLabel = layoutModes.find((m) => m.value === mode)?.label || mode
	message.success(`已切换到${modeLabel}`)
}

// 切换主题颜色
const changeThemeColor = (color) => {
	themeColor.value = color
	// 更新 CSS 变量
	document.documentElement.style.setProperty('--primary-color', color)
	message.success('主题颜色已更新')
}

// 切换标签栏显示
const handleShowTagsChange = (checked) => {
	showTags.value = checked
	// 触发自定义事件或更新状态
	document.documentElement.style.setProperty('--show-tags', checked ? 'block' : 'none')
	message.success(checked ? '标签栏已显示' : '标签栏已隐藏')
}

// 切换面包屑显示
const handleShowBreadcrumbChange = (checked) => {
	showBreadcrumb.value = checked
	message.success(checked ? '面包屑已显示' : '面包屑已隐藏')
}

// 重置设置
const handleResetSettings = () => {
	themeColor.value = '#1890ff'
	showTags.value = true
	showBreadcrumb.value = true
	layoutStore.setLayoutMode('default')
	document.documentElement.style.setProperty('--primary-color', '#1890ff')
	document.documentElement.style.setProperty('--show-tags', 'block')
	message.success('设置已重置')
}

// 初始化
onMounted(() => {
	// 从本地存储或其他地方恢复设置
	const savedThemeColor = localStorage.getItem('themeColor')
	if (savedThemeColor) {
		themeColor.value = savedThemeColor
		document.documentElement.style.setProperty('--primary-color', savedThemeColor)
	}

	const savedShowTags = localStorage.getItem('showTags')
	if (savedShowTags !== null) {
		showTags.value = savedShowTags === 'true'
		document.documentElement.style.setProperty('--show-tags', savedShowTags === 'true' ? 'block' : 'none')
	}
})

// 监听设置变化并保存到本地存储
watch(themeColor, (newVal) => {
	localStorage.setItem('themeColor', newVal)
})

watch(showTags, (newVal) => {
	localStorage.setItem('showTags', String(newVal))
})
</script>

<style scoped lang="scss">
.setting-content {
	.setting-item {
		margin-bottom: 32px;

		.setting-title {
			font-size: 14px;
			font-weight: 500;
			margin-bottom: 16px;
			color: #333;
		}

		.layout-mode-list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 12px;

			.layout-mode-item {
				position: relative;
				border: 2px solid #e8e8e8;
				border-radius: 8px;
				padding: 12px;
				cursor: pointer;
				transition: all 0.3s;

				&:hover {
					border-color: var(--primary-color, #1890ff);
					transform: translateY(-2px);
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
				}

				&.active {
					border-color: var(--primary-color, #1890ff);
					background-color: rgba(24, 144, 255, 0.05);
				}

				.layout-preview {
					width: 100%;
					height: 60px;
					border-radius: 4px;
					margin-bottom: 8px;
					overflow: hidden;
					display: flex;
					background-color: #f0f2f5;

					.preview-sidebar {
						background-color: #001529;
					}

					.preview-sidebar-2 {
						background-color: #fff;
						border-left: 1px solid #e8e8e8;
					}

					.preview-content {
						flex: 1;
						padding: 4px;

						.preview-header {
							height: 8px;
							background-color: #fff;
							margin-bottom: 4px;
						}

						.preview-body {
							height: calc(100% - 12px);
							background-color: #e8e8e8;
						}
					}

					&.preview-default {
						.preview-sidebar {
							width: 20px;
						}

						.preview-sidebar-2 {
							width: 24px;
						}
					}

					&.preview-menu {
						.preview-sidebar {
							width: 30px;
							background-color: #fff;
							border-right: 1px solid #e8e8e8;
						}
					}

					&.preview-top {
						flex-direction: column;

						.preview-sidebar {
							width: 100%;
							height: 12px;
							background-color: #fff;
						}

						.preview-content {
							.preview-header {
								display: none;
							}

							.preview-body {
								height: 100%;
							}
						}
					}
				}

				.layout-name {
					font-size: 12px;
					color: #666;
					text-align: center;
				}

				.check-icon {
					position: absolute;
					top: 4px;
					right: 4px;
					color: var(--primary-color, #1890ff);
					font-size: 12px;
				}
			}
		}

		.color-list {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;

			.color-item {
				width: 32px;
				height: 32px;
				border-radius: 4px;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.2s;
				border: 2px solid transparent;

				&:hover {
					transform: scale(1.1);
				}

				&.active {
					border-color: #fff;
					box-shadow: 0 0 0 2px var(--primary-color, #1890ff);

					.anticon {
						color: #fff;
					}
				}
			}
		}

		.toggle-list {
			.toggle-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 12px 0;
				border-bottom: 1px solid #f0f0f0;

				&:last-child {
					border-bottom: none;
				}

				span {
					font-size: 14px;
					color: #333;
				}
			}
		}

		.action-buttons {
			:deep(.ant-btn) {
				height: 40px;
				font-size: 14px;
			}
		}
	}
}
</style>
