<template>
	<div class="filter-wrap">
		<div class="filter-item" v-show="!isShowSchoolBank">
			<span class="filter-title">{{$t('evaluation.filter.origin')}}:</span>
			<RadioGroup v-model="filterOrigin" type="button" @on-change="filterOriginChange">
				<Radio :label="schoolCode" v-if="isShowSchoolBank">{{$t('evaluation.filter.schoolBank')}}</Radio>
				<Radio :label="userId">{{$t('evaluation.filter.privateBank')}}</Radio>
				<Radio :label="schoolCode" v-if="!isShowSchoolBank && hasSchool">{{$t('evaluation.filter.schoolBank')}}</Radio>
			</RadioGroup>
		</div>
		<div class="filter-item" v-show="(isShowSchoolBank || (filterOrigin === schoolCode)) &&  hasSchool">
					<span class="filter-title">{{$t('evaluation.filter.period')}}:</span>
					<RadioGroup v-model="filterPeriod" type="button" @on-change="filterPeriodChange">
						<Radio v-for="(item, index) in periodList" :key="index" :label="index">{{ item.name }}<span class="filter-count"></span></Radio>
					</RadioGroup>
				</div>
				<div class="filter-item" v-show="(isShowSchoolBank || (filterOrigin === schoolCode)) &&  hasSchool">
					<span class="filter-title">{{$t('evaluation.filter.grade')}}:</span>
					<CheckboxGroup v-model="filterGrade" border @on-change="filterGradeChange">
						<Checkbox lable="all">{{$t('evaluation.filter.all')}}</Checkbox>
						<Checkbox v-for="(item, index) in gradeList" :key="index" :label="index">{{ item }}<span class="filter-count"></span></Checkbox>
					</CheckboxGroup>
				</div>
				<div class="filter-item" v-show="(isShowSchoolBank || (filterOrigin === schoolCode)) &&  hasSchool">
					<span class="filter-title">{{$t('evaluation.filter.subject')}}:</span>
					<CheckboxGroup v-model="filterSubject" border @on-change="filterSubjectChange">
						<Checkbox lable="all">{{$t('evaluation.filter.all')}}</Checkbox>
						<Checkbox v-for="(item, index) in subjectList" :key="index" :label="item.id">{{ item.name }}<span class="filter-count"></span></Checkbox>
					</CheckboxGroup>
				</div>
		<div class="filter-item">
			<span class="filter-title">{{$t('evaluation.filter.sort')}}:</span>
			<RadioGroup v-model="filterSort" type="button" @on-change="filterSortChange">
				<Radio label="createTime">{{$t('evaluation.filter.createTime')}}
					<Icon type="md-arrow-round-down" />
				</Radio>
				<Radio label="useCount">{{$t('evaluation.filter.useCount')}}
					<Icon type="md-arrow-round-down" />
				</Radio>
			</RadioGroup>
		</div>
	</div>
