<template>
	<view class="content">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
		<view class="content_item" v-for="item in listData" @click="gotoPage('myCaDetail?caId='+item.goods_id)">
			<view class="content_item_lf">
				<view>
					<image :src="item.goods_imgurl" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view style="color: #fff;font-size: 30rpx;">{{item.goods_title}}</view>
					<view>所属IP {{item.goods_title}}</view>
					<view>拥有卡片数量：{{item.buy_count}}</view>
					<view>已选卡片数量：{{item.all_count}}</view>
				</view>
			</view>
			<view class="content_item_ri"><image :src="z_imgPath + 'mine/point_r.png'"></image></view>
		</view>
		</mescroll-body>
	</view>
</template>

<script>
	import { getWarehouseIndex } from '@/common/server/warehouse.js';
	
	export default {
		data() {
			return {
				z_imgPath: this.$z_img1,
				downOption: {
					auto: false
				},
				listData: []

			}
		},
		onLoad(e) {

		},
		methods: {

			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				this.loadData(page.num);
			},
			async loadData(pageNo) {
				// 模拟接口
				const res = await getWarehouseIndex({
					page: pageNo,
					type: 3
				});
				this.mescroll.endByPage(res.data.data.length, res.data.last_page);
				if (pageNo == 1) {
					this.listData = res.data.data;
				} else {
					this.listData = this.listData.concat(res.data.data);
				}
			},


		}
	}
</script>


<style scoped lang="scss">
	.content{
		&_item{
			padding: 30rpx;
			margin: 30rpx auto;
			background-color: #262626;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			width: 690rpx;
			justify-content: space-between;
			&_lf{
				display:flex;
				justify-content: baseline;
				image{
					width: 140rpx;
					height: 180rpx;
					margin-right: 22rpx;
				}
				.info{
					color: rgba(255, 255, 255, .4);
					font-size: 24rpx;
					>view{
						margin: 12rpx 0;
					}
				}
			}
			&_ri{
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>