<template>
	<view>
		<view class="order_nav">
			<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false">
				<view :class="scroll_active==index?'scroll_active':''" v-for="(item,index) in scrollList" @click="scrollChange(index)" :key="index">{{item.text}}</view>
			</scroll-view>
		</view>
		<view class="body">
			<template v-if="isList==true && scroll_active==0">
				<view class="order">
					<view class="order_title">
						<text>Waiting for payment</text>
						<view class="order_title_right">
							<text>order#20245512141212</text>
							<image src="../../static/img/right.png" mode=""></image>
						</view>
					</view>
					<view class="order_content">
						<view class="good_info">
							<view class="good_info_left">
								<view class="good_info_image" v-for="(item,index) in 4" :key="index"></view>
							</view>
							<view class="good_info_right">
								<text>4 ltems</text>
								<image src="../../static/img/right.png" mode=""></image>
							</view>
						</view>
						<view class="good_price">total:US$12.5</view>
						<view class="good_points">
							<image src="/static/img/gantan1.png" mode=""></image>
							<text>Reward 10 points</text>
						</view>
						<view class="order_button">
							<button class="cancel">CANCEL ORDER</button>
							<button class="pay">PAY NOW</button>
						</view>
					</view>
				</view>
				
				<view class="order">
					<view class="order_title">
						<text>To be shipped</text>
						<view class="order_title_right">
							<text>order#20245512141212</text>
							<image src="../../static/img/right.png" mode=""></image>
						</view>
					</view>
					<view class="order_content">
						<view class="good_info">
							<view class="good_info_left">
								<view class="good_info_image" v-for="(item,index) in 2" :key="index"></view>
							</view>
							<view class="good_info_right">
								<text>2 ltems</text>
								<image src="../../static/img/right.png" mode=""></image>
							</view>
						</view>
						<view class="good_price">total:US$12.5</view>
					</view>
				</view>
				
				<view class="order">
					<view class="order_title">
						<text>Shipped</text>
						<view class="order_title_right">
							<text>order#20245512141212</text>
							<image src="../../static/img/right.png" mode=""></image>
						</view>
					</view>
					<view class="order_content">
						<view class="good_info">
							<view class="good_info_left ">
								<view class="good_info_image" v-for="(item,index) in 1" :key="index"></view>
								<view class="left_info">
									<view class="info_name">Adidas Yeezy Boost 350 V2  DazzlingBlue Black GY7164 Men's</view>
									<view class="left_info_bottom">
										<view class="info_lable">
											<text>Multicolor;41</text>
											<image src="/static/img/bottom.png" mode=""></image>
										</view>
										<text>×2</text>
									</view>
								</view>
							</view>
						</view>
						<view class="good_price">total:US$12.5</view>
						<view class="order_button">
							<button class="cancel">LOGISTICS</button>
							<button class="pay">CONFIRM RECEIPT</button>
						</view>
					</view>
				</view>
				
				<view class="order">
					<view class="order_title">
						<text>Completed</text>
						<view class="order_title_right">
							<text>order#20245512141212</text>
							<image src="../../static/img/right.png" mode=""></image>
						</view>
					</view>
					<view class="order_content">
						<view class="good_info">
							<view class="good_info_left">
								<view class="good_info_image" v-for="(item,index) in 4" :key="index"></view>
							</view>
							<view class="good_info_right">
								<text>4 ltems</text>
								<image src="../../static/img/right.png" mode=""></image>
							</view>
						</view>
						<view class="good_price">total:US$12.5</view>
						<view class="order_button">
							<button class="cancel">DELETE ORDER</button>
							<button class="pay">COMMENT</button>
						</view>
					</view>
				</view>
				
				<view class="order">
					<view class="order_title">
						<text>Return and exchange</text>
						<view class="order_title_right">
							<text>order#20245512141212</text>
							<image src="../../static/img/right.png" mode=""></image>
						</view>
					</view>
					<view class="order_content">
						<view class="good_info">
							<view class="good_info_left">
								<view class="good_info_image" v-for="(item,index) in 4" :key="index"></view>
							</view>
							<view class="good_info_right">
								<text>4 ltems</text>
								<image src="../../static/img/right.png" mode=""></image>
							</view>
						</view>
						<view class="good_price">total:US$12.5</view>
						<view class="order_button">
							<button class="pay">CANCEL RETURN</button>
						</view>
					</view>
				</view>
				
				<view class="order">
					<view class="order_title">
						<text>cancelled</text>
						<view class="order_title_right">
							<text>order#20245512141212</text>
							<image src="../../static/img/right.png" mode=""></image>
						</view>
					</view>
					<view class="order_content">
						<view class="good_info">
							<view class="good_info_left">
								<view class="good_info_image" v-for="(item,index) in 4" :key="index"></view>
							</view>
							<view class="good_info_right">
								<text>4 ltems</text>
								<image src="../../static/img/right.png" mode=""></image>
							</view>
						</view>
						<view class="good_price">total:US$12.5</view>
						<view class="order_button">
							<button class="cancel">DELETE ORDER</button>
						</view>
					</view>
				</view>
			</template>
			<template v-if="isList==true && scroll_active==2">
				<view class="order">
					<view class="order_title">
						<text>Waiting for payment</text>
						<view class="order_title_right">
							<text>order#20245512141212</text>
							<image src="../../static/img/right.png" mode=""></image>
						</view>
					</view>
					<view class="order_content">
						<view class="good_info">
							<view class="good_info_left">
								<view class="good_info_image" v-for="(item,index) in 2" :key="index"></view>
							</view>
							<view class="good_info_right">
								<text>2 ltems</text>
								<image src="../../static/img/right.png" mode=""></image>
							</view>
						</view>
						<view class="good_price">total:US$12.5</view>
					</view>
				</view>
				
				<view class="order">
					<view class="order_title">
						<text>Shipped</text>
						<view class="order_title_right">
							<text>order#20245512141212</text>
							<image src="../../static/img/right.png" mode=""></image>
						</view>
					</view>
					<view class="order_content">
						<view class="good_info">
							<view class="good_info_left ">
								<view class="good_info_image" v-for="(item,index) in 1" :key="index"></view>
								<view class="left_info">
									<view class="info_name">Adidas Yeezy Boost 350 V2  DazzlingBlue Black GY7164 Men's</view>
									<view class="left_info_bottom">
										<view class="info_lable">
											<text>Multicolor;41</text>
											<image src="/static/img/bottom.png" mode=""></image>
										</view>
										<text>×2</text>
									</view>
								</view>
							</view>
						</view>
						<view class="good_price">total:US$12.5</view>
					</view>
				</view>
				
			</template>
			<template v-if="isList==true && scroll_active==1">
				<view class="order">
					<view class="order_title">
						<text>Waiting for payment</text>
						<view class="order_title_right">
							<text>order#20245512141212</text>
							<image src="../../static/img/right.png" mode=""></image>
						</view>
					</view>
					<view class="order_content">
						<view class="good_info">
							<view class="good_info_left">
								<view class="good_info_image" v-for="(item,index) in 4" :key="index"></view>
							</view>
							<view class="good_info_right">
								<text>4 ltems</text>
								<image src="../../static/img/right.png" mode=""></image>
							</view>
						</view>
						<view class="good_price">total:US$12.5</view>
						<view class="order_button">
							<button class="cancel">CANCEL ORDER</button>
							<button class="pay">PAY NOW</button>
						</view>
					</view>
				</view>
				<view class="order">
					<view class="order_title">
						<text>Waiting for payment</text>
						<view class="order_title_right">
							<text>order#20245512141212</text>
							<image src="../../static/img/right.png" mode=""></image>
						</view>
					</view>
					<view class="order_content">
						<view class="good_info">
							<view class="good_info_left">
								<view class="good_info_image" v-for="(item,index) in 4" :key="index"></view>
							</view>
							<view class="good_info_right">
								<text>4 ltems</text>
								<image src="../../static/img/right.png" mode=""></image>
							</view>
						</view>
						<view class="good_price">total:US$12.5</view>
						<view class="order_button">
							<button class="cancel">CANCEL ORDER</button>
							<button class="pay">PAY NOW</button>
						</view>
					</view>
				</view>
			</template>
			
			<template v-if="isList==false">
				<view class="order1">
					<image src="../../static/img/order_nodate.png" mode=""></image>
					<text>You made no order yet!</text>
					<button>Continue shopping</button>
				</view>
			</template>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollList:[{text:'All'},{text:'Unpaid'},{text:'Processing'},{text:'Shipped'},{text:'Returns'},{text:'Completed'},{text:'Closed'}],
				scroll_active:0,
				isList:false
			}
		},
		methods:{
			scrollChange(index){
				this.scroll_active=index
			},
		}
	}
