<template>
	<view class="courseList">
		<view class="sortbox">
			<view class="item" @click="change(0,0)" :style="{ color: msg.OrderBy == 0 || msg.OrderBy==7 ? mainColor : '#222' }"
			 style="display: flex; justify-content: center;">
				<text>综合</text>
				<u-icon v-if="msg.OrderBy==0||msg.OrderBy==7" :name="msg.OrderBy == 7 ? 'descending' : 'ascending'" size="36" :color="msg.OrderBy == 0 || msg.OrderBy == 7 ? mainColor : '#222'"></u-icon>
			</view>
			<view class="item" @click="change(1,1)" :style="{ color: msg.OrderBy == 1 || msg.OrderBy == 5 ? mainColor : '#222' }"
			 style="display: flex; justify-content: center;">
				<text>时间</text>
				<u-icon v-if="msg.OrderBy==1||msg.OrderBy==5" :name="msg.OrderBy == 1 ? 'descending' : 'ascending'" size="36" :color="msg.OrderBy == 1 || msg.OrderBy == 5 ? mainColor : '#222'"></u-icon>
			</view>
			<view class="item" :style="{ color: msg.OrderBy == 2 || msg.OrderBy==3 ? mainColor : '#222' }" style="display: flex; justify-content: center;"
			 @click="change(2,2)">
				<text>价格</text>
				<u-icon v-if="msg.OrderBy==2||msg.OrderBy==3" :name="msg.OrderBy == 3 ? 'descending' : 'ascending'" size="36" :color="msg.OrderBy == 2 || msg.OrderBy==3 ? mainColor : '#222'"></u-icon>
			</view>
			<view class="item" @click="change(4,3)" :style="{ color: msg.OrderBy == 4 || msg.OrderBy == 6 ? mainColor : '#222' }"
			 style="display: flex; justify-content: center;">
				<text>销量</text>
				<u-icon v-if="msg.OrderBy==4||msg.OrderBy==6" :name="msg.OrderBy == 4 ? 'descending' : 'ascending'" size="36" :color="msg.OrderBy == 4 || msg.OrderBy == 6 ? mainColor : '#222'"></u-icon>
			</view>
		</view>
		<view v-if="g.length > 0" style="
        height: calc(100vh - 50px);
        width: 100%;
        overflow: hidden;
		background: #FFF;
      ">
			<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true" :scroll-top="scrollTop"
			 @scroll="scroll" style="height: 100%; padding-bottom: 0px;">
				<goodlist :list="g"></goodlist>
				<u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
				 :margin-bottom="20" bg-color="#FFF" />
			</scroll-view>
		</view>
		<view v-if="!loading && g.length== 0 " style="
		  height: calc(100vh - 50px);
		  width: calc(100vw - 20px);
		  padding-top: 10px;
		">
			<u-empty text="没有找到课程信息" font-size="36" mode="list" ></u-empty>
		</view>
		<!-- <view class="quick" v-if="!loading">
			<view class="item">
				<u-icon name="cart-o" size="48" color="#333" />
			</view>
			<view class="item" @click="goTop">
				<u-icon name="arrow-up" size="48" color="#333" />
			</view>
		</view> -->
	</view>
</template>

<script>
	import goodlist from '@/components/school/list.vue'
	export default {
		data() {
			return {
				status: "loadmore",
				sortStatus: 1,
				mainColor: "",
				isover: false,
				loading: true,
				page: 1,
				page_count: 1,
				g: [],
				sort: 1,
				sortType: -1,
				catId: 0,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多商品了",
				},
				showLoading: false,
				sortShowType: 1,
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				coupon_id: 0,
				msg: {
					pageIndex: 1,
					pageSize: 10,
					Name: '',
					GoodsType: 0,
					CategoryIds: '',
					OrderBy: 1,
					GoodsPageType:0
				},
				newsortType: 1,
			};
		},
		components: {
			goodlist
		},
		onLoad(option) {
			this.mainColor = this.$uiConfig.mainColor;
			this.catId = option.cat_id;
			if (option && option.coupon_id && option.UseType) {//课程卡带过来的参数
				console.log(option.coupon_id)
				if(option.UseType==1){
					this.msg.CategoryIds = option.coupon_id 
				}else if(option.UseType==2){
					this.msg.GoodsIds = option.coupon_id 
				}
				
				
			}
			if (option.CategoryIds) {
				this.msg.CategoryIds = option.CategoryIds;
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop;
				this.$nextTick(function() {
					this.scrollTop = 0;
				});
			},
			change(sort, t) {
				//综合
				if (t == 0) {
					if (this.msg.OrderBy == 7) {
						this.msg.OrderBy = 0; //升序
					} else {
						this.msg.OrderBy = 7; //降序
					}
				}
				//时间
				if (t == 1) {
					if (this.msg.OrderBy == 1) {
						this.msg.OrderBy = 5; //升序
					} else {
						this.msg.OrderBy = 1; //降序
					}
				}
				//价格
				if (t == 2) {
					if (this.msg.OrderBy == 3) {
						this.msg.OrderBy = 2; //升序
					} else {						
						this.msg.OrderBy = 3; //降序
					}
				}
				//销量
				if (t == 3) {
					if (this.msg.OrderBy == 4) {
						this.msg.OrderBy = 6; //升序
					} else {
						this.msg.OrderBy = 4; //降序
					}
				}
				this.g = [];
				this.msg.pageIndex = 1
				this.init();
			},
			init() {
				this.isover = false;
				this.loading = true;
				this.showLoading = this.msg.pageIndex != 1;				
				this.msg.GoodsPageType = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo").UserPageType:0;
				this.request2({
						url: '/api/AppletSchool/GetAppletCoursePageList',
						data: this.msg
					},
					res => {
						this.loading = false;
						this.isloading = false;
						if (res.resultCode == 1) {
							res.data.pageData.forEach(x => {
								x.marketingLogo = JSON.parse(x.marketingLogo)
							})
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.isover = true;
								this.status = "nomore";
							} else {
								this.status = "loadmore";
							}
						}

						uni.hideNavigationBarLoading();
					}
				);
			
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.status = "loading";
					this.msg.pageIndex++;
					this.init();
				} else {
					this.isover = true;
					this.status = "nomore";
				}
			},
			clickHandler(u) {
				console.log(u)
				uni.navigateTo({
					url: u,
				});
			},
		},
	};
</script>

<style>
	.courseList {
		height: 100%;
		background: #f5f5f5;
		position: relative;
	}

	.courseList .quick {
		right: 50rpx;
		bottom: 50rpx;
		position: absolute;
	}

	.courseList .quick .item {
		background: #fff;
		border: 1px solid #aaa;
		height: 90rpx;
		width: 90rpx;
		color: #333;
		border-radius: 90rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.courseList .sortbox {
		display: flex;
		background: #fff;
	}

	.courseList .sortbox .item {
		height: 40px;
		line-height: 40px;
		flex: 1;
		text-align: center;
	}
</style>
