OnlineEducation-teacher-front/src/views/resourceCenter/components/ComplexChoices.vue

<template>
	<div class="filter-bar">
		<!-- 所选院系 -->
		<div class="filter-group">
			<span class="filter-group-title">所选院系:</span>
			<!-- <a-radio-group v-model:value="selectedDept" >
				<a-radio-button v-for="dept in selectedDepts" :key="dept" :value="dept">{{ dept }}</a-radio-button>
			</a-radio-group> -->
			<a-spin :spinning="spinningSelectedDepts" tip="">
				<div style="display: flex; flex-direction: column">
					<MyRadioButtonGroup
						ref="Dept"
						v-show="selectedDepts.length > 0"
						v-model="selectedDept"
						@change="handleSelectedDept"
					>
						<MyRadioButtonOffOut
							v-for="(item, index) in selectedDepts"
							:key="index"
							:value="index"
							:label="item.name"
							:index="index"
						></MyRadioButtonOffOut>
					</MyRadioButtonGroup>
					<div style="height: 10px"></div>
					<MyRadioButtonGroup
						ref="Big"
						v-show="selectedDeptBigs.length > 0"
						v-model="selectedDeptBig"
						@change="handleSelectedCourses"
					>
						<MyRadioButton
							v-for="(item, index) in selectedDeptBigs"
							:key="index"
							:value="index"
							:label="item.name"
							:index="index"
						></MyRadioButton>
					</MyRadioButtonGroup>
					<div style="height: 10px"></div>
					<MyRadioButtonGroup
						ref="Smail"
						v-show="selectedDeptSmails.length > 0"
						v-model="selectedDeptSmail"
						@change="handleSelectedSmails"
					>
						<MyRadioButton
							v-for="(item, index) in selectedDeptSmails"
							:key="index"
							:value="index"
							:label="item.name"
							:index="index"
						></MyRadioButton>
					</MyRadioButtonGroup>
				</div>
			</a-spin>
		</div>
		<div style="height: 10px"></div>
		<div class="line"></div>
		<div style="height: 10px"></div>
		<!-- 所属课程 -->
		<!-- <div class="filter-group">
			<span class="filter-group-title">所选课程:</span>
			<MyRadioButtonGroup ref="Course" v-model="selectedCourse" @change="handleSelectedCourses1">
				<MyRadioButton
					v-for="(item, index) in selectedCourses"
					:key="index"
					:value="item"
					:label="item"
					:index="index"
				></MyRadioButton>
			</MyRadioButtonGroup>
		</div>
		<div style="height: 10px"></div>
		<div class="line"></div>
		<div style="height: 10px"></div> -->
		<!-- 课程类型和课件格式（联动单选） -->
		<div class="filter-group">
			<span class="filter-group-title">资源类型:</span>
			<!-- <a-radio-group v-model:value="selectedType" @change="handleTypeChange">
				<a-radio-button v-for="dept in selectedTypes" :key="dept" :value="dept">{{ dept }}</a-radio-button>
			</a-radio-group> -->
			<a-spin :spinning="spinningSelectedTypesBig" tip="">
				<div style="display: flex; flex-direction: column">
					<MyRadioButtonGroup
						ref="TypeBig"
						v-show="selectedTypesBig.length > 0"
						v-model="selectedTypeBig"
						@change="handleTypeChangeBig"
					>
						<MyRadioButton
							v-for="(item, index) in selectedTypesBig"
							:key="index"
							:value="index"
							:label="item.name"
							:index="index"
						></MyRadioButton>
					</MyRadioButtonGroup>
					<MyRadioButtonGroup
						ref="Type"
						v-show="selectedTypes.length > 0"
						v-model="selectedType"
						@change="handleTypeChange"
					>
						<MyRadioButton
							v-for="(item, index) in selectedTypes"
							:key="index"
							:value="index"
							:label="item.name"
							:index="index"
						></MyRadioButton>
					</MyRadioButtonGroup>
				</div>
			</a-spin>
		</div>
		<div style="height: 10px"></div>
		<div class="line"></div>
		<div style="height: 10px"></div>
		<div class="filter-group">
			<span class="filter-group-title">课件格式:</span>
			<!-- <a-radio-group v-model:value="selectedFormat" @change="handleFormatChange">
				<a-radio-button v-for="dept in selectedFormats" :key="dept" :value="dept">{{ dept }}</a-radio-button>
			</a-radio-group> -->
			<a-spin :spinning="spinningSelectedFormats" tip="">
				<MyRadioButtonGroup ref="Format" v-model="selectedFormat" @change="handleFormatChange">
					<MyRadioButton
						v-for="(item, index) in selectedFormats"
						:key="item"
						:value="index"
						:label="item.fileExtendName"
						:index="index"
					></MyRadioButton>
				</MyRadioButtonGroup>
			</a-spin>
		</div>
		<div style="height: 10px"></div>
		<div class="line"></div>
		<div style="height: 10px"></div>
		<!-- 已选条件 -->
		<div class="filter-group">
			<span class="filter-group-title">已选条件:</span>
			<div style="display: flex; align-items: center; margin-top: 7px">
				<a-tag
					v-for="(tag, index) in selectedTagKeys"
					style="display: flex; justify-content: center; align-items: center"
					:key="index"
					closable
					@close="handleTagClose(tag, index)"
				>
					{{ tag.name }}
				</a-tag>

				<span v-if="selectedTagKeys.length > 0" class="clean" @click="handleTagCloseAll">清除筛选</span>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import MyRadioButtonGroup from '../components/MyRadioButtonGroup.vue'
	import MyRadioButton from '../components/MyRadioButton.vue'
	import MyRadioButtonOffOut from '../components/MyRadioButtonOffOut.vue'
	import collegeApi from '@/api/college'
	import EventBus from '@/utils/EventBus'
	import {
		addViewCount,
		detail,
		add,
		cancel,
		queryList,
		resourcecentreDetail,
		getShareLink,
		getQueryTreeAll,
		getAllListFileFormat
	} from '@/api/portal'

	import orgApi from '@/api/resourceType/resourceType'
	const selectedDept = ref('')
	const selectedDeptBig = ref('')
	const selectedDeptSmail = ref('')
	const selectedCourse = ref('')
	const selectedTypeBig = ref('')
	const selectedType = ref('')
	const selectedFormat = ref('')
	const Dept = ref(null)
	const Big = ref(null)
	const Smail = ref(null)
	const Course = ref(null)
	const TypeBig = ref(null)
	const Type = ref(null)
	const Format = ref(null)

	const selectedTags = ref([])
	const selectedTagKeys = ref([])

	const selectedDepts = ref([])
	const spinningSelectedDepts = ref(false)
	const selectedDeptBigs = ref([])

	const selectedDeptBigsList = ref([])

	const selectedDeptSmailsList = ref([])

	const selectedDeptSmails = ref([])

	const selectedCourses = ref([
		'全部',
		'初级飞行训练',
		'高级飞行训练',
		'实弹训练',
		'低空战术飞行',
		'跨区转场训练',
		'空气动力学',
		'航空气象学',
		'航空电子设备',
		'飞机结构与系统',
		'空军作战指挥',
		'战场态势感知',
		'模拟对抗训练',
		'军队政治工作',
		'军事理论',
		'战斗精神培育',
		'机型改装训练',
		'应急程序训练'
	])
	const selectedTypesBig = ref([])
	const spinningSelectedTypesBig = ref(false)
	const selectedTypes = ref([])
	const selectedFormats = ref([])
	const spinningSelectedFormats = ref(false)

	const selectedTypesBigList = ref([])
	const selectedTypesList = ref([])
	const handleSelectedDept = (e) => {
		if (e == 0) {
			selectedDeptBigs.value = []
		} else {
			selectedDeptBigs.value = selectedDeptBigsList.value[e]
		}
		console.log('handleSelectedDept', e)
		selectedDeptSmails.value = []
		if (selectedDeptBigs.value.length > 0) {
			Big.value.setClean(-1)
		}
		selectedDeptBig.value = -1
		selectedDeptSmail.value = -1
		updateSelectedTags()
	}
	const handleSelectedCourses = (e) => {
		if (e == 0) {
			selectedDeptSmails.value = []
		} else {
			selectedDeptSmails.value = selectedDeptSmailsList.value[e - 1]
		}
		console.log('handleSelectedCourses', e, selectedDeptSmails.value)
		if (selectedDeptSmails.value.length > 0) {
			Smail.value.setClean(-1)
		}
		// selectedDeptSmails.value = selectedDeptSmailsList.value[e]
		selectedDeptSmail.value = -1
		updateSelectedTags()
	}
	const handleSelectedSmails = (e) => {
		// if (e == 0) {
		// 	selectedDeptSmails.value = []
		// } else {
		// 	selectedDeptSmails.value = selectedDeptSmailsList.value[e]
		// }
		// selectedDeptSmails.value = selectedDeptSmailsList.value[e]
		updateSelectedTags()
	}
	// 处理课程类型选择变化
	const handleTypeChangeBig = (e) => {
		if (e == 0) {
			selectedTypes.value = []
		} else {
			selectedTypes.value = selectedTypesBigList.value[e]
		}
		console.log('handleTypeChangeBig', e, selectedTypes.value)
		if (selectedTypes.value.length > 0) {
			Type.value.setClean(-1)
		}
		selectedType.value = -1
		// selectedDeptSmails.value = selectedDeptSmailsList.value[e]
		// updateSelectedTags()
		// selectedFormat.value = undefined // 选择课程类型时，重置课件格式
		updateSelectedTags()
	}
	const handleTypeChange = (e) => {
		console.log('handleTypeChange', ' e ', e, selectedTypes.value)
		// selectedFormat.value = undefined // 选择课程类型时，重置课件格式
		// updateSelectedTags()
		updateSelectedTags()
	}

	// 处理课件格式选择变化
	const handleFormatChange = (e) => {
		// selectedType.value = undefined // 选择课件格式时，重置课程类型
		updateSelectedTags()
	}

	// 更新已选条件
	const updateSelectedTags = () => {
		selectedTags.value = []
		selectedTagKeys.value = []
		let queryData = {}
		// selectedTags.value = [
		// 	...(selectedDept.value !== '全部' ? { key: 'Dept', list: [selectedDept.value] } : []),
		// 	...(selectedCourse.value !== '全部' ? { key: 'Course', list: [selectedCourse.value] } : []),
		// 	...(selectedType.value !== '全部' ? { key: 'Type', list: [selectedType.value] } : []),
		// 	...(selectedFormat.value !== '全部' ? { key: 'Format', list: [selectedFormat.value] } : [])
		// ]
		console.log('筛选条件第一个', selectedDept.value, selectedDepts.value)
		console.log('筛选条件第二个', selectedDeptBig.value, selectedDeptBigs.value)
		console.log('筛选条件第三个', selectedDeptSmail.value, selectedDeptSmails.value)
		if (
			selectedDept.value !== undefined &&
			selectedDept.value !== '' &&
			selectedDept.value > 0 &&
			selectedDepts.value.length > 0
		) {
			if (selectedDepts.value[selectedDept.value]) {
				selectedTags.value.push(...[selectedDepts.value[selectedDept.value].fileExtendName])
				selectedTagKeys.value.push({
					listType: 0,
					key: 'collegeId',
					index: selectedDept.value,
					name: selectedDepts.value[selectedDept.value].name,
					id: selectedDepts.value[selectedDept.value].id
				})
				queryData['collegeId'] = selectedDepts.value[selectedDept.value].id
			}
		}
		if (
			selectedDeptBig.value !== undefined &&
			selectedDeptBig.value !== '' &&
			selectedDeptBig.value > 0 &&
			selectedDeptBigs.value.length > 0
		) {
			if (selectedDeptBigs.value[selectedDeptBig.value]) {
				selectedTags.value.push(...[selectedDeptBigs.value[selectedDeptBig.value].name])
				selectedTagKeys.value.push({
					listType: 1,
					key: 'collegeTwoId',
					index: selectedDeptBig.value,
					name: selectedDeptBigs.value[selectedDeptBig.value].name,
					id: selectedDeptBigs.value[selectedDeptBig.value].id
				})
				queryData['collegeTwoId'] = selectedDeptBigs.value[selectedDeptBig.value].id
			}
		}
		console.log('selectedDeptSmail', selectedDeptSmail.value, selectedDeptSmails.value)
		if (
			selectedDeptSmail.value !== undefined &&
			selectedDeptSmail.value !== '' &&
			selectedDeptSmail.value > 0 &&
			selectedDeptSmails.value.length > 0
		) {
			if (selectedDeptSmails.value[selectedDeptSmail.value]) {
				selectedTags.value.push(...[selectedDeptSmails.value[selectedDeptSmail.value].name])
				selectedTagKeys.value.push({
					listType: 2,
					key: 'collegeThreeId',
					index: selectedDeptSmail.value - 1,
					name: selectedDeptSmails.value[selectedDeptSmail.value].name,
					id: selectedDeptSmails.value[selectedDeptSmail.value].id
				})
				queryData['collegeThreeId'] = selectedDeptSmails.value[selectedDeptSmail.value].id
			}
		}

		if (
			selectedTypeBig.value !== undefined &&
			selectedTypeBig.value !== '' &&
			selectedTypeBig.value > 0 &&
			selectedTypesBig.value.length > 0
		) {
			if (selectedTypesBig.value[selectedTypeBig.value]) {
				selectedTags.value.push(...[selectedTypesBig.value[selectedTypeBig.value].name])
				selectedTagKeys.value.push({
					listType: 3,
					key: 'resourceType',
					index: selectedTypeBig.value,
					name: selectedTypesBig.value[selectedTypeBig.value].name,
					id: selectedTypesBig.value[selectedTypeBig.value].id
				})
				queryData['resourceType'] = selectedTypesBig.value[selectedTypeBig.value].id
			}
		}
		if (
			selectedType.value !== undefined &&
			selectedType.value !== '' &&
			selectedType.value > 0 &&
			selectedTypes.value.length > 0
		) {
			if (selectedTypes.value[selectedType.value]) {
				selectedTags.value.push(...[selectedTypes.value[selectedType.value].name])
				selectedTagKeys.value.push({
					listType: 4,
					key: 'resourceTwoType',
					index: selectedType.value,
					name: selectedTypes.value[selectedType.value].name,
					id: selectedTypes.value[selectedType.value].id
				})
				queryData['resourceTwoType'] = selectedTypes.value[selectedType.value].id
			}
		}
		if (
			selectedFormat.value !== undefined &&
			selectedFormat.value !== '' &&
			selectedFormat.value > 0 &&
			selectedFormats.value.length > 0
		) {
			if (selectedFormats.value[selectedFormat.value]) {
				selectedTags.value.push(...[selectedFormats.value[selectedFormat.value].fileExtendName])
				selectedTagKeys.value.push({
					listType: 5,
					key: 'suffix',
					index: selectedFormat.value,
					name: selectedFormats.value[selectedFormat.value].fileExtendName,
					id: selectedFormats.value[selectedFormat.value].id
				})
				queryData['suffix'] = selectedFormats.value[selectedFormat.value].fileExtendName
			}
		}
		// if (selectedCourse.value !== '全部') {
		// 	selectedTags.value.push(...[selectedCourse.value])
		// 	selectedTagKeys.value.push('Course')
		// }

		// if (selectedType.value !== '全部') {
		// 	selectedTags.value.push(...[selectedType.value])
		// 	selectedTagKeys.value.push('Type')
		// }
		// if (selectedFormat.value !== '全部') {
		// 	selectedTags.value.push(...[selectedFormat.value])
		// 	selectedTagKeys.value.push('Format')
		// }
		console.log('筛选条件', selectedTags.value, selectedTagKeys.value)

		EventBus.emit('upLoadList', queryData)
	}

	// 删除已选条件
	const handleTagClose = (tag, index) => {
		// if (tag === selectedDept.value) {
		// 	selectedDept.value = '全部'
		// } else if (tag === selectedCourse.value) {
		// 	selectedCourse.value = '全部'
		// } else if (tag === selectedType.value) {
		// 	selectedType.value = '全部'
		// } else if (tag === selectedFormat.value) {
		// 	selectedFormat.value = '全部'
		// }
		if (tag.key == 'suffix') {
			Format.value.setClean(-1)
			selectedFormat.value = -1
		}
		if (tag.key == 'resourceTwoType') {
			Type.value.setClean(-1)
			selectedType.value = -1
		}
		if (tag.key == 'resourceType') {
			Type.value.setClean(-1)
			selectedType.value = -1
			TypeBig.value.setClean(-1)
			selectedTypeBig.value = -1
		}
		if (tag.key == 'collegeThreeId') {
			Smail.value.setClean(-1)
			selectedDeptSmail.value = -1
		}
		if (tag.key == 'collegeTwoId') {
			Smail.value.setClean(-1)
			selectedDeptSmail.value = -1
			Big.value.setClean(-1)
			selectedDeptBig.value = -1
		}
		if (tag.key == 'collegeId') {
			Smail.value.setClean(-1)
			selectedDeptSmail.value = -1
			Big.value.setClean(-1)
			selectedDeptBig.value = -1
			Dept.value.setClean(-1)
			selectedDept.value = -1
		}
		console.log('要删除的东西', tag)

		updateSelectedTags()
	}
	const handleTagCloseAll = () => {
		// if (tag === selectedDept.value) {
		// 	selectedDept.value = '全部'
		// } else if (tag === selectedCourse.value) {
		// 	selectedCourse.value = '全部'
		// } else if (tag === selectedType.value) {
		// 	selectedType.value = '全部'
		// } else if (tag === selectedFormat.value) {
		// 	selectedFormat.value = '全部'
		// }
		Format.value.setClean(-1)
		selectedFormat.value = -1

		Type.value.setClean(-1)
		selectedType.value = -1

		Type.value.setClean(-1)
		selectedType.value = -1
		TypeBig.value.setClean(-1)
		selectedTypeBig.value = -1

		Smail.value.setClean(-1)
		selectedDeptSmail.value = -1
		Smail.value.setClean(-1)
		selectedDeptSmail.value = -1
		Big.value.setClean(-1)
		selectedDeptBig.value = -1
		Smail.value.setClean(-1)
		selectedDeptSmail.value = -1
		Big.value.setClean(-1)
		selectedDeptBig.value = -1
		Dept.value.setClean(-1)
		selectedDept.value = -1
		// console.log('要删除的东西', tag)

		updateSelectedTags()
	}
	const handleClean = () => {
		selectedTags.value = []
		selectedDept.value = '全部'
		selectedCourse.value = '全部'
		selectedType.value = '全部'
		selectedFormat.value = '全部'
		selectedDeptBigs.value = []
		// Dept.value.setClean('全部')
		// Big.value.setClean(selectedDeptBigs.value[0])
		// Smail.value.setClean(selectedDeptSmails.value[0])
		// Course.value.setClean('全部')
		// Type.value.setClean('全部')
		// Format.value.setClean('全部')
		spinningSelectedDepts.value = true
		collegeApi.treeAll().then((data) => {
			selectedDepts.value = data
			selectedDepts.value.forEach((item) => {
				selectedDeptBigsList.value.push(item.children)
				if (item.children) {
					item.children.forEach((item) => {
						if (item.children) {
							selectedDeptSmailsList.value.push(item.children)
						}
					})
				}
			})
			spinningSelectedDepts.value = false
			console.log('看看最小的', selectedDeptSmailsList.value)
			// Dept.value.setClean(0)
			// handleSelectedDept(0)
			// handleSelectedCourses(0)
		})
		spinningSelectedTypesBig.value = true
		getQueryTreeAll().then((data) => {
			selectedTypesBig.value = data.data
			selectedTypesBig.value.forEach((item) => {
				selectedTypesBigList.value.push(item.children)
				if (item.children) {
					item.children.forEach((item) => {
						if (item.children) {
							selectedTypesList.value.push(item.children)
						}
					})
				}
			})
			spinningSelectedTypesBig.value = false
		})
		spinningSelectedFormats.value = true
		getAllListFileFormat().then((data) => {
			selectedFormats.value = data.data
			spinningSelectedFormats.value = false
		})

		// selectedDepts.value.unshift({ name: '全部' })
		// selectedDeptBigsList.value.unshift({ name: '全部' })
		// selectedDeptSmailsList.value.unshift({ name: '全部' })
		// console.log('看看呢', selectedDepts.value)
		// updateSelectedTags()
	}

	onMounted(() => {
		// 初始化已选条件
		handleClean()
	})
</script>

<style scoped>
	.filter-bar {
		border: 1px solid #00000011; /* 灰色细边框 */
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 5px;
		padding-bottom: 20px;
	}

	.filter-group {
		display: flex;
	}
	.filter-group-title {
		color: rgba(0, 0, 0, 0.521);
		font-size: 12px;
		min-width: 80px;
		margin-top: 10px;
	}

	.line {
		width: 100%;
		height: 0.25px;
		background-color: #00000013;
	}
	.clean {
		color: rgb(133, 183, 224);
		cursor: pointer;
	}
</style>