<template>
	<view class="w-100 order-wrap">
		<!-- tabBar -->
		<scroll-view 
			class="tab-wrap w-100" 
			scroll-x 
			:scroll-into-view="'s'+current_tab"
			scroll-with-animation
		>
			<view 
				class="tab-item mx-3"
				:id="'s'+ index"
				v-for="(item, index) in tab_list"
				:key="index"
				:class="current_tab === index ? 'tab_active' : ''"
				@click="handleTab(index)"
			>{{item.name}}</view>
		</scroll-view>
		
		<view class="list-wrap">
			<pull-list
				ref="pullList"
				refresherEnabled
				@refresh="refresh"
				@tolower="tolower"
			>
				<template v-if="tab_list[current_tab].data.length === 0">
					<empty-view text="暂无订单"></empty-view>
				</template>
				<template v-else>
					<navigator
						class="w-100 list-item"
						hover-class="none"
						:url="'/pages/order/order-detail?order_sn=' + item.order_sn"
						v-for="(item, index) in tab_list[current_tab].data"
						:key="item.order_sn"
					>
						<view class="w-100 item-inner">
							<!-- <view>orderStatus=={{item.order_status}}————orderStatusD=={{item.order_status_d}}</view>
							<view>{{item.order_sn}}</view> -->
							<view class="flex j-between a-center">
								<text class="order-item">{{item.add_time | parseTime}}</text>
								<!-- <text class="order-status">{{item.order_status | orderStatus(item.goods_before_pay)}}</text> -->
								<text v-if="item.goods_before_pay === '1' && item.order_statsu === 1"></text>
								<text v-else class="order-status">{{'os' + item.order_status + '_osd' + item.order_status_d | cOrderStatus}}</text>
							</view>
							<view 
								class="w-100 mb-2 sku-item"
								v-for="(good, idx) in item.goods"
								:key="idx"
							>
								<view class="flex j-start a-center mt-2">
									<image 
										class="cover" 
										:src="baseUrl + '/' + good.goods_thumb"
										mode="aspectFit"
									/>
									<view class="goods-info flex-1 flex j-between flex-column">
										<view class="title">{{good.goods_name}}</view>
										<view class="desc flex j-between a-center font-24">
											<text>{{good.specification}}</text>
											<text class="primaryColor"  v-if="['212', '213', '214'].includes(item.order_status_d)">{{item.order_status_d | showTKStatus}}</text>
										</view>
										<view class="w-100 flex j-between a-center">
											<text class="price">￥{{good.goods_price}}</text>
											<text class="desc">x{{good.cart_number}}</text>
										</view>
									</view>
								</view>
							</view>
							
						</view>
						
						<order-btn :item="item" @changeData='changeData'>
							<view class="w-100 flex j-end a-center mb-2" slot="total">
								<text class="mr-2">共<text class="primary">{{item.sum_counts}}</text>件</text>
								<text class="primary">合计:￥{{item.sum_amount}}</text>
							</view>
							<countdown-t
								slot="time"
								v-if="item.goods_before_pay === '0' && item.countdownT > 0"
								:countdownNum="item.countdownT"
								:pauseTimer="pauseTimer"
								:params="{
									index
								}"
								@timerEnd="timerEnd"
							/>
						</order-btn>
						
					</navigator>
				</template>
			</pull-list>
		</view>
	</view>
</template>

<script>
import pullList from '@/components/pull-list/index.vue'
import countdownT from './components/countdownT.vue'
import orderBtn from './components/order-btn.vue'

import LoadMore from '@/utils/load-more.js'
import { baseUrl } from '@/config/index.js'
import order_mixin from '@/mixins/order_operation.js'
import { orderList } from "@/apis/order.js"

const formParams = {
	status: 10 //  0:待接单/待付款 1:待发货/待收货 3:已收货 4:交易关闭 5:退款中 10:全部
}
let timer = null
let serviceTime = 0

const order_statusD = {
	212: '退款成功',
	213: '退货成功',
	214: '退款退货成功'
}

export default {
	data() {
		return {
			test: false,
			current_tab: 0,
			baseUrl,
			tab_list: [
				{
					status: 10,
					name: '全部',
					data: []
				},
				{
					status: 0,
					name: '待付款',
					data: []
				},
				{
					status: 1,
					name: '待收货',
					data: []
				},
				{
					status: 3,
					name: '已收货',
					data: []
				},
				{
					status: 5,
					name: '退款退货',
					data: []
				},
				{
					status: 4,
					name: '交易关闭',
					data: []
				}
			],

			// times: {}, // 存放倒计时 通过key取
		}
	},
	components: {
		pullList,
		countdownT,
		orderBtn
	},
	created() {
		this.loadMore = new LoadMore()
	},
	mixins: [order_mixin],
	filters: {
		// 单独显示退款状态
		showTKStatus(val) {
			return order_statusD[val] || ''
		}
	},
	onLoad(options) {
		const { id } = options
		this.current_tab = Number(id) || 0
	},
	onShow() {
		this.init()
	},
	methods: {
		
		handleTab(idx) {
			if(idx === this.current_tab) return
			this.current_tab = idx
			this.init()
		},
		
		init() {
			this.loadMore.resetParams()
			this.$refs.pullList.scroll2Top()
			this.tab_list[this.current_tab].data = []
			this.getData()
		},
		
		async getData() {
			const tab_list = this.tab_list
			const idx = this.current_tab
			formParams.status = tab_list[idx].status
			const { status, data, time } = await this.loadMore.getList(formParams, orderList)
			if(status && data) {
				// 计算总数
				data.forEach(item => {
					if(item.order_status === '1') {
						// item.pay_endTime = item.confirm_time === '0' ? 0 : ~~item.confirm_time + 3600
						item.countdownT = ~~item.confirm_time + 3600 - time
						// item.last_payTime = ''
					} else {
						item.countdownT = 0
						// item.last_payTime = ''
					}
					item.sum_counts = item.goods.reduce((pre, cur) => { return pre + ~~cur.cart_number}, 0) 
				})
				serviceTime = time
				this.tab_list[idx].data.push(...data)
			}
		},
		
		changeData() {
			this.init()
		},
		
		timerEnd(e) {
			const { index } = e
			const tab_list = this.tab_list
			const current_tab = this.current_tab
			this.$set(tab_list[current_tab].data[index], 'countdownT', 0)
		},
		
		// 下拉刷新
		refresh(e) {
			console.log('3333')
			this.init()
		},
		
		// 上拉加载更多
		tolower(e) {
			this.getData()
		}
	}
}
</script>

<style lang="scss" scoped>
.order-wrap {
	height: 100vh;
	.tab-wrap {
		position: relative;
		height: 88rpx;
		white-space:nowrap;
		// border-bottom: 1rpx solid #d9d9d9;
		background-color: #fff;
		&::after {
			display: block;
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 1;
			width: 100%;
			height: 1rpx;
			background-color: $line;
		}
		.tab-item {
			position: relative;
			display: inline-block;
			width: 198rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
		}
		.tab_active {
			width: 198rpx;
			height: 88rpx;
			color: $primary;
			font-weight: 600;
			&::after {
				display: inline-block;
				content: "";
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				z-index: 5;
				width: 198rpx;
				height: 3rpx;
				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(1);
					}
					.desc {
						color: $desc;
					}
					.price {
						color: $primary;
					}
				}
				.sku-item {
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid $line;
					&:last-child {
						padding-bottom: 0;
						border-bottom: none;
					}
				}
			}
			.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>