<template>
	<view class="container" :style="appThemeStyle">
		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption"
			:bottombar="false" @up="upCallback">
			<view class="cate-content">
				<!-- 商品列表 -->
				<view class="goods-list">
					<view class="goods-item--container" v-for="(item, index) in goodsList.data" :key="index">
						<view class="goods-item" @click="onTargetGoods(item.goods_id)">
							<!-- 商品图片 -->
							<view class="goods-item_left">
								<image class="image" :src="item.goods_image"></image>
							</view>
							<view class="goods-item_right">
								<!-- 商品标题 -->
								<view class="goods-name">
									<text class="twoline-hide">{{ item.goods_name }}</text>
								</view>
								<view class="item-prices oneline-hide">
									<text class="goods-sales">已售{{ item.goods_sales }}件</text>
								</view>
								<!-- 商品信息 -->
								<view class="goods-item_desc">
									<view class="desc_footer">
										<view class="item-prices oneline-hide">
											<text class="price_x">¥{{ item.goods_price_min }}</text>
											<!-- 商品销量 -->
											<text v-if="item.line_price_min > 0"
												class="price_y">¥{{ item.line_price_min }}</text>
										</view>
										<!-- <view class="buy-gouwuche">
											<u-button size="mini" @click="handleAddCart(item)">取消收藏
											</u-button>
										</view> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
	import {
		getEmptyPaginateObj,
		getMoreListData,
		setCartTabBadge
	} from '@/core/app'
	import {
		PageCategoryStyleEnum
	} from '@/common/enum/store/page/category'
	import Empty from '@/components/empty'
	import AddCartBtn from '@/components/add-cart-btn'
	import AddCartPopup from '@/components/add-cart-popup'
	import {
		rpx2px
	} from '@/utils/util'
	import * as GoodsApi from '@/api/goods'

	const pageSize = 15

	export default {
		components: {
			MescrollBody,
			Empty,
			AddCartBtn,
			AddCartPopup
		},
		mixins: [MescrollMixin],
		data() {
			return {
				// 枚举类
				PageCategoryStyleEnum,
				// 列表高度
				scrollHeight: 0,
				// 一级分类：指针
				curIndex: -1,
				// 商品列表
				goodsList: getEmptyPaginateObj(),
				// 上拉加载配置
				upOption: {
					// 首次自动执行
					auto: true,
					// 每页数据的数量; 默认10
					page: {
						size: pageSize
					},
					// 数量要大于3条才显示无更多数据
					noMoreSize: 3,
					// 返回顶部
					toTop: {
						right: 30,
						bottom: 48,
						zIndex: 9
					}
				},

				sortPrice: false, // 价格排序 (true高到低 false低到高)
				sortType: 'hot', // 排序类型
			}
		},
		created() {
			// 设置分类列表高度
			this.setListHeight()
		},
		methods: {

			// 切换排序方式
			handleSortType(newSortType) {
				const app = this
				const newSortPrice = newSortType === 'price' ? !app.sortPrice : true
				app.sortType = newSortType
				app.sortPrice = newSortPrice
				// 刷新列表数据
				app.getGoodsList()
			},

			/**
			 * 上拉加载的回调 (页面初始化时也会执行一次)
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			upCallback(page) {
				const app = this
				// 设置列表数据
				console.log(page.num);
				app.getGoodsList(page.num)
					.then(list => {
						const curPageLen = list.data.length
						const totalSize = list.data.total
						app.mescroll.endBySize(curPageLen, totalSize)
					})
					.catch(() => app.mescroll.endErr())
			},

			/**
			 * 获取商品列表
			 * @param {Number} pageNo 页码
			 */
			getGoodsList(pageNo = 1) {
				const app = this
				const categoryId = app.curIndex > -1 ? app.list[app.curIndex].category_id : 0
				const userId = uni.getStorageSync('userId')
				const arr = uni.getStorageSync(`FOOTMARKLIST_${userId}`) || []
				console.log(arr);
				return new Promise((resolve, reject) => {
					GoodsApi.list({
							categoryId,
							page: pageNo,
							footMark: true,
							goodsIds: JSON.stringify(arr)
						}, {
							load: false
						})
						.then(result => {
							const newList = result.data.list
							app.goodsList.data = getMoreListData(newList, app.goodsList, pageNo)
							app.goodsList.last_page = newList.last_page
							resolve(newList)
						})
						.catch(reject)
				})
			},

			// 设置列表内容的高度
			setListHeight() {
				const {
					windowHeight
				} = uni.getSystemInfoSync()
				this.scrollHeight = windowHeight - rpx2px(96)
			},

			// 一级分类：选中分类
			handleSelectNav(index) {
				this.curIndex = index
				this.onRefreshList()
			},

			// 刷新列表数据
			onRefreshList() {
				this.goodsList = getEmptyPaginateObj()
				setTimeout(() => this.mescroll.resetUpScroll(), 120)
			},

			// 跳转至商品列表页
			onTargetGoods(goodsId) {
				this.$navTo('pages/goods/detail', {
					goodsId
				})
			},

			// 点击加入购物车
			handleAddCart(item) {
				GoodsApi.collection({goodsId: item.goods_id}).then(() => {
					this.getGoodsList()
				})
			},

			// 更新购物车角标
			onUpdateCartTabBadge() {
				console.log('onUpdateCartTabBadge')
				setCartTabBadge()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F6F6F6 !important;
	}

	// 分类内容
	.cate-content {
		z-index: 1;
		background-color: #F6F6F6 !important;
		padding-top: 0rpx;
	}

	// 一级分类+二级分类 20
	.cate-left {
		width: 173rpx;
		height: 100%;
		background: #f8f8f8;
		color: #444;

		position: fixed;
		top: calc(286rpx + var(--window-top));
		left: var(--window-left);
		bottom: var(--window-bottom);
	}

	// 左侧一级分类
	.type-nav {
		position: relative;
		height: 90rpx;
		z-index: 10;
		display: block;
		font-size: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		&.selected {
			background: #fff;
			border-right: none;
			font-size: 28rpx;
			color: $main-bg
		}
	}

	// 商品列表
	.goods-list {
		padding: 20rpx;
	}

	.goods-item {
		padding: 28rpx 22rpx;
		display: flex;
		box-sizing: border-box;
		padding: 20rpx;
		border: 1px solid #F6F6F6;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 12rpx;
	}

	.goods-item_left {
		position: relative;
		background: #fff;
		margin-right: 20rpx;

		.image {
			display: block;
			width: 280rpx;
			height: 280rpx;
		}
	}

	.goods-item_right {
		position: relative;
		flex: 1;

		.goods-name {
			display: block;
			width: 100%;
			min-height: 68rpx;
			font-size: 34rpx;
			line-height: 1.3;
			color: #333;
		}
	}

	.goods-item_desc {
		margin-top: 20rpx;

		.people {
			margin-right: 14rpx;
		}

		.desc_footer {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			position: absolute;
			right: 0rpx;
			bottom: 0rpx;
			min-height: 44rpx;

			.item-prices {
				padding-right: 6rpx;

				.price_x {
					margin-right: 14rpx;
					font-weight: 600;
					color: #ff0000;
					font-size: 38rpx;
				}

				.price_y {
					color: #999;
					text-decoration: line-through;
					font-size: 24rpx;
				}
			}

		}
	}

	.goods-sales {
		padding-top: 8rpx !important;
		color: #b3b3b3 !important;
		font-size: 24rpx;
	}

	.search-box {
		display: flex;
		justify-content: space-around;
		background: #fff;
		border-radius: 14rpx;
		padding: 20rpx 4rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.07);
	}

	// 排序组件
	.store-sort {
		margin-top: 24rpx;
		position: sticky;
		top: var(--window-top);
		display: flex;
		padding: 20rpx 0;
		font-size: 28rpx;
		background: #fff;
		color: #000;
		z-index: 99;

		.sort-item {
			flex-basis: 33.3333%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50rpx;

			&.active {
				color: $main-bg;
			}
		}

		.sort-item-price .price-arrow {
			margin-left: 20rpx;
			font-size: 24rpx;
			color: #000;

			.icon {
				&.active {
					color: $main-bg;
				}

				&.up {
					margin-bottom: -16rpx;
				}

				&.down {
					margin-top: -16rpx;
				}
			}

		}

	}
</style>
