<template>
	<view class="w-100 order-wrap">
		<!-- tabBar -->
		<scroll-view class="tab-wrap w-100" scroll-x>
			<view 
				class="tab-item mx-3" 
				v-for="(item, index) in list"
				:key="index"
				:class="current_tab === index ? 'tab_active' : ''"
				@click="handleTab(index)"
			>{{item.name}}</view>
		</scroll-view>
		
		<view class="list-wrap">
			<pull-list
				refresherEnabled
			>
				<view class="w-100 list-item">
					<view class="w-100 item-inner">
						<view class="w-100 mb-2">
							<view class="flex j-between a-center">
								<text class="order-item">time</text>
								<text class="order-status">status</text>
							</view>
							<view class="flex j-start a-center">
								<image class="cover" src="/static/images/common/bg.png" mode="aspectFit"></image>
								<view class="goods-info flex-1 flex j-between flex-column">
									<view class="title">title</view>
									<view class="desc">12</view>
									<view class="w-100 flex j-between a-center">
										<text class="price">¥5555</text>
										<text class="desc">x1</text>
									</view>
								</view>
							</view>
						</view>
						
						<view class="w-100 mb-2">
							<view class="flex j-between a-center">
								<text class="order-item">time</text>
								<text class="order-status">status</text>
							</view>
							<view class="flex j-start a-center">
								<image class="cover" src="/static/images/common/bg.png" mode="aspectFit"></image>
								<view class="goods-info flex-1 flex j-between flex-column">
									<view class="title">title</view>
									<view class="desc">12</view>
									<view class="w-100 flex j-between a-center">
										<text class="price">¥5555</text>
										<text class="desc">x1</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="order-info">
						<view class="w-100 flex j-end a-center mb-2">
							<text class="mr-2">共<text class="primary">3</text>件</text>
							<text class="primary">¥333</text>
						</view>
						<view class="w-100 flex j-end a-center">
							<view class="btn ml-2 cancle">取消订单</view>
							<view class="btn ml-2 pay">立即支付</view>
						</view>
					</view>
				</view>
			</pull-list>
		</view>
	</view>
</template>

<script>
import pullList from '@/components/pull-list/index.vue'
export default {
	data() {
		return {
			current_tab: 0,
			list: [
				{
					name: '全部',
					data: []
				},
				{
					name: '待付款',
					data: []
				},
				{
					name: '待收货',
					data: []
				},
				{
					name: '已收货',
					data: []
				},
				{
					name: '退货退款',
					data: []
				},
				{
					name: '交易关闭',
					data: []
				}
			]
		}
	},
	components: {
		pullList
	},
	onLoad(options) {
		console.log(options)
		const { id } = options
		this.current_tab = Number(id) || 0
	},
	methods: {
		handleTab(idx) {
			if(idx === this.current_tab) return
			this.current_tab = idx
		}
	}
}
</script>

<style lang="scss" scoped>
.order-wrap {
	height: 100vh;
	.tab-wrap {
		height: 88rpx;
		white-space:nowrap;
		border-top: 1rpx solid $line;
		border-bottom: 1rpx solid $line;
		background-color: #fff;
		.tab-item {
			width: 198rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			position: relative;
			display: inline-block;
		}
		.tab_active {
			color: $primary;
			font-weight: 600;
			&::after {
				display: inline-block;
				content: "";
				position: absolute;
				left: 50%;
				bottom: 2rpx;
				transform: translateX(-50%);
				z-index: 5;
				width: 198rpx;
				height: 4rpx;
				background-color: $primary;
			}
		}
	}
	
	.list-wrap {
		width: 100%;
		height: calc(100vh - 98rpx);
		overflow: hidden;
		.list-item {
			margin-top: 20rpx;
			background-color: $white;
			.item-inner {
				@include borderBox(20rpx, 30rpx);
				border-bottom: 1rpx solid $line;
				.order-item {
					font-size: 24rpx;
					color: $desc;
				}
				.order-status {
					font-size: 24rpx;
					color: $primary;
				}
				.cover {
					flex: 0 0 160rpx;
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
				}
				.goods-info {
					height: 160rpx;
					.title {
						@include text-ellipsis(2);
					}
					.desc {
						color: $desc;
					}
					.price {
						color: $primary;
					}
				}
			}
			.order-info {
				@include borderBox(20rpx, 30rpx);
				.primary {
					color: $primary;
				}
				.btn {
					@include borderBox(16rpx, 34rpx);
					border-radius: 8rpx;
				}
				.cancle {
					border: 1rpx solid $line;
					background-color: #fff;
				}
				.pay {
					color: #fff;
					background-color: $primary;
				}
			}
		}
	}
}
</style>