<template>
	<el-dialog v-model="visible" title="选择借用性质" width="40%" :close-on-click-modal="false" @close="onCancel">
		<div style="margin-bottom: 16px">
			<ol style="padding: 10px 30px; margin-bottom: 20px; border: 1px solid #409eff; border-radius: 5px; background: #e6f7ff">
				<!-- <li>1、常规借用：课后自主练习、日常技能巩固等非教学时段的使用需求；</li> -->
				<li>1、课堂借用：课堂教学活动、实验操作、课程项目等教学时段的正式使用</li>
				<li>2、特殊借用：突发紧急情况、非常规教学需求或特殊事件下的临时性借用。</li>
			</ol>
			<div style="display: flex; justify-content: space-around; margin: 20px 0">
				<div v-for="item in types" :key="item.value" @click="select(item.value)" style="cursor: pointer; text-align: center">
					<img :src="getImage(item.value)" style="width: 80px; height: 80px;" />
					<el-button type="primary" style="margin-top: 8px; font-weight: bold" v-if="item.label !== '特殊借用'">{{ item.label }}</el-button>
					<el-button type="danger" plain style="margin-top: 8px; font-weight: bold" v-else>{{ item.label }}</el-button>
				</div>
			</div>
		</div>
		<template #footer>
			<el-button @click="onCancel">关闭</el-button>
		</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);
import classroomImg from '/@/assets/classroom.png';
import specialImg from '/@/assets/special.png';

watch(
	() => props.visible,
	(v) => (visible.value = v)
);

function getImage(value: number): string {
	switch (value) {
		case 1:
			return classroomImg;
		case 2:
			return specialImg;
		default:
			return specialImg;
	}
}


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

function select(type: number) {
	// console.log(type);
	emit('select', type);
	emit('update:visible', false);
}
function onCancel() {
	emit('update:visible', false);
}
</script>