</template>
<script>
	export default {
		components: {},
		props: {
			period: {
				type: String,
				default: "",
			},
			subject: {
				type: String,
				default: "",
			},
			isFilterPaper: {
				type: Boolean,
				default: false,
			},
			filterCounts:{
				type:Object,
				default:() => {}
			}
		},
		data() {
			return {
				userId: "",
				schoolCode: "",
				schoolInfo: {},
				isShowSchoolBank: false,
				isShowUploadList: false,
				exersicesType: this.$GLOBAL.EXERCISE_TYPES(),
				exersicesDiff: this.$GLOBAL.EXERCISE_DIFFS(),
				exersicesField: this.$GLOBAL.EXERCISE_LEVELS(),
				diffColors: ["#32CF74", "#E8BE15", "#F19300", "#EB5E00", "#D30000"],
				filterType: ["all"],
				filterOrigin: "",
				filterDiff: ["all"],
				filterField: ["all"],
				filterSort: "createTime",
				filterPeriod: 0,
				filterGrade: [false],
				filterSubject: [false],
				collapseList: [],
				periodList: [],
				gradeList: [],
				subjectList: [],
				filterParams: {},
			};
		},
		created() {
			this.isShowSchoolBank = this.$route.name === "schoolBank";
			this.userId = this.$store.state.userInfo.TEAMModelId;
			this.getSchoolInfo();
			this.$EventBus.$on("showSchoolBank", (val) => {
				if (val) {
					this.isShowSchoolBank = val;
					this.filterOrigin = this.schoolCode;
				} else {
					this.isShowSchoolBank = false;
					this.filterOrigin = this.$store.state.userInfo.TEAMModelId;
				}
			});
		},
		methods: {
			/** 获取区班校信息 */
			getSchoolInfo() {
				this.$store.dispatch("user/getSchoolProfile").then((res) => {
					let schoolBaseInfo = res.school_base;
					if (schoolBaseInfo) {
						this.schoolInfo = schoolBaseInfo;
						this.schoolCode = schoolBaseInfo.id;
						this.userId = this.$store.state.userInfo.TEAMModelId;
						this.filterOrigin = this.isShowSchoolBank ?
							this.$store.state.userInfo.schoolCode :
							this.$store.state.userInfo.TEAMModelId;
						this.periodList = schoolBaseInfo.period;
						if (schoolBaseInfo.period.length) {
							this.gradeList = schoolBaseInfo.period[0].grades;
							this.subjectList = schoolBaseInfo.period[0].subjects;
						}
					}
					this.doFilter();
				}).catch(err => {
					console.log(err)
					this.doFilter();
				})
			},

			/** 执行筛选条件获取数据 */
			doFilter(filterKey) {
				/** 定义查询接口的参数规格 */
				this.filterParams = {
					filterSort: this.filterSort,
					code: (this.isShowSchoolBank || (this.filterOrigin === this.schoolCode)) ? this.$store.state.userInfo.schoolCode :
						this.$store.state.userInfo.TEAMModelId,
					periodId: (this.isShowSchoolBank || (this.filterOrigin === this.schoolCode)) && this.periodList.length ? [this.periodList[
						this.filterPeriod].id] : [],
					gradeIds: (this.isShowSchoolBank || (this.filterOrigin === this.schoolCode)) ?
						this.deleteFalse(this.filterGrade).map(i => i + '') : [],
					subjectId: (this.isShowSchoolBank || (this.filterOrigin === this.schoolCode)) ?
						this.deleteFalse(this.filterSubject) : [],
					level: this.deleteFalse(this.filterDiff),
					type: this.deleteFalse(this.filterType),
					field: this.deleteFalse(this.filterField)
				};

				this.$emit("onChange", {
					params:this.filterParams,
					key:filterKey
				});
			},

			/**
			 * 筛选学段条件
			 * @param val
			 */
			filterPeriodChange(val) {
				// this.filterPeriod = this.periodList[val].periodCode
				this.gradeList = this.schoolInfo.period[val].grades;
				this.subjectList = this.schoolInfo.period[val].subjects;
				this.filterGrade = [false];
				this.filterSubject = [false];
				this.doFilter('period');
			},

			/**
			 * 筛选年级
			 * @param val
			 */
			filterGradeChange(val) {
				if (val.length > 1 && val.indexOf(false) === 0) {
					this.filterGrade.splice(val.indexOf(false), 1);
				} else if (val.indexOf(false) > -1 || val.length === 0) {
					this.filterGrade = [false];
				}
				this.doFilter('grade');
			},

			/**
			 * 筛选科目
			 * @param val
			 */
			filterSubjectChange(val) {
				if (val.length > 1 && val.indexOf(false) === 0) {
					this.filterSubject.splice(val.indexOf(false), 1);
				} else if (val.indexOf(false) > -1 || val.length === 0) {
					this.filterSubject = [false];
				}
				this.doFilter('subject');
			},

			/**
			 * 根据题库加载题目
			 * @param val
			 */
			filterOriginChange(origin) {
				this.filterOrigin = origin;
				this.doFilter();
			},

			/**
			 * 筛选题型
			 * @param val
			 */
			filterTypeChange(val) {
				if (val.length > 1 && val.indexOf("all") === 0) {
					this.filterType.splice(val.indexOf("all"), 1);
				} else if (val.indexOf("all") > -1 || val.length === 0) {
					this.filterType = ["all"];
				}
				this.doFilter();
			},

			/**
			 * 筛选难度
			 * @param val
			 */
			filterDiffChange(val) {
				if (val.length > 1 && val.indexOf("all") === 0) {
					this.filterDiff.splice(val.indexOf("all"), 1);
				} else if (val.indexOf("all") > -1 || val.length === 0) {
					this.filterDiff = ["all"];
				}
				this.doFilter();
			},

			/**
			 * 筛选认知层次
			 * @param val
			 */
			filterFieldChange(val) {
				if (val.length > 1 && val.indexOf("all") === 0) {
					this.filterField.splice(val.indexOf("all"), 1);
				} else if (val.indexOf("all") > -1 || val.length === 0) {
					this.filterField = ["all"];
				}
				this.doFilter();
			},

			/**
			 * 排序条件更换
			 * @param val
			 */
			filterSortChange(val) {
				this.doFilter(1);
			},

			/**
			 * 删除筛选条件里面的False值与All值
			 * @param arr
			 */
			deleteFalse(arr) {
				let list = JSON.parse(JSON.stringify(arr));
				list.forEach((item, index) => {
					if ((!item || item === "all") && item !== 0 ) list.splice(index, 1);
				});
				return list;
			},
		},

		mounted() {},
		computed: {
			hasSchool() {
				let user = JSON.parse(
					decodeURIComponent(localStorage.user_profile, "utf-8")
				);
				return (
					user.schools &&
					user.schools.length &&
					user.schools.filter((i) => i.status === "join").length > 0
				);
			},
		},
	};
