<template>
	<el-dialog
		v-model="dialogVisible"
		:title="t('shared.templateModal.title')"
		width="1000px"
		@close="handleClose"
	>
		<div class="template-modal">
			<el-row :gutter="24" justify="start">
				<el-col :span="8" v-for="template in templates" :key="template.id">
					<div class="template-card">
						<div class="template-icon">{{ template.icon }}</div>
						<div class="template-title">{{ template.title }}</div>
						<div class="template-description">{{ template.description }}</div>
						<el-button
							type="primary"
							size="small"
							class="use-btn"
							@click="selectTemplate(template)"
						>
							{{ t('shared.templateModal.viewTemplate') }}
						</el-button>
					</div>
				</el-col>
			</el-row>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useI18n } from '@/composables/useI18n'

interface Template {
	id: string
	title: string
	description: string
	icon: string
	data?: any
}

const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	}
})

const emit = defineEmits<{
	close: []
	select: [templateId: string]
}>()

const { t, tm } = useI18n()
const dialogVisible = ref(false)

const templates = computed(
	() => (tm('shared.templates.catalog') as Template[]) || []
)

watch(
	() => props.visible,
	(val) => {
		dialogVisible.value = val
	}
)

const handleClose = () => {
	emit('close')
}

const selectTemplate = (template: Template) => {
	// 发送选中的模板 ID
	emit('select', template.id)
}
</script>

<style lang="less" scoped>
:deep(.el-dialog__body) {
	background: var(--bg-base);
}

.template-modal {
	:deep(.el-col:nth-child(n + 4)) {
		.template-card {
			margin-bottom: 0;
		}
	}

	.template-card {
		padding: 20px;
		border: 1px solid var(--border-light);
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		transition: all 0.3s ease;
		cursor: pointer;
		margin-bottom: 24px;

		&:hover {
			border-color: var(--el-color-primary);
			box-shadow: var(--shadow-md);
			transform: translateY(-2px);

			.template-title {
				color: var(--el-color-primary);
			}
		}

		.template-icon {
			font-size: 48px;
			margin-bottom: 12px;
		}

		.template-title {
			font-size: 14px;
			font-weight: 600;
			color: var(--text-primary);
			margin-bottom: 8px;
			transition: color 0.2s;
		}

		.template-description {
			font-size: 12px;
			color: var(--text-secondary);
			margin-bottom: 12px;
			min-height: 36px;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1.4;
		}

		.use-btn {
			width: 100%;
		}
	}
}
</style>
