<template>
	<view class="favoriteStyle" :style="{'height':contentHeight}" v-if="!isloading">
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color='mainColor'></u-tabs>
		<template  >
			<u-empty v-if="current==0&& goodslist.length==0" text="没有任何收藏商品哦~" mode="favor"></u-empty>
			<view  v-if="current==0 && 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-good-list" >
				    <u-row gutter="20">
				      <u-col span="6" v-for="(cx, ci) in goodslist" :key="ci">
				        <view class="good" @click="clickHandler(cx)">
				          <view class="good-img">
				            <image
				              mode="aspectFit"
				              :src="cx.CoverImage"
				              style="width: 100%; height: 100%;"
				            />
				          </view>
				          <view class="good-name">{{ cx.Name }}</view>
				          <view class="good-info">
				            <view class="price" :style="{ color: mainColor }">￥{{
				              cx.SellingPrice
				            }}</view>
				            <view class="sell">已售{{ cx.SalesNum }}件</view>
				            <view class="cart" @click.stop="showSkuHandler(cx)">
				              <u-icon name="cart-o" size="40" :color="mainColor" />
				            </view>
				          </view>
				        </view>
				      </u-col>
				    </u-row>
				  </view>
				  <u-loadmore
				    :status="status"
				    :load-text="loadText"
				    :font-size="24"
				    :margin-top="20"
				    :margin-bottom="20"
				    bg-color="#f3f4f6"
				  />
				</scroll-view>
				<u-empty v-if="current==0&& goodslist.length==0" text="没有任何收藏商品哦~" mode="favor"></u-empty>
			</view>
			<view   v-show="current==1" style="
				height: calc(100vh - 50px);
				width: calc(100vw - 20px);
				margin-left: 10px;
				overflow: hidden;
				padding-top: 10px;
			  ">
				<u-empty v-if="current==1&& topiclist.length==0" text="没有任何收藏主题哦~" mode="favor"></u-empty>
				
			  </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:'',
				list:[
					{name: '商品'},
					{name: '专题'},
				],
				msg:{
					pageIndex: 1,
					pageSize:10,
					Name:''
				},
				sku: {},
				showSku: false,
				goodslist:[],
				topiclist:[],
				current:0,
				page_count:1,
				status: "loadmore",
				loadText: {
				  loadmore: "轻轻上拉，加载更多",
				  loading: "努力加载中",
				  nomore: "没有更多了",
				},
			}
		},
		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,
			 });
		},
		onLoad(){
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
			  this.u = {
				nickName: "未登录",
				avatarUrl: ""
			  };
			  this.showAuth = true;
			}	else{
				this.init();
			}
			
			
		},
		
		methods: {
			// 购物车
			showSkuHandler(g) {
				g.id= g.Id
				console.log('g', g);
				this.sku = g;
				this.showSku = true;
			},
			change(index) {
				this.current = index;
				if(index==1){
					
					this.gettopic()
				}else if(index==0){
					this.msg.pageIndex = 1;
					this.goodslist = [];
					this.init()
				}
			},
			init(){
			
				uni.showLoading({
				    title: '加载中'
				});
				this.request2(
					{
						url: '/api/AppletUser/GetUserCollectionPageList',
						data: this.msg
					},
					res => {
							uni.hideLoading();
						if(res.resultCode==1){
							this.goodslist = this.goodslist.concat(res.data.pageData);
							 this.page_count = res.data.pageCount;
							 if (this.page_count == 1) {
							   this.status = "nomore";
							 }
						}
					}
				);
			},
			gettopic(){ //专题数据
				uni.showLoading({
				    title: '加载中'
				});
				setTimeout(()=>{
					uni.hideLoading();
				},1000)
					
					
			},
			reloadUserinfo() {
			  this.u = uni.getStorageSync("mall_UserInfo");
			  this.showAuth=false;
			  this.init();
			},
			//关闭登录窗口
			gbAuth(){
				uni.navigateBack()
			},
			clickHandler(cx) {
			  uni.navigateTo({
			    url: '/pages/goods/goods?GoodsId='+cx.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>
