<template>
	<div class="shadow mx-[30px] pages-preview" :class="{ workbench: isWorkbench }">
		<!-- 工作台顶部静态信息 -->
		<div v-if="isWorkbench" class="workbench-header bg-gradient-to-r from-blue-500 to-blue-600 text-white p-4 mb-4">
			<!-- 用户信息区域 -->
			<div class="user-info flex items-center mb-4">
				<div class="avatar w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mr-3">
					<svg width="24" height="24" viewBox="0 0 24 24" fill="white">
						<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
					</svg>
				</div>
				<div>
					<div class="text-sm opacity-80">夜深了</div>
					<div class="font-medium">管理员</div>
				</div>
			</div>
			
			<!-- 任务统计 -->
			<div class="task-stats grid grid-cols-3 gap-4">
				<div class="stat-item text-center">
					<div class="stat-icon w-8 h-8 bg-orange-400 rounded-full mx-auto mb-2 flex items-center justify-center">
						<svg width="16" height="16" viewBox="0 0 24 24" fill="white">
							<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
						</svg>
					</div>
					<div class="text-xl font-bold">0</div>
					<div class="text-xs opacity-80">待办任务</div>
				</div>
				<div class="stat-item text-center">
					<div class="stat-icon w-8 h-8 bg-blue-400 rounded-full mx-auto mb-2 flex items-center justify-center">
						<svg width="16" height="16" viewBox="0 0 24 24" fill="white">
							<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
						</svg>
					</div>
					<div class="text-xl font-bold">0</div>
					<div class="text-xs opacity-80">秒送任务</div>
				</div>
				<div class="stat-item text-center">
					<div class="stat-icon w-8 h-8 bg-green-400 rounded-full mx-auto mb-2 flex items-center justify-center">
						<svg width="16" height="16" viewBox="0 0 24 24" fill="white">
							<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
						</svg>
					</div>
					<div class="text-xl font-bold">0</div>
					<div class="text-xs opacity-80">已办任务</div>
				</div>
			</div>
		</div>

		<!-- 装修组件内容 -->
		<div
			v-for="(widget, index) in pageData"
			:key="widget.id"
			class="relative"
			:class="{
				'cursor-pointer': !widget?.disabled,
			}"
			@click="handleClick(widget, index)"
		>
			<div
				class="absolute inset-0 pointer-events-none"
				:class="{
					'widget-selected': index === modelValue,
					'widget-hoverable': !widget?.disabled,
				}"
			></div>
			<slot>
				<component :is="widgets[widget?.name]?.content" :content="widget.content" :styles="widget.styles" :key="widget.id" />
			</slot>
		</div>
		<slot name="footer" />
	</div>
</template>
<script lang="ts" setup>
import widgets from '../widgets';
import type { PropType } from 'vue';

const props = defineProps({
	pageData: {
		type: Array as PropType<any[]>,
		default: () => [],
	},
	modelValue: {
		type: Number,
		default: 0,
	},
	pageType: {
		type: Number,
		default: 1,
	},
});

const emit = defineEmits<{
	(event: 'update:modelValue', value: number): void;
}>();

const isWorkbench = computed(() => {
	return props.pageType === 4;
});

const handleClick = (widget: any, index: number) => {
	if (widget.disabled) return;
	emit('update:modelValue', index);
};
</script>

<style lang="scss" scoped>
.pages-preview {
	background-color: #f8f8f8;
	width: 360px;
	height: 680px;
	color: #333;
	overflow-y: auto;
	
	&.workbench {
		height: 800px;
	}
	
	.widget-hoverable {
		@apply border-2 border-dashed border-[#dcdfe6] z-[100];
	}
	
	.widget-selected {
		@apply border-2 border-solid border-primary z-[101];
		box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.1);
	}
}

.workbench-header {
	border-radius: 12px 12px 0 0;
}
</style>
