<template>
	<view>
		<!-- 订单分类 -->
		<scroll-view class="nav" scroll-x="true" scroll-with-animation="true">
			<view :class="['nav-item', selectNavId === item.id ? 'nav-item-selected':'']"
				v-for="(item,index) in navList" :key="index" @click="selectNav(item.id)">
				{{item.name}}
			</view>
		</scroll-view>
		<!-- 订单列表 -->
		<store-order :list="returnInfo" @goSign="goSign" @goReToken="goReToken" />
		<!-- 分页 -->
		<uni-load-more :status="pageStatus" :iconSize="16" v-if="returnInfo.length > 0"></uni-load-more>
	</view>
</template>

<script>
	import { storeReturn, storeSign, storeToken } from '@/apis/interfaces/store'
	import storeOrder from '@/components/store-order/store-order'
	export default {
		comments: {
			storeOrder
		},
		data() {
			return {
				returnInfo: [], // 列表
				navList: [{
						name: '待审核',
						id: 'apply'
					}, {
						name: '已驳回',
						id: 'refuse'
					}, {
						name: '待返货',
						id: 'deliver'
					}, {
						name: '待签收',
						id: 'delivered'
					}, {
						name: '待确认退货',
						id: 'process'
					}, {
						name: '完成退货',
						id: 'completed'
					}
				],
				selectNavId: 'apply',

				// 分页
				pageStatus: '',
				goodsPage : 1
			}
		},
		created() {},
		onShow() {
			// 获取退货单列表
			this.returnData();
		},
		methods: {
			// 退货单列表
			returnData() {
				storeReturn({
					state: this.selectNavId,
					page: this.goodsPage
				}).then(res => {
					if (res.page.current === 1) {
						this.returnInfo = []
					}
					this.returnInfo = this.returnInfo.concat(res.data)
					this.goodsPage = res.page.current
					this.pageStatus = res.page.has_more ? 'more' : 'noMore'
				})
			},

			// 选择订单
			selectNav(id) {
				if (this.selectNavId !== id) {
					this.selectNavId = id
					this.returnData()
				}
			},

			// 签收订单
			goSign(info) {
				let id    = info.id
				let index = info.index
				uni.showModal({
					title: '是否签收此订单？',
					success: res => {
						if (res.confirm) {
							storeSign(id).then(() => {
								uni.showToast({
									icon: 'none',
									title: '签收成功'
								})
								setTimeout(() => {
									this.returnInfo.splice(index,1)
									// this.returnData()
								}, 500)
							}).catch(err => {
								uni.showToast({
									icon: 'none',
									title: err.message
								})
							})
						}
					}
				})
			},

			// 确认退货
			goReToken(info) {
				let id = info.id
				let index = info.index
				uni.showModal({
					title: '是否确认退货此订单？',
					success: res => {
						if (res.confirm) {
							storeToken(id).then(() => {
								uni.showToast({
									icon: 'none',
									title: '退货成功'
								})
								setTimeout(() => {
									// this.returnData()
									this.returnInfo.splice(index,1)
								}, 500)
							}).catch(err => {
								uni.showToast({
									icon: 'none',
									title: err.message
								})
							})
						}
					}
				})
			},

			// 下拉加载
			onReachBottom() {
				if (this.pageStatus == 'more') {
					this.pageStatus = 'loading'
					if (this.tabIndex === 'apply') {
						this.goodsPage += 1
						// 获取退货单列表
						this.returnData();
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 订单nav
	.nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		box-sizing: border-box;
		white-space: nowrap;
		font-size: $title-size*0.95;
		padding: 0 30rpx;
		background-color: #fff;
		color: #666;
		position: sticky;
		top: 0rpx;
		z-index: 1;

		.nav-item {
			display: inline-block;
			border-bottom: solid 4rpx #fff;
			padding: 30rpx 10rpx;
			margin-right: 10rpx;
		}

		.nav-item-selected {
			border-bottom: solid 4rpx $mian-color;
			color: $mian-color;
		}
	}
</style>