</script>

<style lang="scss" scoped>
	.body{
		padding-top: 100rpx;
	}
	.order_nav{
		padding:0 38.67rpx ;
		border-bottom: 13.33rpx #F7F7F7 solid;
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		z-index: 99;
		background-color: white;
		.scroll-view_H{
			white-space: nowrap;
			font-size: 28rpx;
			color: #666666;
			width: 100%;
			
			::-webkit-scrollbar {
				width: 0;
				height: 0;
				background-color: transparent;
			} 
			view{
				margin-left: 37.33rpx;
				display: inline-block;				
				padding: 25.33rpx 0;
			}
			view:first-child{
				margin-left: 0;
			}
			.scroll_active{
				color: #000000;
				font-size: 28rpx;
				font-weight: bold;
				border-bottom: 2px solid #000000;
			}
		}
	}
	.order{
		border-bottom: 13.33rpx #F7F7F7 solid;
		padding-bottom: 26.67rpx;
		.order_title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 34.67rpx;
			padding-right: 25.33rpx;
			font-size: 28rpx;
			padding-top: 26.67rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #F1F1F1;
			
			.order_title_right{
				font-size: 22.67rpx;
				font-weight: bold;
				color: #666666;
				
				image{
					width: 16rpx;
					height: 16rpx;
					margin-left: 14.67rpx;
				}
			}
		}
		.order_content{
			padding-left: 32rpx;
			padding-right: 26.67rpx;
			
			.good_info{
				padding: 30.67rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 22.67rpx;
				color: #666666;
				font-weight: bold;
				border-bottom: 1px solid #F1F1F1;
				.good_info_left{
					display: flex;
					align-items: center;
					
					.good_info_image{
						width: 133.33rpx;
						height: 133.33rpx;
						background-color: #999999;
						margin-right: 8rpx;
					}
					.left_info{
						margin-left: 24rpx;
						
						.info_name{
							font-size: 26.67rpx;
							font-weight: 400;
							width: 477.33rpx;
						}
						.left_info_bottom{
							width: 533.33rpx !important;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 32rpx;
							color: #909090;
							width: 100%;
							margin-top: 24rpx;
							.info_lable{
								padding: 5.33rpx 20rpx;
								font-size: 22.67rpx;
								border-radius: 33.33rpx;
								border: 1px solid #D3D3D3;
								image{
									width: 17.33rpx;
									height: 17.33rpx;
									margin-left: 14.67rpx;
								}
							}
						}
					}
				}
				.good_info_right{
					display: flex;
					align-items: center;
					image{
						width: 16rpx;
						height: 16rpx;
						margin-left: 20rpx;
					}
				}
			}
			.good_price{
				font-size: 28rpx;
				text-align: right;
				margin: 24rpx 0;
			}
			.good_points{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 24rpx;
				color: #B22234;
				
				image{
					width: 29.33rpx;
					height: 29.33rpx;
					margin-right: 13.33rpx;
				}
			}
			.order_button{
				margin-top: 33.33rpx;
				display: flex;
				justify-content: flex-end;
				
				button{
					height: 57.33rpx;
					line-height: 57.33rpx;
					font-weight: bold;
					font-size: 22.67rpx;
					border: none;
					margin: 0;
					border-radius: 0;
					
					&:last-child{
						margin-right: 0 !important;
					}
				}
				.cancel{
					color: #666666;
					margin-right: 20rpx;
					background-color: white;
				}
				.pay{
					color: white;
					background: black;
				}
				
			}
		}
	}
	.order1{
		padding-top: 90.67rpx;
		font-size: 24rpx;
		font-weight: 400;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image{
			width: 146.67rpx;
			height: 146.67rpx;
			margin-bottom: 36rpx;
		}
		button{
			background-color: #000000;
			font-size: 24rpx;
			color: white;
			border-radius: 13.33rpx;
			height: 63.33rpx;
			margin-top: 20rpx;
		}
	}
</style>