<script setup>
	import { onLoad,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
	// import mySwiper from "@/components/mySwiper.vue"
	import {ref,onMounted,nextTick} from "vue"
	import {useStore} from '@/store/index.js'
	import api from "@/api/index.js"
	const store = useStore()
	// 生命周期
	onLoad((e) => {
		let userinfo = JSON.parse(store.userInfo)
		// console.log(userinfo)
		queryParams.value.userId = userinfo.userId
		
		getList()
	})
	onPullDownRefresh(()=> { // 下拉刷新
		getList()
	})
	onReachBottom(() => { // 上滑触底
		getList()
	})
	// 变量
	// const user_info = ref(null)
	const list = ref([
		{
			id:1,
			cover_img:'https://gwjxb.oss-cn-chengdu.aliyuncs.com/logo.png',
			title:'金秋相逢 共叙合作',
			reading_num:100,
			content:`
			新华社北京10月18日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
			春发其华，秋收其实。
			共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
			`
		},
		{
			id:2,
			cover_img:'https://ms.bdimg.com/pacific/0/pic/1083217647_-478899572.png?x=0&y=0&h=340&w=510&vh=340.00&vw=510.00&oh=340.00&ow=510.00',
			title:'金秋相逢 共叙合作',
			reading_num:100,
			content:`
			新华社北京10月18日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
			春发其华，秋收其实。
			共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
			`
		}
	])
	const queryParams = ref({
		page:1,
		pageSize:10,
		userId:0
	})
	// 方法
	async function getList() {
		const res = await api.getStarList(queryParams.value)
		
	}
	function toDetail(item) {
		let info = encodeURIComponent(JSON.stringify(item))
		// console.log(info)
		uni.navigateTo({
			url:"/pages/wikipedia/detail?info="+info+"&id="+item.id
		})
	}
</script>
<template>
	<view class="starBox page-box page-bg-gray">
		<view class="list-box">
			<view class="lb-card" v-for="(item,i) in list" @tap="toDetail(item)">
				<view class="lb-left">
					<image :src="item.cover_img" mode="aspectFill"></image>
				</view>
				<view class="lb-right">
					<view class="lb-title">{{item.title}}</view>
					<view class="lb-content text-ellipsis-1 small-text">{{item.content}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.starBox{
		
	}
	.starBox{
		.list-box{
			.lb-card{
				display: flex;
				align-items: center;
				padding: 20rpx;
				border-bottom: 2rpx solid #eaeaea;
				.lb-left{
					image{
						width: 120rpx;
						height: 120rpx;
						margin-right: 20rpx;
					}
				}
				.lb-right{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.lb-title{
						font-weight: 900;
						font-size:32rpx ;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>