</script>

<style scoped>
	.filter-wrap {
		width: 100%;
		padding: 20px;
		background: #fff;
	}

	.filter-wrap .filter-item:first-child {
		margin-top: 0px;
	}

	.filter-wrap .filter-item {
		margin-top: 10px;
		display: flex;
	}

	.filter-wrap .filter-title {
		font-size: 16px;
		font-weight: bold;
		margin-right: 10px;
		min-width: 40px;
	}

	.filter-wrap .ivu-radio-group {
		padding-bottom: 4px;
	}

	.filter-wrap .ivu-radio-wrapper {
		padding: 0 10px;
		margin-left: 15px;
		height: 28px;
		line-height: 28px;
		box-shadow: none !important;
		border: none !important;
		font-size: 14px;
		border-radius: 0 !important;
	}

	.filter-wrap .ivu-radio-wrapper .ivu-icon {
		margin-bottom: 2px;
	}

	.filter-wrap .ivu-radio-wrapper:after,
	.ivu-radio-group-button .ivu-radio-wrapper:before {
		content: none;
	}

	.filter-wrap .ivu-radio-group-item {
		border-radius: 5px !important;
	}

	.filter-wrap .ivu-radio-wrapper-checked {
		background: rgb(16, 171, 231);
		box-shadow: none !important;
		color: white;
	}

	.filter-wrap .ivu-radio-group-button .ivu-radio-wrapper-checked:hover {
		color: #fff !important;
	}

	.filter-wrap .ivu-checkbox-group {
		padding-bottom: 4px;
		display: inline-block;
	}

	.filter-wrap .ivu-checkbox-inner,
	.filter-wrap .ivu-checkbox-checked,
	.filter-wrap .ivu-checkbox {
		display: none;
	}

	.filter-wrap .ivu-checkbox-wrapper {
		padding: 0 10px;
		margin-left: 15px;
		height: 28px;
		line-height: 28px;
		box-shadow: none !important;
		border: none !important;
		font-size: 14px;
		border-radius: 0 !important;
	}

	.filter-wrap .ivu-checkbox-wrapper .ivu-icon {
		margin-bottom: 2px;
	}

	.filter-wrap .ivu-checkbox-wrapper:after,
	.ivu-checkbox-group-button .ivu-checkbox-wrapper:before {
		content: none;
	}

	.filter-wrap .ivu-checkbox-group-item {
		border-radius: 5px !important;
	}

	.filter-wrap .ivu-checkbox-wrapper-checked {
		background: rgb(16, 171, 231);
		box-shadow: none !important;
		color: white;
	}

	.filter-wrap .ivu-checkbox-group-button .ivu-checkbox-wrapper-checked:hover {
		color: #fff !important;
	}
</style>
