<template>
	<el-dialog 
		v-model="visible" 
		title="选择借用性质" 
		width="500px" 
		:close-on-click-modal="false" 
		@close="onCancel"
		class="borrow-type-dialog"
		:show-close="false"
	>
		<div class="modal-body">
			<div class="option-group">
				<div 
					v-for="item in types" 
					:key="item.value" 
					@click="select(item.value)" 
					class="option-item"
					:class="{ 'selected': selectedType === item.value }"
				>
					<div class="selection-indicator">
						<i class="fas fa-check"></i>
					</div>
					<div class="option-header">
						<div class="option-icon" :class="item.value === 1 ? 'classroom-icon' : 'special-icon'">
							<i :class="item.value === 1 ? 'fas fa-chalkboard-teacher' : 'fas fa-exclamation-triangle'"></i>
						</div>
						<div class="option-title">{{ item.label }}</div>
					</div>
					<div class="option-description">
						{{ item.value === 1 ? '课堂教学活动、实验操作、课程项目等教学时段的正式使用' : '适用于线下申请借用或其它特殊情况下的临时借用' }}
					</div>
				</div>
			</div>
		</div>
		<template #footer>
			<div class="modal-footer">
				<el-button @click="onCancel" class="btns-close">关闭</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue';
const props = defineProps<{ visible: boolean }>();
const emit = defineEmits(['update:visible', 'select']);
const visible = ref(props.visible);
const selectedType = ref<number | null>(null);

watch(
	() => props.visible,
	(v) => {
		visible.value = v;
		// 重置选中状态
		if (v) {
			selectedType.value = null;
		}
	}
);

const types = [
	// { value: 0, label: '常规借用' },
	{ value: 1, label: '课堂借用' },
	{ value: 2, label: '特殊借用' },
];

function select(type: number) {
	selectedType.value = type;
	// 延迟执行选择，让用户看到选中效果
	setTimeout(() => {
		emit('select', type);
		emit('update:visible', false);
	}, 200);
}

function onCancel() {
	emit('update:visible', false);
}
</script>

<style scoped>
/* 引入Font Awesome图标库 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* 对话框样式 */
:deep(.el-dialog) {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

:deep(.el-dialog__header) {
	background: linear-gradient(to right, #3498db, #2c3e50);
	color: white;
	padding: 25px 30px;
	text-align: center;
	position: relative;
}

:deep(.el-dialog__title) {
	font-weight: 600;
	font-size: 1.8rem;
	letter-spacing: 1px;
	text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

:deep(.el-dialog__header::after) {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(to right, #3498db, #2c3e50);
}

:deep(.el-dialog__body) {
	padding: 0;
}

:deep(.el-dialog__footer) {
	padding: 0;
}

/* 主体内容 */
.modal-body {
	padding: 30px;
}

.option-group {
	display: flex;
	flex-direction: column;
	gap: 25px;
	margin-bottom: 30px;
}

.option-item {
	display: flex;
	flex-direction: column;
	padding: 25px;
	border-radius: 16px;
	background: #f8f9fa;
	border: 2px solid #e9ecef;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.option-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	border-color: #3498db;
}

.option-item.selected {
	border-color: #3498db;
	background: rgba(52, 152, 219, 0.05);
	box-shadow: 0 8px 20px rgba(52, 152, 219, 0.15);
}

.option-item.selected::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 100%;
	background: #3498db;
}

.option-header {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.option-icon {
	width: 50px;
	height: 50px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	font-size: 24px;
	color: white;
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.classroom-icon {
	background: linear-gradient(135deg, #3498db, #2c3e50);
}

.special-icon {
	background: linear-gradient(135deg, #e74c3c, #e67e22);
}

.option-title {
	font-size: 1.35rem;
	font-weight: 700;
	color: #2c3e50;
}

.option-description {
	color: #6c757d;
	font-size: 0.95rem;
	line-height: 1.7;
	padding-left: 65px;
	position: relative;
}

.option-description::before {
	content: '•';
	position: absolute;
	left: 50px;
	color: #3498db;
	font-weight: bold;
}

.modal-footer {
	display: flex;
	justify-content: flex-end;
	padding: 0 30px 30px;
}

.btns-close {
	padding: 14px 40px;
	border-radius: 12px;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	
	border: none;
	outline: none;
	background: #e74c3c;
	color: white;

}

.selection-indicator {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #3498db;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 14px;
	opacity: 0;
	transform: scale(0);
	transition: all 0.3s ease;
}

.option-item.selected .selection-indicator {
	opacity: 1;
	transform: scale(1);
}

/* 响应式设计 */
@media (max-width: 480px) {
	.modal-body {
		padding: 20px;
	}
	
	.option-item {
		padding: 20px;
	}
	
	.option-description {
		padding-left: 0;
		padding-top: 10px;
		margin-left: 65px;
	}
	
	.option-description::before {
		display: none;
	}
}
</style>
