<template>
	<el-layout>
		<el-navbar v-model:top="navTop" :placeholder="true" :fixed="true" :autoBack="true" :border="true" title="我的足迹"></el-navbar>
		
		<el-refresh ref="refreshRef" @refresh="refresh" @scrolltolower="scrolltolower" :scrollHeight="getScrollHeight">
			
			<view class="wrapper">
				
				<view class="goods-list">
					<view class="goods-item" v-for="(item,index) in list" :key="index" @click="jump(item)">
						<view class="thumb_image"><image :src="item.photo"></image></view>
						<view class="info">
							<view class="title">{{ item.title }}</view>
							<view class="bottom">
								<view>￥{{ item.price }}</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
		</el-refresh>
		
	</el-layout>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { nextTick,ref,computed } from "vue";
	import { inArray } from "@/el-ui/libs/check";
	import { navigateTo } from "@/el-ui/libs/navigate";
	
	const refreshRef  = ref();
	const navTop 	  = ref(0);
	
	onLoad(()=>{
		nextTick(()=>{
			init();
		})
	});
	
	const jump = (item)=>{
		switch(item.category){
			case 0:
				navigateTo(`pages/goods/view?id=${item.goods_id}`);
				break;
			case 1:
				navigateTo(`pages/activity/group/view?id=${item.activity_id}`);
				break;
			case 2:
				navigateTo(`pages/activity/second/view?id=${item.activity_id}`);
				break;
			case 3:
				navigateTo(`pages/activity/bargain/view?id=${item.activity_id}`);
				break;
			case 4:
				navigateTo(`pages/activity/discount/view?id=${item.activity_id}`);
				break;
			case 5:
				navigateTo(`pages/activity/limit/view?id=${item.activity_id}`);
				break;
			case 6:
				navigateTo(`pages/activity/point/view?id=${item.activity_id}`);
				break;
		}
	}
	
	const list = ref([]);
	const init = async ()=>{
		refreshRef.value?.resetPage();
	}
	
	const getScrollHeight = computed(()=>{
		const { windowHeight } = uni.getSystemInfoSync();
		return (windowHeight - navTop.value);
	})
	
	/**
	 * 下拉刷新
	 */
	const refresh = ()=>{
		init();
	}
	
	/**
	 * 上拉加载
	 */
	const scrolltolower = (data)=>{
		if(refreshRef.value.isMore()) {
			refreshRef.value.loadingPage();
	
			setTimeout(() => {
				uni.$http.get("ucenter.visit/index",{ page: data.page }).then(res=>{
					if(res.code == 1){
						if(data.page == 1) list.value = [];
						refreshRef.value.setData(res.data.total,res.data.list.length);
						list.value = list.value.concat(res.data.list);
					}else if(res.code == -1){
						if(data.page == 1 && res.data.list.length <= 0) list.value = [];
						refreshRef.value.emptyPage();  
					}
				});
			}, 100)
		}
	}
	
</script>

<style lang="scss" scoped>
	.wrapper {
		padding: 20rpx;
		.goods-list {
			width: 100%;
			.goods-item {
				margin-top: 30rpx;
				background-color: #fff;
				border-radius: 10rpx;
				display: flex;
				padding: 20rpx;
				&:first-child { 
					margin-top: 10rpx;
				}
				.thumb_image {
					image {
						width: 200rpx;
						height: 200rpx;
					}
				}
				.info {
					padding-left: 20rpx;
					width: 100%;
					.title {
						height: 80rpx; 
						font-size: 30rpx;
						display: -webkit-box;
						overflow: hidden; 
						word-break:break-all;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 40rpx;
						view {
							font-size: 28rpx;
							&:nth-child(1){
								color: red;
							}
						}
					}
				}
			}
		}
	}
</style>