<template>
	<view :class="[AppTheme]" class="all_box">
		<scroll-view :scroll-y='true' @scrolltolower="scrolltolower" v-if="gx_list.length > 0">
			<view class="reinitem" v-for="(item, index) in gx_list" :key="index" @click="orderBy(item.id)">
				<view class="leticon">认</view>
				<image :src="item.pic" mode="aspectFill" class="renitem_thu"></image>
				<view class="rightiation_bar">
					<view class="rightiation_bar_p1">{{ item.name }}</view>
					<view class="rightiation_bar_p2">收获：{{ item.bonusway }}</view>
					<view class="rightiation_bar_p3">
						<view class="right_text_p1">已售:</view>
						<view class="right_text_p2 text-primary">{{ item.percent }}%</view>
						<view class="right_text_p1">剩余:</view>
						<view class="right_text_p2 text-primary">{{ item.num }}</view>
					</view>
					<progress :activeColor="primary" :percent="item.percent" stroke-width="3" />
					<view class="rightiation_bar_p3" :show-percent="false"
						style="justify-content: space-between;margin: 15rpx 0 0 0">
						<view class="right_buton_p1 text-primary">￥{{ item.copies_price }}</view>
						<view class="right_buton_p2 bg-primary">进行中</view>
					</view>
				</view>
				<view class="uliline2"></view>
			</view>
		</scroll-view>
		<u-loadmore :line="true" :status="status" />
	</view>
</template>

<script>
	import homeApi from '@/api/home/index.js';
	export default {
		data() {
			return {
				primary:this.$theme.primary,
				status: 'loading',
				gx_list: [],
				p: 1,
				settingFile: getApp().globalData.siteinfo,
				nomorelist: false
			};
		},
		onLoad() {
			this.getInfo();
		},
		onReachBottom() {
			console.log('0000')
			this.p++;
			setTimeout(() => {
				this.getInfo();
			}, 500);
		},
		methods: {
			scrolltolower(){
				console.log('触底了')
			},
			getInfo(p) {
				if (!this.nomorelist) {
					homeApi
						.buyIndex({
							p: this.p,
							type: 1
						})
						.then(res => {
							if (res.status == 200) {
								if (res.data !== null && res.data !== undefined && res.data.length > 0) {
									res.data.forEach(item => {
										this.gx_list.push(item);
									});
									this.p = p;
									if (res.data.length == 10) {
										this.status = "loadmore"
									}else{
										this.status="nomore"
									}
								} else {
									this.status = "nomore"
								}
							} else {
								this.status = "nomore"
							}
						});
				}
			},
			orderBy(id) {
				uni.navigateTo({
					url: `/pagesA/pages/adopt/adopt?id=${id}`
				});
			},
		}
	};
</script>

<style lang="scss">
	.all_box {
		width: 95%;
		margin: 0 2.5%;
	}

	.reinitem {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 25rpx 0 0 0;
		position: relative;
		flex-wrap: wrap;
	}

	.leticon {
		background-color: #ff8000;
		position: absolute;
		left: 0;
		top: 0;
		padding: 15rpx 15rpx 20rpx 15rpx;
		border-radius: 0 0 35rpx 35rpx;
		color: #ffffff;
	}

	.renitem_thu {
		width: 260rpx;
		height: 270rpx;
	}

	.rightiation_bar {
		margin-left: 35rpx;
		width: calc(100% - 295rpx);
	}

	.rightiation_bar_p1 {
		color: #000;
		line-height: 40rpx;
		font-size: 30rpx;
	}

	.rightiation_bar_p2 {
		font-size: 24rpx;
		color: #434343;
		margin: 15rpx 0;
	}

	.rightiation_bar_p3 {
		display: flex;
		justify-content: flex-start;
		margin: 15rpx 0;
		align-items: center;
	}

	.right_text_p1 {
		color: #999;
		font-size: 22rpx;
	}

	.right_text_p2 {
		font-size: 24rpx;
		margin-right: 25rpx;
	}

	.right_buton_p1 {
		font-size: 32rpx;
		font-weight: 600;
	}

	.right_buton_p2 {
		color: #fff;
		border-radius: 25rpx;
		font-size: 26rpx;
		padding: 12.5rpx 30rpx;
	}

	.uliline2 {
		width: 100%;
		background-color: #f5f5f5;
		height: 2rpx;
		margin: 25rpx 0;
	}
</style>
