<style>
	.mycollection .u-collect-list{
		background: #fff;
		padding: 10px 13px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		font-family: aa;
	}
	.mycollection .collect-img{
		width: 125px;
		height: 70px;
		border-radius: 4px;
		box-shadow: 0 4px 10px 1px #D2D2D2;
	}
	.mycollection .collect_right{
		margin-left: 15px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		padding: 3px;
	}
	.mycollection .collect_Name{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 3px;
		font-size: 14px;
		color: #1B1D1E;
	}
	.mycollection .collect_price{
		height:20px;
		text-align: right;
		font-size:16px;
		color:#ff4544;
	}
</style>
<template>
	<view class="mycollection" :style="{'height':contentHeight}" >
		<template v-if="!loading">
			<u-empty v-if="goodslist.length==0" text="没有任何收藏课程哦~" mode="favor"></u-empty>
			<view v-if="goodslist.length>0" style="
				height: calc(100vh - 50px);
				width: calc(100vw - 20px);
				margin-left: 10px;
				overflow: hidden;
				padding-top: 10px;
			  ">
				<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" style="height: 100%; padding-bottom: 0px;">
					<view class="u-collect-list" v-for="(item,index) in goodslist" :key="index" @click="clickHandler(item)">
						<view class="collect-img">
							<image mode="aspectFill" :src="item.CoverImage" style="width: 100%; height: 100%;border-radius: 4px;" ></image>
						</view>
						<view class="collect_right" :style="{'width': (windowWidth -166)+'px'}">
							<view class="collect_Name">{{item.Name}}</view>
							<view class="collect_price">
								<template v-if="item.SellingPrice>0">
									<text style="font-size:13px;">￥</text>{{item.SellingPrice}}
								</template>
								<template v-if="item.SellingPrice==0">
									<text style="font-size:13px;color: #999999;">免费</text>
								</template>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#FFF" />
				</scroll-view>				
				
			</view>
		</template>
		<good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='gbAuth'></auth>
	</view>
</template>

<script>
	import auth from "../../../components/auth/index.vue";
	import goodSku from '../../../components/goods/goodsku.vue';
	export default {
		data() {
			return {
				pageTitle: '课程收藏',
				loading: true,
				contentHeight: 0,
				showAuth: false,
				mainColor: '',
				msg: {
					pageIndex: 1,
					pageSize: 10,
					Name: ''
				},
				sku: {},
				showSku: false,
				goodslist: [],
				page_count: 1,
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				windowWidth:0,
				u:{}
			}
		},
		components: {
			auth,
			goodSku,
		},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + 'px';
			this.mainColor = this.$uiConfig.mainColor;
		},
		mounted() {
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync("basedata") ?
				wx.getStorageSync("basedata").bar_title :
				[];
			pages.forEach((x) => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			this.windowWidth = this.$utils.SystemInfo().windowWidth;
		},
		onLoad() {
			this.u = uni.getStorageSync("mall_UserInfo");
			console.log(!this.u,'UserInfo');
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: ""
				};
				this.showAuth = true;
			} else {
				this.init();
			}
		},
		methods: {
			// 购物车
			showSkuHandler(g) {
				g.id = g.Id
				this.sku = g;
				this.showSku = true;
			},
			init() {
				uni.showLoading({
					title: '加载中'
				});
				this.request2({
						url: '/api/AppletEducation/GetUserCollectionPageList',
						data: this.msg
					},
					res => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							console.log(res,'数据');
							this.goodslist = this.goodslist.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
							this.loading = false;
						}
					}
				);
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				// this.showAuth=false;
				this.init();
			},
			//关闭登录窗口
			gbAuth() {
				uni.navigateBack()
			},
			clickHandler(item) {
			  uni.navigateTo({ url: "/pages/school/courseInfo?GoodsId=" + item.Id });
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {
					this.status = "nomore";
				}
			},
		}
	}
</script>

<style>
	.favoriteStyle {
		background: #f3f4f6;
	}

	.favoriteStyle .u-good-list .good {
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 10px;
	}

	.favoriteStyle .u-good-list .good .good-img {
		width: calc(50vw - 15px);
		height: calc(50vw - 15px);
		display: block;
	}

	.favoriteStyle .u-good-list .good .good-name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 3px;
		font-size: 13px;
		margin: 7px 10px;
		height: 36px;
	}

	.favoriteStyle .u-good-list .good .good-info {
		display: flex;
		margin: 7px 10px;
		margin-top: 0;
		align-items: flex-end;
		padding-bottom: 5px;
	}

	.favoriteStyle .u-good-list .good .good-info .price {
		font-size: 14px;
		color: #ff4544;
		flex: 1;
	}

	.favoriteStyle .u-good-list .good .good-info .sell {
		font-size: 11px;
		color: gray;
		flex: 1;
	}

	.favoriteStyle .u-good-list .good .good-info .cart {
		width: 40rpx;
		text-align: right;
	}
</style>
