<template>
	<view class="xkl-com-bg">
		<view style="height: 20rpx;"></view>
		<u-subsection :list="tabData.list" keyName="name" :current="tabData.current"
			@change="sectionChange"></u-subsection>
		<view style="height: 20rpx;"></view>
		<view v-if="!orderItems.length" style="padding: 30rpx;background-color: #ffffff;border-radius: 10rpx;">
			<u-empty mode="list"></u-empty>
		</view>
		<view v-else>
			<view
				style="background-color: #ffffff;color: #666666;padding: 30rpx;font-size: 28rpx; margin-bottom: 20rpx;border-radius: 16rpx;"
				v-for="(item,index) in orderItems" :key="index" :url="`/pages/goods/detail?id=${item.id}`">
				<view class="u-flex u-flex-between" style="font-size: 30rpx;">
					<view>订单号：{{item.order_no}}</view>
					<u-tag :text="config.pay_type[item.pay_type]" v-if="item.pay_type!=0" :name="config.pay_type[item.pay_type]" plain
						type="warning"></u-tag>
				</view>
				<view style="height: 20rpx;"></view>
				<view class="u-flex">
					<u--image width="220rpx" height="220rpx" :src="item.goods.cover[0]" radius="16rpx"></u--image>
					<view style="padding: 0 20rpx;">
						<view>{{item.goods.name}}</view>
						<view style="height: 14rpx;"></view>
						<view>数量：{{item.num}}</view>
						<view style="height: 14rpx;"></view>
						<view>订单金额：<text style="color: #FF1A1A;">￥{{item.pay_money}}</text></view>
						<view style="height: 14rpx;"></view>
						<view v-if="item.goods.integral > 0">赠送积分：{{item.goods.integral}}</view>
					</view>
				</view>
				<u-divider></u-divider>
				<view class="u-flex u-flex-between">
					<view>{{item.created_at}}</view>
					<view>
						<u-tag :text="config.status[item.status]" plain type="success"></u-tag>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadStatus" />
		<view style="height: 500rpx;"></view>
	</view>
</template>

<script>
	let self;
	export default {
		data() {
			return {
				tabData: {
					list: [{
						name: '待付款',
						status: 0,
					}, {
						name: '待生效',
						status: 1,
					}, {
						name: '已生效',
						status: 2,
					}, ],
					current: 2
				},
				orderItems: [],
				search: {
					status: 2,
					page: 1
				},
				page: {
					current: 0,
					last_page: 1
				},
				loadStatus: 'loadmore',
				config: null
			}
		},
		mounted() {

		},
		onLoad(option) {
			self = this;
			if (option && option.status) {
				self.search.status = 1;
			}
			
			self.getOrderItems();
			
		},
		onShow() {

		},
		
		

		
		
		onReachBottom() {
			if (!self.pageStatus()) {
				return;
			}
			self.loadStatus = 'loading';
			self.search.page = ++self.search.page;

			self.getOrderItems();
		},
		async onPullDownRefresh() {
			self.search.page = 1;
			self.orderItems = [];

			await self.getOrderItems();
			uni.stopPullDownRefresh();
		},
		methods: {
			convertToCustomArray(obj) {
			    const keys = Object.keys(obj);
			    return keys.map(key => ({
			        name: obj[key],
			        status: parseInt(key, 10)
			    }));
			},
			sectionChange(index) {
				self.search.status = self.tabData.list[index].status;
				self.tabData.current = index;
				self.orderItems = [];
				self.getOrderItems();
			},
			pageStatus() {
				self.loadStatus = 'loadmore';
				if (self.search.page >= self.page.last_page) {
					self.loadStatus = 'nomore';
					return false;
				}
				return true;
			},
			getOrderItems() {
				self.$http.post('/shop/v10/order/items', self.search).then(({
					data,
					success
				}) => {
					if (success) {
						self.orderItems = self.orderItems.concat(data.items.data);
						self.config = data.config;
						self.page.last_page = data.items.last_page;
						// self.tabData.list = this.convertToCustomArray(data.config.status)
						self.pageStatus();
					}
				})
			},
		}
	}
</script>

<style lang="scss">

</style>