<template>
	<view class="content">
		<!-- tabs -->
		<u-sticky>
			<u-tabs
				class="tabs"
				:list="tabs"
				:scrollable="false"
				:current="index"
				lineColor="#34CE98" 
				@click="onTabs"
				sticky
			></u-tabs>
		</u-sticky>
        
        <button type="default" @click="$Router.push({name:'AfterSale'})">售后</button>
		<block v-if="array.length >= 1">
			<!-- 订单列表 -->
			<oct-order
				v-for="(item, arrayIndex) in array"
				:key="arrayIndex"
				:order-info="item"
				@onBtn="onType"
			></oct-order>
			<!-- 加载更多 -->
			<view class="pages-load">
				<u-loadmore :status="status" />
			</view>
		</block>
		<block v-else>
			<view class="vertical order-null">
				<u-empty
						mode="order"
						icon="http://cdn.uviewui.com/uview/empty/order.png"
						text="暂无相关订单"
						textColor="#999"
				></u-empty>
			</view>
		</block>
	</view>
</template>

<script>
	import { orders, del, cancel, sign } from '@/apis/interfaces/order'
	export default {
		data() {
			return {
				status: "loading",
				tabs: [
					{name: "售后申请", type: "unpay"},
					{name: "处理中", type: "paid"},
					{name: "申请记录", type: "completed"},
				],
				index: 0,
				array: [],
				page : 1
			};
		},
		onShow() {
			if(this.$store.getters.getRefresh == 1) {
				this.$store.commit('setRefresh', 0)
				this.array = []
				this.page  = 1
				this.getOrder()
			}
		},
		mounted() {
			this.index = this.$Route.query.index
			this.getOrder()
		},
		methods:{
			getOrder(){
				orders({
					state: this.tabs[this.index].type,
					page : this.page
				}).then(res => {
					if(res.page.current === 1){
						this.array = []
					}
					let ordersArr = res.data.map(val => {
						return {
							no			: val.order_no,
							cover		: val.items[0].sku.cover,
							name		: val.items[0].sku.goods_name,
							price		: val.total,
							sum			: val.items[0].qty,
							stateText	: val.state,
							cans	    : val.can
						}
					})
					this.array = this.array.concat(ordersArr)
					this.status = res.page.has_more ? 'loadmore' : 'nomore'
				})
			},
			onTabs(e){
				this.page = 1
				this.index = e.index
				this.getOrder()
			},
			onType(e){
				let orderNo = e.order.no
				let onFount

				switch (e.type){
					case 'delete':
						onFount = del(orderNo)
						break;
					case 'cancel':
						onFount = cancel(orderNo)
						break;
					case 'logistic':
						this.$Router.push({
							name: 'OrderLogistics',
							params: {
								orderNo
							},
						})
						break;
					case 'pay':
						this.$Router.push({
							name: 'Pay',
							params: {
								orderNo : orderNo,
								price   : e.order.price,
								oepnType: 'order'
							}
						})
						break;
					case 'sign':
						onFount = sign(orderNo)
						break;
				}
				
				if(!onFount) return
				
				onFount.then(res =>{
					let orderIndex = this.array.findIndex(val => val.no === e.order.no)
					if(e.type === 'delete' || e.type === 'sign'){
						this.array.splice(orderIndex, 1)
						return
					}
					if(e.type === 'cancel'){
						this.array.splice(orderIndex, 1, {
							no			: res.order_no,
							cover		: res.items[0].sku.cover,
							name		: res.items[0].sku.goods_name,
							price		: res.items[0].price,
							sum			: res.items[0].qty,
							stateText	: res.state,
							cans	    : res.can
						})
						return
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		},
		onReachBottom() {
			if(this.status === 'loadmore'){
				this.page += 1
				this.status = 'loading'
				this.getOrder()
			}
		}
	}
</script>

<style lang="scss">
	.content{
		background: $window-color;
		min-height: 100vh;
	}
	.tabs{
		background: white;
	}
	// 数据列表空
	.order-null{
		height: 80vh;
	}
	// 加载分页
	.pages-load{
		padding-bottom: $padding;
	}
</style>
