<template>
	<view>
		<!-- topbar -->
		<u-navbar title="确认订单" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
			</view>
		</u-navbar>
		<!-- tab -->
		<view class="tabListBox m-l-24 m-r-24 m-t-24 flex msb">
			<view class="tabBox flex mac mc fz32" v-for="(tab,index) in tabList" :key="index" @click="handlerTab(index)"
				:class="current===index?'fb':''">
				{{tab}}
			</view>
		</view>
		<!-- tabLine -->
		<view class="tabLineBox flex mac mc z-top" :style="{ left: tabLineLeft + 'rpx' }">
			<view class="tabLine rad8 bg-m"></view>
		</view>
		<!-- 订单页 swiper -->
		<swiper class="swiperClass m-t-12" :current="current" @animationfinish="animationfinish">
			<swiper-item class="swiperClass">
				<scroll-view scroll-y class="swiperClass">
					<view v-if="orderList_unpaid.length>0">
						<orderItem v-for="order in orderList_unpaid" :order=order :key="order.id"></orderItem>
						<u-divider class="m-r-24 m-l-24" text="没有更多了" :hairline="true"></u-divider>
						<view class="extra-space2"></view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<view v-if="orderList_paid.length>0">
					<orderItem v-for="order in orderList_paid" :order=order :key="order.id"></orderItem>
					<u-divider class="m-r-24 m-l-24" text="没有更多了" :hairline="true"></u-divider>
					<view class="extra-space2"></view>
				</view>
			</swiper-item>
			<swiper-item>
				<view v-if="orderList_refund.length>0">
					<orderItem v-for="order in orderList_refund" :order=order :key="order.id"></orderItem>
					<u-divider class="m-r-24 m-l-24" text="没有更多了" :hairline="true"></u-divider>
					<view class="extra-space2"></view>
				</view>
			</swiper-item>
		</swiper>
		<!-- tabbar -->
		<view>
			<tabbar></tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ['待支付', '已付款', '退款售后'], // tab标签
				current: 0, //当前激活标签
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				tabLineLeft: 24 //tabLine 样式表的left值
			}
		},
		computed: {
			//未付款订单
			orderList_unpaid() {
				return this.$store.state.orderList.filter(item => item.main_status === '未付款')
			},
			//已付款 并且没有申请退款的订单
			orderList_paid(){
				return this.$store.state.orderList.filter(item => item.main_status === '已付款' && item.refund_status === '未申请')
			},
			//已经申请退款的订单
			orderList_refund(){
				return this.$store.state.orderList.filter(item => item.refund_status !== '未申请')
			}
		},
		methods: {
			//点击tab标签时 设置current
			handlerTab(index) {
				this.current = index
			},
			// swiper滑动结束，设置current
			animationfinish(e) {
				this.current = e.detail.current
			}
		},
		watch: {
			current: {
				handler(val) {
					// 计算每个 tabLine 的left值
					const tabWidth = 200
					const spacing = (750 - tabWidth * this.tabList.length - 48) / (this.tabList.length -
						1) // 750是屏幕宽度，48是左右边距
					this.tabLineLeft = 24 + val * (tabWidth + spacing) // 计算新的 left 值
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabListBox {
		height: 77rpx;
	}

	.tabBox {
		width: 200rpx;
		height: 77rpx;
	}

	.tabLineBox {
		width: 200rpx;
		height: 8rpx;
		position: absolute;
		transition: all .2s ease;
	}

	.tabLine {
		width: 70rpx;
		height: 8rpx;
	}

	.swiperClass {
		height: calc(100vh - 297rpx);
	}
</style>