<template>
	<a-modal v-model:visible="visible" :title="title" @ok="handleOk">
		<a-form
			:model="formState"
			:rules="rules"
			ref="formRef"
			layout="horizontal"
			:label-col="{ span: 7 }"
			:wrapper-col="{ span: 12 }"
		>
			<a-form-item label="班级名称" name="room">
				<a-input v-model:value="formState.room" placeholder="输入教室名称" />
			</a-form-item>

			<a-form-item label="老师" name="teacherId">
				<a-select
					v-model:value="formState.teacherId"
					:fieldNames="{ label: 'name', value: 'id' }"
					:options="userAllListOptions"
					placeholder="请选择老师"
					@change="changeCollegeMajor"
				/>
			</a-form-item>

			<a-form-item label="班级" name="gradesId">
				<a-select
					v-model:value="formState.gradesId"
					:fieldNames="{ label: 'gradesName', value: 'gradesId' }"
					:options="gradesQueryListOptions"
					placeholder="请选择班级"
					@change="changeCollegeMajor"
				/>
			</a-form-item>

			<a-form-item label="课程" name="courseId">
				<a-select
					v-model:value="formState.courseId"
					:fieldNames="{ label: 'courseName', value: 'courseId' }"
					:options="courseinfoAllListOptions"
					placeholder="请选择课程"
					@change="changeCollegeMajor"
				/>
			</a-form-item>

			<a-form-item label="学期" name="semesterId">
				<a-select
					v-model:value="formState.semesterId"
					:fieldNames="{ label: 'name', value: 'id' }"
					:options="downListOptions"
					placeholder="请选择学期"
					@change="changeCollegeMajor"
				/>
			</a-form-item>

			<a-form-item label="开始节次" name="startPeriod">
				<!--					<a-input v-model:value="formState.startPeriod" placeholder="输入开始节次" />-->
				<a-input-number
					v-model:value="formState.startPeriod"
					:min="1"
					:max="100"
					placeholder="输入开始节次"
					style="width: 100%"
				/>
			</a-form-item>
			<a-form-item label="结束节次" name="endPeriod">
				<!--					<a-input v-model:value="formState.endPeriod" placeholder="输入结束节次" />-->
				<a-input-number
					v-model:value="formState.endPeriod"
					:min="1"
					:max="100"
					placeholder="输入结束节次"
					style="width: 100%"
				/>
			</a-form-item>

			<a-form-item label="上课周期" name="scheduleTime">
				<a-select
					v-model:value="formState.scheduleTime"
					:fieldNames="{ label: 'label', value: 'value' }"
					:options="COURSE_OPEN_SCHEDULE_TIME_Options"
					placeholder="请选择上课周期"
					@change="changeCollegeMajor"
				/>
			</a-form-item>
			<a-form-item label="单双周" name="weekType">
				<a-select
					v-model:value="formState.weekType"
					:fieldNames="{ label: 'label', value: 'value' }"
					:options="COURSE_OPEN_WEEK_TYPE_Options"
					placeholder="请选择单双周"
					@change="changeCollegeMajor"
				/>
			</a-form-item>
			<a-form-item label="状态" name="status">
				<a-select
					v-model:value="formState.status"
					:fieldNames="{ label: 'label', value: 'value' }"
					:options="COURSE_OPEN_STATUS_Options"
					placeholder="请选择状态"
					@change="changeCollegeMajor"
				/>
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script setup>
	import { reactive, ref } from 'vue'
	import resourceAuditApi from '@/api/resourceAudit.js'
	import { downList, userAllList, gradesQueryList, courseinfoAllList } from '@/api/semester/index.js'
	const collegeMajorOptions = ref([]) //院系
	const majorIdName = ref([]) //院系回显
	const majorOptions = ref([]) //专业
	const semesterOptions = ref([]) //专业

	const downListOptions = ref([]) //专业
	const userAllListOptions = ref([]) //专业
	const gradesQueryListOptions = ref([]) //专业
	const courseinfoAllListOptions = ref([]) //专业

	const COURSE_OPEN_SCHEDULE_TIME_Options = tool.dictList('COURSE_OPEN_SCHEDULE_TIME')
	const COURSE_OPEN_WEEK_TYPE_Options = tool.dictList('COURSE_OPEN_WEEK_TYPE')
	const COURSE_OPEN_STATUS_Options = tool.dictList('COURSE_OPEN_STATUS')

	const formRef = ref() //专业
	const mode = ref('add') //专业
	const title = ref('添加') //专业
	import { addItem, detail, editItem } from '@/api/courseopen'
	import tool from '@/utils/tool'
	import { message } from 'ant-design-vue'
	const visible = ref(false)

	const startPeriodTag = ref(false)
	const endPeriodTag = ref(false)

	const emit = defineEmits(['handleAddItem'])

	const formState = ref({
		id: undefined,
		room: undefined,
		teacherId: undefined,
		gradesId: undefined,
		courseId: undefined,
		semesterId: undefined,
		startPeriod: undefined,
		endPeriod: undefined,
		scheduleTime: undefined,
		weekType: undefined,
		status: undefined
	})
	const rules = {
		room: [{ required: true, message: '请输入教室名称', trigger: 'blur' }],
		teacherId: [{ required: true, message: '请选择老师', trigger: 'change' }],
		gradesId: [{ required: true, message: '请选择班级', trigger: 'change' }],
		courseId: [{ required: true, message: '请选择课程', trigger: 'change' }],
		semesterId: [{ required: true, message: '请选择学期', trigger: 'change' }],
		startPeriod: [{ required: true, message: '请输入开始节次', trigger: 'blur' }],
		endPeriod: [{ required: true, message: '请输入结束节次', trigger: 'blur' }],
		scheduleTime: [{ required: true, message: '请选择上课周期', trigger: 'change' }],
		weekType: [{ required: true, message: '请选择单双周', trigger: 'change' }],
		status: [{ required: true, message: '请选择状态', trigger: 'change' }]
	}

	watch(
		() => visible.value,
		(newVal, oldVal) => {
			if (newVal == false && formRef.value) {
				formRef.value.resetFields()
			}
		},
		{ deep: true, immediate: true }
	)
	watch(
		() => formState.value.startPeriod,
		(newVal, oldVal) => {
			if (Number(formState.value.endPeriod)) {
				if (newVal > formState.value.endPeriod) {
					message.error('开始节次不能大于结束节次')
					startPeriodTag.value = true
				} else {
					startPeriodTag.value = false
				}
			}
		},
		{ deep: true, immediate: true }
	)
	watch(
		() => formState.value.endPeriod,
		(newVal, oldVal) => {
			if (Number(formState.value.startPeriod)) {
				if (newVal < formState.value.startPeriod) {
					message.error('结束节次不能小于开始节次')
					endPeriodTag.value = true
				} else {
					endPeriodTag.value = false
				}
			}
		},
		{ deep: true, immediate: true }
	)

	const open = () => {
		visible.value = true
		mode.value = 'add'
		title.value = '添加'
		startPeriodTag.value = false
		endPeriodTag.value = false
	}
	const edit = (item) => {
		visible.value = true
		mode.value = 'edit'
		title.value = '修改'
		console.log('编辑内容', item)

		startPeriodTag.value = false
		endPeriodTag.value = false
		detail({ id: item.id }).then((res) => {
			if (res.code == 200) {
				formState.value.id = item.id
				formState.value = { id: item.id, ...res.data }
				formState.value.gradesId = Number(formState.value.gradesId)
				// formState.value.semesterId = Number(formState.value.semesterId)

				console.log('会先对象', formState.value)
				// changeCollegeMajor(formState.collegeId)
			}
		})
	}
	const handleOk = (e) => {
		if (startPeriodTag.value == false && endPeriodTag.value == false) {
			formRef.value.validate().then(() => {
				let json = JSON.parse(JSON.stringify(formState.value))

				if (mode.value == 'add') {
					addItem(json).then((res) => {
						emit('handleAddItem')
						visible.value = false
					})
				}
				if (mode.value == 'edit') {
					editItem(json).then((res) => {
						emit('handleAddItem')
						visible.value = false
					})
				}
			})
		} else {
			message.error('开始节次或结束节次数据不正确')
		}

		// console.logckPoint.value = false
	}
	const getOrgTreeSelector = () => {
		resourceAuditApi
			.orgList()
			.then((res) => {
				console.log(res.data, '获取学院')
				collegeMajorOptions.value = res.data
			})
			.catch((err) => {
				console.log(err)
			})
	}
	const getSemesterSelector = () => {
		console.log('对象内容')
		downList()
			.then((res) => {
				console.log(res.data, '获取学期')
				semesterOptions.value = res.data
			})
			.catch((err) => {
				console.log(err)
			})
	}
	const changeCollegeMajor = (value, selectedOptions) => {
		console.log('Selected:', value, selectedOptions)
		// if (!value) {
		// 	formState.collegeId = undefined
		// 	// majorIdName.value = ''
		// 	return false
		// }
		// formState.majorId = undefined
		// majorIdName.value = selectedOptions.map((it) => it.name).join('/')
		// formState.collegeId = value[0] || null
		// formState.collegeTwoId = value[1] || null
		// formState.collegeThreeId = value[2] || null
		// if (selectedOptions.length) {
		// 获取选中的最后一级
		// const lastSelected = selectedOptions[selectedOptions.length - 1]
		// formState.selectedCollegeMajor = {
		// 	id: lastSelected.id,
		// 	name: lastSelected.name,
		// 	fullPath: selectedOptions.map((opt) => opt.name).join(' / ')
		// }
		// console.log(formState.collegeTwoId, '最后一级id')
		// getCollegeMajor(formState.collegeId)
		// }
	}
	const getCollegeMajor = (id) => {
		resourceAuditApi
			.zyselect({ collegeId: id })
			.then((res) => {
				console.log(res.data, '专业下拉数据', formState)
				majorOptions.value = res.data
			})
			.catch((err) => {
				console.log(err)
			})
	}
	onMounted(() => {
		getOrgTreeSelector()
		// getSemesterSelector()
		getPullDara()

		console.log('都什么呢', COURSE_OPEN_SCHEDULE_TIME_Options)
	})
	const getPullDara = () => {
		downList()
			.then((res) => {
				console.log(res.data, '专业下拉数据', formState)
				downListOptions.value = res.data
			})
			.catch((err) => {
				console.log(err)
			})
		userAllList()
			.then((res) => {
				userAllListOptions.value = res.data
				console.log(res.data, '老师数据', userAllListOptions.value)
			})
			.catch((err) => {
				console.log(err)
			})
		gradesQueryList()
			.then((res) => {
				console.log(res.data, '专业下拉数据', formState)
				gradesQueryListOptions.value = res.data
			})
			.catch((err) => {
				console.log(err)
			})
		courseinfoAllList()
			.then((res) => {
				console.log(res.data, '专业下拉数据', formState)
				courseinfoAllListOptions.value = res.data
			})
			.catch((err) => {
				console.log(err)
			})
	}

	defineExpose({ open, edit })
</script>
