<script setup>
	// 引入依赖
	// import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue' 
	// import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue' 
	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"
	// 生命周期
	onLoad(() => {
		getList()
	})
	 // 下拉刷新
	onPullDownRefresh(()=>{
		init()
		getList()
		// setTimeout(function () {
		// 	uni.stopPullDownRefresh();
		// }, 1000);
	}) 
	// 上拉触底
	onReachBottom(()=>{
		queryParams.value.page ++
		getList()
	})
	// 变量
	const queryParams = ref({
		page:1,
		pageSize:10
	})
	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日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
			春发其华，秋收其实。
			共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
			`
		}
	])
	// 方法
	function init() {
		queryParams.page = 1
		queryParams.pageSize = 10
	}
	async function getList(){
		const res = await api.getArticleList(queryParams.value)
	}
	function toDetail(item) {
		let info = encodeURIComponent(JSON.stringify(item))
		// console.log(info)
		uni.navigateTo({
			url:"./detail?info="+info+"&id="+item.id
		})
	}
</script>
<template>
	<view class="articleBox page-box">
		<view class="userInfoBox">
			
		</view>
		<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">
	.articleBox{
		.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>