<template>
    <div class="base-class-select">
        <RadioGroup v-model="evaluationInfo.scope" @on-change="onClassTypeChange" style="margin-bottom: 10px;">
            <Radio label="private">{{ $t('survey.form.privateClass') }}</Radio>
            <Radio label="school" v-if="hasSchool">{{ $t('survey.form.schoolClass') }}</Radio>
        </RadioGroup>
        <el-cascader v-model="defaultArr" ref="demoCascader"  :key="evaluationInfo.scope" :props="props" :options="evaluationInfo.scope === 'private' ? privateList : schoolList" popper-class="myCascader" @change="treeChange" :show-all-levels="false" clearable filterable></el-cascader>
    </div>
</template>

<script>
export default {
    props: {
        scope: {
            type: String,
            default: 'private'
        },
		classes:{
			type:Array,
			default:() => []
		}
    },
    data() {
        const _this = this
        return {
            schoolBase: {
                period: []
            },
			defaultArr:[],
            courseList: [],
            stuList: [],
			classList:[],
			classIds:[],
            schoolClassList: [],
            evaluationInfo: {
                scope: 'private'
            },
            props: {
                multiple: true,
				emitPath:false,
				value: 'id',
				label: 'name',
            },
			curCusList:[],
			privateList:[],
			schoolList:[],
			preCheckList:[],
			prePeriodId:'',
			privateClassType:'school'
        };
    },
    methods: {
        treeChange(data) {
			if(this.evaluationInfo.scope === 'school'){
				if(!data.length){
					this.$refs.demoCascader.panel.activePath = [];
					this.preCheckList = []
					this.defaultArr = []
				}
				let curCheckType = ''
				let xArr = data.filter(i => !this.preCheckList.includes(i))
				let alreadyType = this.preCheckList.every(i => this.classList.includes(i)) ? 'class' : 'stuList'
				const obj = this.$refs['demoCascader'].getCheckedNodes()
				if(obj.length && xArr.length){
					// 如果切换了学段 则要全部置空 再将最新选择的作为结果
					let curCheckNodePeriod = obj.find(i => i.data.id === xArr[0]).data.courseId
					if(curCheckNodePeriod !== this.prePeriodId){
						this.$refs.demoCascader.panel.activePath = [];
						this.prePeriodId = curCheckNodePeriod
						this.defaultArr = xArr
					}
				}
				if(xArr.length){
					curCheckType = this.classList.includes(xArr[0]) ? 'class' : 'stuList'
				}
				// 如果切换了班级类型 也需要全部置空 再将最新选择的作为结果
				if(alreadyType !== curCheckType && xArr.length){
					this.$refs.demoCascader.panel.activePath = [];
					this.defaultArr = xArr
				}
				console.log(this.defaultArr);
				this.privateClassType = this.defaultArr.every(i => this.classList.includes(i)) ? 'school' : 'private'
				this.preCheckList = this.defaultArr
			}
			this.$emit('onChange', this.defaultArr)
        },
        onClassTypeChange(val) {
			this.defaultArr = []
            this.evaluationInfo.scope = val
        },
		// 获取当前教师所有可以选择的课程（包括个人课程和学校分配给自己的课程）
		async getCourseData(){
			if(this.curCusList.length) return
			this.curCusList = this.$store.state.user.userCourses
			this.privateList = this.curCusList.filter(i => i.scope === 'private')
			this.schoolList = this.curCusList.filter(i => i.scope === 'school')
			this.classList = []
			this.schoolList.forEach(i => {
				this.classList.push(...i.children[0].children.map(j => j.id))
			})
			this.stuList = []
			this.schoolList.forEach(i => {
				this.stuList.push(...i.children[1].children.map(j => j.id))
			})
			console.log(this.classList)
			console.log(this.stuList)
		}
    },
    mounted() {
		this.evaluationInfo.scope = this.scope
		this.$EventBus.$off('onCreateVote')
		this.$EventBus.$on('onCreateVote',() => {
			this.defaultArr = []
		})
		
		this.getCourseData()
    },
    computed: {
		hasSchool() {
		  return this.$store.state.userInfo.hasSchool
		},
    },
	watch:{
		classes:{
			handler(n,o){
				if(n.length){
					console.log('个人班级接收',n);
					setTimeout(() => {
						this.defaultArr = n
						this.preCheckList = n
					},500)
				}
			},
			immediate:true,
			deep:true
		},
		scope:{
			handler(n,o){
				this.evaluationInfo.scope = n
			},
			immediate:true
		}
	}
};
</script>
<style lang="less">
.base-class-select {
    .el-cascader {
        width: 100%;

        .el-input__inner {
            // background-color: #353535;
            border-color: #c2c2c2;
        }
    }
}
</style>
