<template>
	<div class="drawer-container">
		<el-drawer v-model="drawerVisible" title="布局设置" size="280px">
			<el-scrollbar>
				<el-form label-width="100px" label-position="left">
					<el-form-item label="布局模式">
						<el-select v-model="layoutMode" placeholder="请选择" @change="handleLayoutModeChange">
							<el-option label="默认布局" value="default" />
							<el-option label="菜单布局" value="menu" />
							<el-option label="顶部布局" value="top" />
						</el-select>
					</el-form-item>

					<el-form-item label="主题颜色">
						<el-color-picker v-model="themeColor" @change="handleThemeChange" />
					</el-form-item>

					<el-divider>显示设置</el-divider>

					<el-form-item label="显示标签栏">
						<el-switch v-model="showTags" @change="handleShowTagsChange" />
					</el-form-item>

					<el-form-item label="显示面包屑">
						<el-switch v-model="showBreadcrumb" @change="handleShowBreadcrumbChange" />
					</el-form-item>

					<el-divider>其他</el-divider>

					<el-form-item>
						<el-button type="primary" @click="handleReset">重置设置</el-button>
					</el-form-item>
				</el-form>
			</el-scrollbar>
		</el-drawer>

		<div class="setting-btn" @click="drawerVisible = true">
			<el-icon :size="24">
				<component :is="'ElIconSetting'" />
			</el-icon>
		</div>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useLayoutStore } from '../../stores/modules/layout'
import { ElMessage } from 'element-plus'

defineOptions({
	name: 'LayoutSetting',
})

const layoutStore = useLayoutStore()

const drawerVisible = ref(false)

// 布局模式
const layoutMode = computed({
	get: () => layoutStore.layoutMode,
	set: (value) => {
		layoutStore.setLayoutMode(value)
	},
})

// 主题颜色
const themeColor = computed({
	get: () => layoutStore.themeColor,
	set: (value) => {
		layoutStore.setThemeColor(value)
	},
})

// 显示标签栏
const showTags = computed({
	get: () => layoutStore.showTags,
	set: (value) => {
		layoutStore.setShowTags(value)
	},
})

// 显示面包屑
const showBreadcrumb = computed({
	get: () => layoutStore.showBreadcrumb,
	set: (value) => {
		layoutStore.setShowBreadcrumb(value)
	},
})

// 布局模式变化
const handleLayoutModeChange = (value) => {
	layoutStore.setLayoutMode(value)
	ElMessage.success('布局模式已切换')
}

// 主题颜色变化
const handleThemeChange = (value) => {
	layoutStore.setThemeColor(value)
}

// 显示标签栏变化
const handleShowTagsChange = (value) => {
	layoutStore.setShowTags(value)
}

// 显示面包屑变化
const handleShowBreadcrumbChange = (value) => {
	layoutStore.setShowBreadcrumb(value)
}

// 重置设置
const handleReset = () => {
	layoutStore.resetTheme()
	ElMessage.success('设置已重置')
}
</script>

<style lang="scss" scoped>
.drawer-container {
	.setting-btn {
		position: fixed;
		top: 50%;
		right: 0;
		z-index: 9999;
		width: 48px;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--primary-color);
		color: #fff;
		border-radius: 6px 0 0 6px;
		cursor: pointer;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		transition: all 0.3s;

		&:hover {
			background: var(--primary-color);
			opacity: 0.9;
		}

		.el-icon {
			font-size: 20px;
		}
	}
}
</style>
