<template>
	<view class="order-details">
		<view class="subsection">
			<u-subsection :list="list" :current="curNow" @change="sectionChange" fontSize="24rpx" mode="button"
				bgColor="#fff"></u-subsection>
		</view>
		<swiper class="swiper" :indicator-dots="false" :autoplay="false" :duration="duration" @change="swiperChange"
			:current="curNow">
			<swiper-item>
				<scroll-view class="scroll-view-height" :scroll-y="true" :enable-back-to-top="true"
					:show-scrollbar="true">
					<view class="swiper-item uni-bg-red">
						<view class="item" v-for="i in 10" :key="i">
							<product-item
								img="http://124.71.5.138:9683/commoditySpec/20220106/y6OmB8Y6ELM2NnWubmcJreeywlvjgfd3F9cIMbCQ.jpg"
								name="Product name" desc="Description" price="$123456.00" num="2" />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="scroll-view-height" :scroll-y="true" :enable-back-to-top="true"
					:show-scrollbar="true">
					<view class="swiper-item uni-bg-red">
						<view class="item" v-for="i in 3" :key="i">
							<product-item
								img="http://124.71.5.138:9683/commoditySpec/20220106/y6OmB8Y6ELM2NnWubmcJreeywlvjgfd3F9cIMbCQ.jpg"
								name="Product name" desc="Description" price="$123456.00" num="2" />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="scroll-view-height" :scroll-y="true" :enable-back-to-top="true"
					:show-scrollbar="true">
					<view class="swiper-item uni-bg-red">
						<view style="height: 100rpx; width: 100%;" v-for="i in 100" :key="i">{{i}}</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="scroll-view-height" :scroll-y="true" :enable-back-to-top="true"
					:show-scrollbar="true">
					<view class="swiper-item uni-bg-red">
						789
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import productItem from "@/components/product-item/product-item"
	export default {
		data() {
			return {
				list: ['All', 'Processing', 'Shipped Out', 'Delivered'],
				curNow: 0,
				duration: 0
			}
		},
		onLoad(option) {
			this.$nextTick(() => {
				console.log(option)
				if (option.Order_type != 0) this.curNow = option.Order_type
				this.duration = 0
				setTimeout(() => {
					this.duration = 300
				}, 300)
			})
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			swiperChange(index) {
				this.curNow = index.detail.current;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-details {
		width: 100%;
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		/* #ifdef H5 */
		height: calc(100vh - 88rpx);
		/* #endif */
		@include flex(column);
		align-items: flex-start;
		justify-content: flex-start;
		background-color: $uni-bg-color-grey;

		.subsection {
			width: 100%;
			position: sticky;
			top: 0rpx;
			z-index: 999999;
		}

		.swiper {
			width: 100%;
			flex: 1;

			.scroll-view-height {
				height: 100%;
				padding: 0rpx 20rpx;
				box-sizing: border-box;

				.item {
					margin: 20rpx 10rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
