<template>
	<view>
		<view  @click="showFilter()" style="line-height: 35upx;height: 35upx;padding-right: 20upx;font-size: 26upx;">
			<text style="color: #999999;">筛选</text>
			<image src="../../static/images/filter.png" style="width: 35upx;height: 35upx;vertical-align: middle;"></image>
		</view>
		<u-popup :show="filterShow" mode="right" @close="closeFilter" :safeAreaInsetTop="true" :closeable="true">
			<view :style="`width: ${filterWidth};padding-top: 20px;`" style="height: 100vh; overflow: auto;">
				<view>
					<view class="filter-item">
						<view class="filter-title">课程类型</view>
						<view class="filter-body">
							<view class="filter-option" :class="{'filter-checked':course.type==1}" @click="setCourseFilter('orderType',1)">录播课</view>
							<view class="filter-option" :class="{'filter-checked':course.type==2}" @click="setCourseFilter('orderType',2)">线下课</view>
							<view class="filter-option" :class="{'filter-checked':course.type==2}" @click="setCourseFilter('orderType',2)">线下课</view>
						</view>
						<view class="filter-title">学习进度</view>
						<view class="filter-body">
							<!-- <view class="filter-option" :class="{'filter-checked':course.courseType==10}"  @click="setCourseFilter('courseType',10)">微课</view> -->
							<view class="filter-option" :class="{'filter-checked':course.courseType==20}"  @click="setCourseFilter('courseType',20)">录播课</view>
							<view class="filter-option" :class="{'filter-checked':course.courseType==30}"  @click="setCourseFilter('courseType',30)">面授课</view>
							<view class="filter-option" :class="{'filter-checked':course.courseType==40}"  @click="setCourseFilter('courseType',40)">学习项目</view>
						</view>
					</view>
				</view>
				<view class="filter-footer">
					<view class="filter-footer-reset" @click="resetCourseFilter()"> 重 置 </view>
					<view class="filter-footer-submit" @click="submit()"> 确 定 </view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import apiSysType from '@/api/modules/type.js'
	import apiScence from '@/api/modules/scene.js'
	export default{
		props:{
		},
		data(){
			return{
				courseSysTypeTree:[],
				courseScenceList:[],
				filterShow:false,//是否显示过虑器
				filterWidth:'300px',
				course:{
					type:-1,//表未选中，排序，最新，最热
					courseType:-1,//表未选中
					scenes:[],
					sysType1:'',
					sysType2:'',
					sysType3:''
				},
				article:{ 
					orderType:-1
				},
				qa:{
					orderType:-1,
					isResolve:-1,
					isEssence:-1
				}
			}
		},
		mounted() {
			this.filterWidth=(this.$width-100)+'px'; //右边出来的抽屉宽度控制
			this.loadData();
		},
		computed:{
			filterTags(){ //过滤标签
				let tags=[];
				if(this.type==1){ //课程
					let filters=this.course;
					if(filters.orderType==1){
						tags.push({type:'orderType',text:'最新',value:1})
					}else if(filters.orderType==2){
						tags.push({type:'orderType',text:'最新',value:2})
					}
					if(filters.courseType>-1){
						if(filters.courseType==10){
							tags.push({type:'courseType',text:'微课',value:10})
						}else if(filters.courseType==20){
							tags.push({type:'courseType',text:'录播课',value:20})
						}else if(filters.courseType==30){
							tags.push({type:'courseType',text:'面授课',value:30})
						}else if(filters.courseType==40){
							tags.push({type:'courseType',text:'学习项目',value:40})
						}
					}
					if(filters.scenes.length>0){
						filters.scenes.forEach(sc=>{
							tags.push({type:'scenes',text:sc.name,value:sc.id})
						})
					}
					if(filters.sysType1!=''){
						tags.push({type:'sysType1',text:filters.sysType1.name,value:filters.sysType1.id})
					}
					if(filters.sysType2!=''){
						tags.push({type:'sysType2',text:filters.sysType2.name,value:filters.sysType2.id})
					}
					if(filters.sysType3!=''){
						tags.push({type:'sysType3',text:filters.sysType3.name,value:filters.sysType3.id})
					}
				}else if(this.type==2){
					if(this.article.orderType==1){
						tags.push({type:'orderType',text:'最新',value:1})
					}else if(this.article.orderType==2){
						tags.push({type:'orderType',text:'最新',value:2})
					}
				}else if(this.type==4){
					if(this.qa.orderType==1){
						tags.push({type:'orderType',text:'最新',value:1})
					}else if(this.qa.orderType==2){
						tags.push({type:'orderType',text:'最新',value:2})
					}
					if(this.qa.isResolve==0){
						tags.push({type:'isResolve',text:'待解决',value:false})
					}else if(this.qa.isResolve==1){
						tags.push({type:'isResolve',text:'已解决',value:true})
					}
					if(this.qa.isEssence==1){
						tags.push({type:'isEssence',text:'精华问题',value:true})
					}
				}
				return tags;
			}
		},
		methods:{
			loadData(){
				apiSysType.tree(1).then(rs=>{
					this.courseSysTypeTree=rs.result;
				});
				apiScence.list(1).then(rs=>{
					this.courseScenceList=rs.result;
				});
			},
			showFilter(){
				this.filterShow=true;
			},
			closeFilter(){
				this.filterShow=false;
			},
			checkScence(scence){
				return this.course.scenes.some((sc,scIdx)=>{
					return sc.id==scence.id;
				})
			},
			setArticleFilter(strType,value){
				if(strType=='orderType'){
					this.article.orderType=value;
				}
			},
			setQaFilter(strType,value){
				if(strType=='orderType'){
					this.qa.orderType=value;
				}
				if(strType=='isResolve'){
					this.qa.isResolve=value;
				}
				if(strType=='isEssence'){
					if(this.qa.isEssence==-1){
						this.qa.isEssence=1;
					}else{
						if(this.qa.isEssenc==1){
							this.qa.isEssence=0;
						}else{
							this.qa.isEssence=1;
						}
					}
				}
			},
			setCourseFilter(strType,value){
				if(strType=='orderType'){
					this.course.orderType=value;
				}else if(strType=='courseType'){
					this.course.courseType=value;
				}else if(strType=='scence'){
					//检查是否已存在，如果已存 就去掉，如果不存在就添加
					let hasIdx=-1;
					this.course.scenes.some((sc,scIdx)=>{
						if(sc.id==value.id){
							hasIdx=scIdx;
							return true;
						}else{
							return false;
						}
					})
					if(hasIdx>-1){
						this.course.scenes.splice(hasIdx,1);
					}else{
						this.course.scenes.push({id:value.id,name:value.name});
					}
					
				}else if(strType=='sysType1'){
					this.course.sysType1=value;
				}
			},
			moreFilters(){
				//转向更多
			},
			resetCourseFilter(){
				if(this.type==1){
					this.course.orderType=-1;
					this.course.courseType=-1;
					this.course.scenes=[];
					this.course.sysType1='';
					this.course.sysType2='';
					this.course.sysType3='';
				}else if(this.type==2){
					this.article.orderType=-1;
				}else if(this.type==4){
					this.qa.orderType=-1;
					this.qa.isResolve=-1;
					this.qa.isEssence=-1;
				}
				this.filterShow=false;
				this.$emit('reset');
			},
			submit(){
				this.filterShow=false;
				if(this.type==1){//生成课程查询条件
					let params={
						pageIndex:1,
						pageSize:20,
						name:'',
						keyword:'',
						publish:true,
						device:2,
						type:'',
						sysType1:'',
						sysType2:'',
						sysType3:'',
						scenes:'',
						orderField:'',
						orderAsc:false,
						cateName:''
					}
					if(this.course.orderType==1){
						params.orderField='id';
					}else if(this.course.orderType==2){
						params.orderField='studys';
					}
					if(this.course.courseType>-1){
						params.type=this.course.courseType;
					}
					if(this.course.sysType1!=''){
						params.sysType1=this.course.sysType1.id;
						params.cateName=this.course.sysType1.name;
					}
					if(this.course.sysType2!=''){
						params.sysType2=this.course.sysType2.id;
					}
					if(this.course.sysType3!=''){
						params.sysType3=this.course.sysType3.id;
					}
					if(this.course.scenes.length>0){
						let scids=[];
						this.course.scenes.forEach(sc=>{
							scids.push(sc.id);
						})
						params.scenes=scids.join();
					}
					//let tags=this.getFilterTags();
					
					this.$emit('submit',this.filterTags,params);
				}else if(this.type==2){//生成文章查询条件
					let params={
						pageIndex:1,
						pageSize:20,
						order:''
					}
					if(this.article.orderType>-1){
						params.order=this.article.orderType;
					}
					this.$emit('submit',this.filterTags,params);
				}else if(this.type==4){
					let params={
						pageIndex:1,
						pageSize:20,
						keyword:'',
						isEssence:'',
						isResolve:'',
						orderField:'',
						orderAsc:false,
						status:1
					}
					if(this.qa.orderType==1){
						params.orderField='id';
					}else if(this.qa.orderType==2){
						params.orderField='views';
					}
					if(this.qa.isResolve==0){
						params.isResolve=false;
					}else if(this.qa.isResolve==1){
						params.isResolve=true;
					}
					
					if(this.qa.isEssence==0){
						params.isEssence=false;
					}else if(this.qa.isEssence==1){
						params.isEssence=true;
					}
					
					this.$emit('submit',this.filterTags,params);
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.filter-item{
		padding: 10upx;
		.filter-title{
			padding: 10upx 10upx;
			color: #979797;
		}
		.filter-body{
			padding: 10upx 0upx;
			.filter-option{
				border: 1px solid #cacaca;
				padding: 15upx 20upx;
				display: inline-block;
				text-align: center;
				width: 90px;
				margin: 10upx;
				line-height: 40rpx;
			}
			.filter-checked{
				background-color:#FFB30F;
				color: #FFFFFF;
			}
		}
	}
	.filter-footer{
		display: flex;
		justify-content: center;
		padding-bottom: 30upx;
		padding-top: 20upx;
		.filter-footer-reset{
			margin: 10upx;
			border: 1px solid #FFB30F;
			color:  #FFB30F;
			padding: 20upx 80upx;
			text-align: center;
			border-radius: 40upx;
			line-height: 40rpx;
		}
		.filter-footer-submit{
			margin: 10upx;
			background-color:#FFB30F;
			color:  #FFFFFF;
			padding: 20upx 80upx;
			text-align: center;
			border-radius: 40upx;
			line-height: 40rpx;
		}
	}
</style>
