<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="gradesName">
					<a-input v-model:value="formState.gradesName" placeholder="输入班级名称" />
				</a-form-item>

				<a-form-item label="单位" name="collegeId">
					<a-select
						v-model:value="formState.collegeId"
						:fieldNames="{ label: 'name', value: 'id' }"
						:options="collegeMajorOptions"
						placeholder="请选择单位"
						@change="changeCollegeMajor"
					/>
					<!--			<a-cascader-->
					<!--				v-model:value="majorIdName"-->
					<!--				:options="collegeMajorOptions"-->
					<!--				:fieldNames="{ label: 'name', value: 'id' }"-->
					<!--				placeholder="请选择院系"-->
					<!--				changeOnSelect-->
					<!--				@change="changeCollegeMajor"-->
					<!--			/>-->
				</a-form-item>
				<a-form-item label="专业" name="majorId">
					<a-select
						v-model:value="formState.majorId"
						:fieldNames="{ label: 'majorName', value: 'id' }"
						:options="majorOptions"
						placeholder="请选择专业"
					/>
				</a-form-item>
<!--				<a-form-item label="学期" name="semester">-->
<!--					<a-select-->
<!--						v-model:value="formState.semester"-->
<!--						:fieldNames="{ label: 'name', value: 'id' }"-->
<!--						:options="semesterOptions"-->
<!--						placeholder="请选择学期"-->
<!--					/>-->
<!--				</a-form-item>-->


			</a-form>
		</a-modal>
</template>
<script setup>
import {reactive, ref} from 'vue'
	import resourceAuditApi from '@/api/resourceAudit.js'
	import { downList } from '@/api/semester/index.js'
	const collegeMajorOptions = ref([]) //院系
	const majorIdName = ref([]) //院系回显
	const majorOptions = ref([]) //专业
	const semesterOptions = ref([]) //专业
	const formRef = ref() //专业
	const mode = ref('add') //专业
	const title = ref('添加') //专业
	import {addItem,detail,editItem} from '@/api/grades'
	const visible = ref(false)
const emit = defineEmits([ "handleAddItem" ])
	const formState = reactive({
		gradesName: undefined,
		collegeId: undefined,
		majorId: undefined,
	})
	const rules = {
		gradesName: [{ required: true, message: '请输入教室名称', trigger: 'blur' }],
		collegeId: [{ required: true, message: '请选择单位', trigger: 'change' }],
		majorId: [{ required: true, message: '请选择专业', trigger: 'change' }],
	}

watch(
	() => visible.value,
	(newVal, oldVal) => {
		if (newVal == false && formRef.value) {
			formRef.value.resetFields()
		}
	},
	{ deep: true, immediate: true }
)
	const open = () => {

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


	detail({gradesId : item.gradesId}).then((res)=>{
		if(res.code ==200){
			formState.gradesId = item.gradesId
			formState.gradesName = res.data.gradesName
			formState.collegeId = res.data.collegeId
			formState.majorId = res.data.majorId+""

			changeCollegeMajor(formState.collegeId)
		}
	})

}
	const handleOk = (e) => {
		formRef.value.validate().then(()=>{
			let json = JSON.parse(JSON.stringify(formState))


				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
				})
			}
		})
		// 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)
	formState.majorId = undefined
	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()
	})

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