| 
					
				 | 
			
			
				@@ -0,0 +1,282 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { defineComponent, PropType, computed, ref, nextTick, reactive } from "vue"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { api_musicTagTree, api_musicSheetTag, api_subjectList } from "../../api"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { Popover } from "vant" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import styles from "./index.module.less"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import headImg from "./imgs/headImg.png" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import quedingImg from "./imgs/queding.png" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import quxiaoImg from "./imgs/quxiao.png" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import zhankaiImg from "./imgs/zhankai.png" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import shouqiImg from "./imgs/shouqi.png" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import sjImg from "./imgs/sj.png" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import closeImg from "../../header-top/image/closeImg.png" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import state, { IPlatform } from "/src/state"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { getQuery } from "/src/utils/queryString"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+export default defineComponent({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	name: "filterList", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    emits: ["close", "handleConfirm"], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	setup(props, { emit }) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const query: any = getQuery(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const queryObj = reactive({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            audioPlayTypes:"", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            sheetTag:"", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            course:"", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            grade:"", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            subject: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                name: "", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                id: "" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function handleRefresh(){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            queryObj.audioPlayTypes = "" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            queryObj.sheetTag = "" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            queryObj.course = "" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            queryObj.grade = "" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            queryObj.subject = { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                name: "", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                id: "" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            handleSubjectOne() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function handleConfirm() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            emit("handleConfirm",{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                audioPlayTypes:  queryObj.audioPlayTypes ? queryObj.audioPlayTypes.split(",") : [], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                musicTutorialIds: queryObj.grade ? queryObj.grade : queryObj.course, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                musicTagIds: queryObj.sheetTag, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                musicalInstrumentId: queryObj.subject.id 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // 场景 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const audioPlayTypesOption = [ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            { text: '全部', value: "" }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            { text: '演奏', value: "PLAY" }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            { text: '演唱', value: "SING" }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            { text: '演奏+演唱', value: "PLAY,SING" }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        ] 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function handleSelAudioPlayTypes(item:any){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            queryObj.audioPlayTypes = item.value 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // 获取标签 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        getMusicSheetTag() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const sheetTagObj = ref<any[]>([]) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function getMusicSheetTag(){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            api_musicSheetTag().then(res=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if(res.code === 200){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    sheetTagObj.value = [{ name:"全部",id:""},...res.data] 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function handleSelSheetTag(item:any){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            queryObj.sheetTag = item.id 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // 获取教程和年级 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        getMusicTagTree() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const courseObj = ref<any[]>([]) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const gradeObj = ref<any[]>([]) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function getMusicTagTree(){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            api_musicTagTree().then(res=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if(res.code === 200){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    courseObj.value = [{ name:"全部",id:""},...res.data] 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const isExpand = ref(false) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const computedCourseObj = computed(()=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            return isExpand.value ? courseObj.value : courseObj.value.slice(0,5) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const courseDom = ref<HTMLDivElement>() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const borderBoxConDom = ref<HTMLDivElement>() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function handleExpand(){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            isExpand.value = true 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            nextTick(()=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                const childRect = courseDom.value!.getBoundingClientRect(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                const parentRect = borderBoxConDom.value!.getBoundingClientRect(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                const offsetTop = borderBoxConDom.value!.scrollTop + childRect.top - parentRect.top 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                borderBoxConDom.value!.scrollTo({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    top: offsetTop, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    behavior: 'smooth' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function handleSelCourse(item:any){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            queryObj.course = item.id 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            queryObj.grade = "" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            gradeObj.value = [{ name:"全部", id:""}, ...(item.children || [])] 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function handleSelGrade(item:any){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            queryObj.grade = item.id 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // 获取乐器  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        state.platform === IPlatform.PC && getSubjectList() // 老师端才加载乐器 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const subjectList = ref<any[]>([]) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function getSubjectList(){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            api_subjectList({}).then(res => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if(res.code === 200){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    subjectList.value = [...res.data.map((item:any)=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        return item.instruments.length > 1 ? Object.assign(item,{ isExpand: ref(false) }) : item 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    })] 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    // 赋默认值 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    handleSubjectOne() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function handleSubjectOne(){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if(subjectList.value.length > 0){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                const instruments = subjectList.value.reduce((arr, item) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    arr.push(...item.instruments) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    return arr 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }, []) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                const instrumentId = query.instrumentId 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                // 有id 就用id,没有就默认第一个 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                const instrumentObj = instrumentId ? instruments.find((i: any) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    return i.id === instrumentId 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }) : instruments[0] 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if(instrumentObj){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    queryObj.subject.id = instrumentObj.id 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    queryObj.subject.name = instrumentObj.name 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function isActiveSubjectPop(item:any) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            return item.instruments.some((i:any) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                return i.id === queryObj.subject.id 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function handleSelectPop(item: any) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            queryObj.subject.id = item.id 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            queryObj.subject.name = item.name 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		return () => ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			<div class={[styles.filterList, styles[state.modeType], state.platform === IPlatform.PC && styles.isPc]}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                <div class={[styles.head, "top_draging"]}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    <img class={styles.headTit} src={headImg} /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                <img class={styles.closeImg} src={closeImg} onClick={()=>{ emit("close") }} /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				<div class={styles.borderCon}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    <div class={styles.borderBox}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        <div ref={borderBoxConDom} class={styles.borderBoxCon}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                sheetTagObj.value.length > 1 && 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    <> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        <div class={styles.titCon}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            标签 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        <div class={styles.filterCon}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                sheetTagObj.value.map(item => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                    return <div class={[styles.tabBox, queryObj.sheetTag === item.id && styles.tabActive]} onClick={() => { handleSelSheetTag(item) }}>{item.name}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        </div>   
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    </> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            }                       
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <div class={styles.titCon}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                场景 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <div class={styles.filterCon}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    audioPlayTypesOption.map(item => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        return <div class={[styles.tabBox, queryObj.audioPlayTypes === item.value && styles.tabActive]} onClick={() => { handleSelAudioPlayTypes(item) }}>{item.text}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                courseObj.value.length>1 && 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    <> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        <div ref={courseDom} class={styles.titCon}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            教程 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                isExpand.value &&                           
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                    <div class={styles.shouqiImg} onClick={() => {isExpand.value = false}}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                        收起 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                        <img src={shouqiImg} /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        <div class={[styles.filterCon, styles.courseType]}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                computedCourseObj.value.map(item => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                    return <div class={[styles.tabBox, queryObj.course === item.id && styles.tabActive]} onClick={() => { handleSelCourse(item) }}>{item.name}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                !isExpand.value &&  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                    <div class={[styles.tabBox, styles.zhankaiImg]} onClick={handleExpand}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                        查看更多 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                        <img src={zhankaiImg} /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        </div>  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    </> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                gradeObj.value.length > 1 && 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    <> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        <div class={styles.titCon}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            年级 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        <div class={styles.filterCon}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                gradeObj.value.map(item => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                    return <div class={[styles.tabBox, queryObj.grade === item.id && styles.tabActive]} onClick={() => { handleSelGrade(item) }}>{item.name}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        </div>   
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    </> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            }    
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                subjectList.value.length>1 && queryObj.audioPlayTypes!=='SING' && 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    <> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        <div class={styles.titCon}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            乐器 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        <div class={styles.filterCon}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                subjectList.value.map(item => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                    return item.instruments.length > 1 ?  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                        <Popover 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                            v-model:show={item.isExpand} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                            trigger="click" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                            class={styles.subjectPopover} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                        > 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                            {{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                default: () => ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                    <div class={styles.tabPopoverBox}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                        { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                            item.instruments.map((row: any) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                                return <div class={[styles.tabPopover, queryObj.subject.id === row.id && styles.active]} onClick={() => {  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                                    item.isExpand = false 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                                    handleSelectPop(row)  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                                }}>{row.name}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                            }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                ),                                                                 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                reference: () => ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                    <div class={[styles.tabBox, styles.tabBoxPopCon, isActiveSubjectPop(item) && styles.tabActive]}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                        <div class={[styles.tabBoxPop, item.isExpand && styles.actTabBoxPop]}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                            <div>{isActiveSubjectPop(item)?queryObj.subject.name:item.name}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                            <img class={styles.sjImg} src={sjImg} /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                        </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                                ) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                            }} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                        </Popover>  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                        :  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                        <div class={[styles.tabBox, queryObj.subject.id === item.instruments[0].id && styles.tabActive]} onClick={() => { handleSelectPop(item.instruments[0]) }}>{item.name}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                                }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                        </div>    
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                    </> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                <div class={styles.btnCon}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    <img src={quxiaoImg} onClick={handleRefresh} /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    <img src={quedingImg} onClick={handleConfirm} /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	}, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+}); 
			 |