<template>
	<view class="xkl-com-bg">
		<view style="height: 20rpx;"></view>
		<view
			style="background-color: #ffffff;color: #666666;padding: 20rpx;font-size: 28rpx; border-radius: 12rpx;">
			<view style="color:#999">当日订单所产生的期权，次日进行更新</view>
		</view>
		<view style="height: 20rpx;"></view>
		<view>
			<view v-for="(item,index) in shopOptionItems" :key="index"
				style="background-color: #ffffff;color: #666666;padding: 20rpx;font-size: 28rpx; margin-bottom: 20rpx;border-radius: 12rpx;">
				<view class="u-flex u-flex-between">
					<view>{{item.note}}</view>
					<view>{{item.num}}</view>
				</view>
				<view style="height: 10rpx;"></view>
				<view>下单时间：{{item.created_at}}</view>
			</view>
			<u-loadmore :status="loadStatus" />
		</view>
		<view style="height: 400rpx;"></view>
	</view>
</template>

<script>
	let self;
	export default {
		data() {
			return {
				shopOptionItems: [],
				status: [],
				type: [],
				loadStatus: 'loadmore',
				search: {
					page: 1,
					status: 0,
				},
				page: {
					current: 0,
					last_page: 1,
					page: 1
				}
			}
		},
		onLoad() {
			self = this;
			self.getShopOptionItems();
		},
		onPullDownRefresh() {
			self.search.page = 1;
			self.shopOptionItems = [];
			self.getShopOptionItems();

			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (!self.pageStatus()) {
				return;
			}
			self.loadStatus = 'loading';
			self.search.page = ++self.search.page;
			self.getShopOptionItems();
		},
		methods: {
			pageStatus() {
				self.loadStatus = 'loadmore';
				if (self.search.page >= self.page.last_page) {
					self.loadStatus = 'nomore';
					return false;
				}
				return true;
			},
			getShopOptionItems() {
				self.$http.get('/shop/v10/shop_option/items', self.search).then(({
					data,
					success
				}) => {

					self.shopOptionItems = self.shopOptionItems.concat(data.data);

					self.page.last_page = data.last_page;
					self.pageStatus();
				})
			},
		}
	}
</script>

<style lang="scss">

</style>