<template>
	<view class="container">
		<view class="totalCount">共 {{pages.total}} 条数据</view>
		<u-list>
				<u-list-item
					v-for="(item, index) in indexList"
					:key="index">
					<view class="cell_item" @click="goPage('/pages/detail/index?id='+item.id)">
						 <u-row justify="space-between" customStyle="margin-bottom: 10px">
								<u-col :span="8">
									<view class="smtitle">{{item.fbdw}}发布</view>
								</u-col>
								<u-col :offset="1" :span="3" style="text-align: right;">
									<text class="classify" v-if="item.xclx=='1'" :class="{'classify1':item.xclx=='1'}">{{item.xclxmc}}</text>
									<text class="classify" v-if="item.xclx=='2'" :class="{'classify2':item.xclx=='2'}">{{item.xclxmc}}</text>
									<text class="classify" v-if="item.xclx=='3'" :class="{'classify3':item.xclx=='3'}">{{item.xclxmc}}</text>
								</u-col>
						</u-row>
						
						<u-row>
							<view class="bigtitle">{{item.xcbt}}</view>
						</u-row>
						
						<u-row class="imagebox" justify="space-between" customStyle="margin-bottom: 10px">
								<u-col  v-for="items in item.file" v-if="item.file&&item.file.length>=2&&item.file.length!=0" span="4">
									<image class="image" :src="items"  mode="widthFix" style="width: 96%;border-radius: 5px;"></image>
								</u-col>
								
								<u-col v-for="items in item.file" v-else span="12">
									<image class="image" :src="items"  mode="widthFix" style="width: 100%;border-radius: 5px;"></image>
								</u-col>
								
								
								<!--<u-col v-for="items in item.file" v-else-if="item.file&&item.file.length==0&&item.video" span="12">
									<image class="image" :src="items"  mode="widthFix" style="width: 100%;border-radius: 5px;"></image>
									<video  class="xwlogo" :src='item.video'
									    @error="videoErrorCallback"
									    controls
									></video>
								</u-col>
								-->
						</u-row>
						
						<u-row>
							<view class="otther">
								完成阅读获 <text style="color: #FF1D1D;">{{item.count}}</text> 积分 · {{item.jf}}浏览
							</view>
						</u-row>
					</view>
				
				</u-list-item>
				<u-list-item>
					<u-loadmore :status="status" />
				</u-list-item>
			</u-list>
		
	</view>
</template>

<script>
	import { getjwtdFfxc} from '@/api/ffxc.js'
	export default {
		data(){
			return{
				status: 'loadmore',
				xclx:'',
				indexList:[],
				pages:{
					size: 10,
					total: 0,
					current:1,
				},
			}
		},
		onReachBottom() {
			this.status = 'loading';
			var _this = this;
			this.init(v)
		},
		onLoad(v) {
			this.init(v)
		},
		methods:{
			init(v){
				uni.showLoading({
					title: '加载中'
				});
				getjwtdFfxc(this.xclx,v.key,this.pages.current).then(res=>{
					this.pages.total = res.data.total
					this.pages.current++
					this.indexList = res.data.records
					if(res.data.records.length<10 ) this.status = 'nomore';
					uni.hideLoading()
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding:24rpx 24rpx 0 24rpx;box-sizing: border-box;
		margin: auto;
		background: #F8F8F8;
		overflow-y: hidden;
		height: 100vh;
		.totalCount{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 32rpx;
			margin: 24rpx 0;
			text-align: center;
		}
			.cell_item{
					width: 100%;
					margin: auto;
					padding: 24rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					border-radius: 24rpx;
					margin-bottom: 15px;
					.smtitle{
						font-weight: 400;
						font-size: 24rpx;
						color: #111111;
						line-height: 32rpx;
						white-space: nowrap; /* 确保文本在一行内显示 */
						  overflow: hidden; /* 隐藏溢出的内容 */
						  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
					}
					.bigtitle{
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #111111;
						line-height: 44rpx;
						text-align: justify;
						font-style: normal;
						padding-bottom: 8px;
					}
					.classify{
						font-weight: 500;
						font-size: 24rpx;
						line-height: 42rpx;
						text-align: right;
						font-style: normal;
						border-radius: 8rpx;
						text-align: center;
						padding: 2px 5px;
						position: relative;
						top: -3px;
						float: right;
					}
					.classify1{
						color: #00A870;
						background: #D7F5EB;
					}
					.classify2{
						color: #ED7B2F;
						background: #FEECDF;
					}
					.classify3{
						color: #E34D59;
						background: #FEE4E7;
					}
					.otther{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 30rpx;
						text-align: left;
						font-style: normal;
						margin-top:0px;
					}
					
					
				}
			
		}
</style>