<template>
	<view>
		<view  @click="showFilter()" style="line-height: 34upx;height: 35upx;padding-right: 40upx;font-size: 32upx;">
			<!-- <text style="color: #666;font-size: 30rpx;">筛选</text> -->
			<image src="../../static/images/filter.png" style="width: 36upx;height: 36upx;vertical-align: middle;"></image>
		</view>
		<!-- ${filterWidth} -->
		<u-popup :show="filterShow" mode="center" @close="closeFilter" :safeAreaInsetTop="true" :closeable="false">
			<view :style="{width:filterWidth}" style="height: 100vh;padding-top: 32upx; overflow: auto;position: relative;">
				<view v-if="type==1" style="margin-bottom: 400upx;">
					<view class="filter-title-top">
						<u-icon @click="filterShow = false" class="icon" name="arrow-left" color="#333333" size="20"></u-icon>课程分类
					</view>
					<view class="filter-item">
						<view v-if="noOrder" class="filter-title">排序</view>
						<view v-if="noOrder" class="filter-body">
							<view class="filter-option" :class="{'filter-checked':course.orderType==1}" @click="setCourseFilter('orderType',1)">最新</view>
							<view class="filter-option" :class="{'filter-checked':course.orderType==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==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 class="">
							
						</view>
						<view class="filter-title" style="margin-top: 10upx;">内容分类</view>
						<view class="filter-body">
							<view class="filter-option" 
							v-for="sysType in courseSysTypeTree"
							:key="sysType.id"
							:class="{'filter-checked':course.sysType1.id==sysType.id}"  
							@click="setCourseFilter('sysType1',sysType)">{{sysType.name}}</view>
							
							<!-- <view class="filter-option"  @click="toNewLink">U选小课堂</view> -->
						</view>
						<view class="sys-type" v-if="sysTypeTow.length > 0">
							<text class="sys-type-name">{{course.sysType1.name}}</text>
							<view class="sys-type-tow">
								<text class="type-option" v-for="tow in sysTypeTow" :key="tow.id" :class="{'filter-checked':course.sysType2.id==tow.id}" @click="setCourseFilter('sysType2',tow)">{{tow.name}}</text>
							</view>
							<view class="sys-type-three">
								<text class="type-option-three" v-for="three in sysTypeThree" :key="three.id" :class="{'filter-checked':course.sysType3.id==three.id}" @click="setCourseFilter('sysType3',three)">{{three.name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="type==2">
					<view class="filter-item">
						<view v-if="noOrder" class="filter-title">排序</view>
						<view v-if="noOrder" class="filter-body">
							<view class="filter-option" :class="{'filter-checked':article.orderType==1}" @click="setArticleFilter('orderType',1)">最新</view>
							<view class="filter-option" :class="{'filter-checked':article.orderType==2}" @click="setArticleFilter('orderType',2)">最热</view>
						</view>
					</view>
				</view>
				<view v-if="type==4">
					<view class="filter-item">
						 <view v-if="noOrder" class="filter-title">排序</view>
						 <view v-if="noOrder" class="filter-body">
							<view class="filter-option" :class="{'filter-checked':qa.orderType==1}" @click="setQaFilter('orderType',1)">最新</view>
							<view class="filter-option" :class="{'filter-checked':qa.orderType==2}" @click="setQaFilter('orderType',2)">最热</view>
						 </view>
						 <view class="filter-title">是否解决</view>
						 <view class="filter-body">
							<view class="filter-option" :class="{'filter-checked':qa.isResolve==0}" @click="setQaFilter('isResolve',0)">待解决</view>
							<view class="filter-option" :class="{'filter-checked':qa.isResolve==1}" @click="setQaFilter('isResolve',1)">已解决</view>
						 </view>
						 <view class="filter-title">是否精华问题</view>
						 <view class="filter-body">
							<view class="filter-option" :class="{'filter-checked':qa.isEssence==1}" @click="setQaFilter('isEssence',true)">精华问题</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:{
			noOrder:{
				type: Boolean,
				default:true
			},
		    type: {
		      type: Number,
			  required:true
		    },
			filterWidth:{
				type:String,
				default:'100%'
			}
		},
		data(){
			return{
				courseSysTypeTree:[],
				courseScenceList:[],
				filterShow:false,//是否显示过虑器
				// filterWidth:'300px',
				sysTypeTow:[],
				sysTypeThree:[],
				course:{
					orderType:-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:{
			stopRoll(){},
			toNewLink(){
				location.href='https://m.qingxuetang.com/x/?appId=qxtcorp306130';
			},
			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;
					this.sysTypeTow = value.children;
					this.course.sysType2 = {};
					this.course.sysType3={};
					this.sysTypeThree = [];
				}else if(strType=='sysType2'){
					this.course.sysType2=value;
					this.sysTypeThree = value.children;
					this.course.sysType3={};
				}else if(strType=='sysType3'){
					this.course.sysType3=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>
	
	/deep/ .u-popup__content{
		width: 100%;
		// border-radius: 17px 0 0rpx 17px;
	}
	/deep/ .u-icon__icon{
		top: 0px !important;
	}
	.filter-title-top{
		height: 150upx;
		line-height: 150upx;
		text-align: center;
		font-size: 36upx;
		font-weight: 600;
		color: #333333;
		position: relative;
		.icon{
			position: absolute;
			top:50upx;
			left:40upx;
		}
	}
	.filter-item{
		padding: 10upx;
		.filter-title{
			padding: 10upx 18upx;
			color: #333333;
			font-size: 32rpx;
			font-weight: bold;
		}
		.sys-type{
			margin: 20upx;
			padding: 28upx 20upx;
			background: #F7F7F7;
			border-radius: 8upx;
			.sys-type-name{
				margin-left: 12upx;
				font-size: 28upx;
				color: #333333;
				
			}
			.filter-checked{
				color: #387DF7 !important;
			}
			.sys-type-tow{
				margin-top: 40upx;
				.type-option{
					display: inline-block;
					height: 60upx;
					background: #FFFFFF;
					border-radius: 34upx;
					line-height: 60upx;
					text-align: center;
					color: #666666;
					font-size: 28upx;
					padding: 6upx 36upx;
					margin-right: 28upx;
					margin-bottom: 28upx;
				}
			}
			.sys-type-three{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				.type-option-three{
					font-size: 28upx;
					color: #666666;
				}
			}
			
		}
		.filter-body{
			padding: 10upx 32upx;
			// text-align: center;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			
			.filter-option{
				// font-weight: 620;
				// background-color: #000000;
				background-color: #F7F7F7;
				border-radius: 34rpx;
				// border: 1px solid #cacaca;
				padding: 12upx 50upx;
				display: inline-block;
				height: 60rpx;
				text-align: center;
				// width: 180rpx;
				font-size: 26rpx;
				color: #666666;
				margin-bottom: 10upx;
				margin-top: 10upx;
			    box-sizing: border-box;
			}
			.filter-checked{
				// background-color:#feeae9;
				color: #387DF7;
				// margin: 10upx ;
				// box-sizing: border-box;
				// height: 64rpx;
				// border: 1rpx solid #e2331e;
			}
		}
	}
	.filter-footer{
		position: fixed;
		bottom: 126upx;
		left: 0;
		right:0;
		display: flex;
		justify-content: center;
		margin-top: 84upx;
		padding-bottom: 30upx;
		padding-top: 20upx;
		.filter-footer-reset{
			
			margin: 10upx;
			border: 1px solid #FFB30F;
			color:  #FFB30F;
			padding: 20upx 80upx;
			font-size: 24rpx;
			text-align: center;
			border-radius: 40upx;
		}
		.filter-footer-submit{
			padding: 0 68upx;
			// width: 236px;
			height: 96upx;
			line-height: 96upx;
			text-align: center;
			background: linear-gradient(112deg, #5491FD 0%, #2A58FA 100%);
			border-radius: 48upx;
			font-size: 28upx;
			font-weight: 600;
			color: #FFFFFF;
		}
	}
</style>
