<template>
	<view class="mallShipments">
		<!-- 订单分类 -->
		<view class="nav">
			<view :class="['nav-item' ,selectTypeId === item.id?'nav-item-selected':'']"
				v-for="(item,index) in typeList" :key="index" @click="selectType(item.id,index)">
				{{item.name}}
				{{item.id ==='signed' && count.signed >0 ? '('+count.signed + ')':''}}
				{{item.id ==='completed' && count.completed >0 ?'('+count.completed + ')':''}}
				{{item.id ==='init' && count.init >0 ?'('+count.init + ')':''}}
				{{item.id ==='delivered' && count.delivered >0 ?'('+count.delivered + ')':''}}
			</view>
		</view>
		<!-- 快递点  自提单显示 -->
		<scroll-view class="nav1" v-if='selectTypeIndex === 0 || selectTypeIndex === 1' scroll-x="true"	scroll-with-animation="true">
			<view :class="['nav-item' ,state === it.id?'nav-item-selected':'']" v-for="(it,idx) in typeList[selectTypeIndex].categrery"
				:key="idx" @click="selectNav(it.id)">
				{{it.name}}
				{{it.id ==='signed' && count.signed >0 ? '('+count.signed + ')':''}}
				{{it.id ==='completed' && count.completed >0 ?'('+count.completed + ')':''}}
				{{it.id ==='init' && count.init >0 ?'('+count.init + ')':''}}
				{{it.id ==='delivered' && count.delivered >0 ?'('+count.delivered + ')':''}}
			</view>
		</scroll-view>
		<!--退货单 -->
		<scroll-view class="nav1" v-else scroll-x="true" scroll-with-animation="true">
			<view :class="['nav-item' ,state === it.id?'nav-item-selected':'']" v-for="(it,idx) in typeList[selectTypeIndex].categrery"
				:key="idx" @click="selectNav(it.id)">
				{{it.name}}
				{{it.id ==='apply' && count.apply >0 ? '('+count.apply + ')':''}}
				{{it.id ==='deliver' && count.deliver >0 ?'('+count.deliver + ')':''}}
				{{it.id ==='delivered' && count.delivered >0 ?'('+count.delivered + ')':''}}
				{{it.id ==='signed' && count.signed >0 ?'('+count.signed + ')':''}}
				{{it.id ==='process' && count.process >0 ?'('+count.process + ')':''}}
				{{it.id ==='completed' && count.completed >0 ?'('+count.completed + ')':''}}
			</view>
		</scroll-view>

		<!-- 有订单列表 -->
		<block v-if="lists.length > 0">
			<!-- 订单列表 -->
			<view class="order-list" v-for="(item,index) in lists" :key="index" v-if='selectTypeIndex === 0 || selectTypeIndex === 1'>
				<MallShipmentsTemplate :item="item" />
				<view class="actions">
					<view class="nowPay" @click="goDetail(item.shipment_no)">查看详情</view>
					<view v-if="item.can.cancel" @click="nowCancel(index,item.shipment_no)" class="nowPay">取消订单</view>
					<view v-if="item.can.sign" @click="nowSign(index,item.shipment_no)" class="nowPay">确认签收</view>
					<view v-if="item.can.refund" @click="nowRefund(item.shipment_no)" class="nowPay">申请退货</view>
					<view v-if="item.can.logistic" @click="nowLogistics(item.shipment_no)" class="nowPay">查看物流</view>
				</view>
			</view>
			<!-- 有订单列表 -->
			<view class="" v-if="selectTypeIndex === 2">
			  <!-- 订单列表 -->
			  <view class="order-list" v-for="(item,index) in lists" :key="index">
			    <MallRefundsTemplate :item="item" />
			    <view class="actions">
			      <view @click="goDetail1(item.refund_id)" class="nowPay">查看详情</view>
			    </view>
			  </view>
			</view>
		</block>
	
		<!-- 没有订单列表 -->
		<no-list v-if="lists.length === 0" name='no-order' txt="暂无数据~" />

		<!-- <u-toast ref="uToast" /> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import MallShipmentsTemplate from '@/components/mall-shipments-template/mall-shipments-template'
	import MallRefundsTemplate from '@/components/mall-refunds-template/mall-refunds-template'
	import {
		mallShipmentsPostShop,
		mallShipmentsSign,
		mallShipmentsCancel
	} from '@/apis/interfaces/numberWeight'
	export default {
		components: {
			MallShipmentsTemplate,MallRefundsTemplate
		},
		data() {
			return {
				lists: [],
				page: 1,
				total: 0,
				navList: [],
				count: {}, // 订单数量
				typeList: [{
						name: '快递单',
						id: 'post',
						categrery: [{
								name: '待发货',
								id: 'init'
							},
							{
								name: '已发货',
								id: 'delivered'
							},
							{
								name: '已签收',
								id: 'signed'
							},
							{
								name: '已完成',
								id: 'completed'
							}
						]
					},
					{
						name: '自提单',
						id: 'take',
						categrery: [{
								name: '已提货',
								id: 'signed'
							},
							{
								name: '已完成',
								id: 'completed'
							}
						]
					},
					{
						name: '退货单',
						id: 'refund',
						categrery: [{
								name: '待审核',
								id: 'apply'
							}, {
								name: '待返货',
								id: 'deliver'
							}, {
								name: '待签收',
								id: 'delivered'
							}, {
								name: '已签收',
								id: 'signed'
							},
							{
								name: '待确认退货',
								id: 'process'
							},
							{
								name: '完成退货',
								id: 'completed'
							}
						]
					},
				],
				selectTypeId: 'post',
				state: 'init',
				selectTypeIndex: 0
			};
		},
		onLoad(e) {
			this.getList()
		},
		onShow() {
			if (uni.getStorageSync('refresh')) {
				this.reset()
			}
		},
		onUnload() {
			uni.setStorageSync('refresh', false)
		},
		onReachBottom() {
			if (this.total > this.lists.length) {
				this.page = this.page + 1
				this.getList()
			} else {
				this.$refs.uToast.show({
					title: '吼吼吼~我是有底的~',
					type: 'error',
					icon: false,
					duration: 3000
				})
			}
		},
		methods: {
			reset() {
				this.page = 1
				this.total = 0
				this.lists = []
				this.getList()
				uni.setStorageSync('refresh', false)
			},
			// 选择状态
			selectNav(id) {
				if (this.state !== id) {
					this.state = id
					this.reset()
				}
			},
			// 快递单post 提货单 take 退货单refund
			selectType(id,index) {
				if (this.selectTypeId !== id) {
					this.state = this.typeList[index].categrery[0].id
					this.selectTypeId = id
					this.selectTypeIndex = index
					this.reset()
				}
			},
			// 获取订单列表
			getList() {
				let data = {
					pageSize: 4,
					page: this.page,
					state: this.state
				}
				let apiUrl = ''
				if (this.selectTypeId === 'post') {
					apiUrl = 'mall/shipments/post'
				} else if(this.selectTypeId === 'take') {
					apiUrl = 'mall/shipments/shop'
					data.channel = 'app'
				} else if(this.selectTypeId === 'refund') {
					apiUrl = 'mall/refunds'
				}
				mallShipmentsPostShop(apiUrl, data).then(res => {
					this.count = res.count
					this.lists = this.lists.concat(res.lists.data)
					this.total = res.lists.page.total
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.message,
						type: 'error',
						icon: false,
						duration: 3000
					})
				})
			},
			// 取消提货单
			nowCancel(index, no) {
				uni.showModal({
					title: '哎呦，提醒你',
					content: '是否确认要取消订单啊，取消后请去我的权证中查看',
					success: (res) => {
						if (res.confirm) {
							mallShipmentsCancel(no).then(res => {
								this.$refs.uToast.show({
									title: res,
									type: 'error',
									icon: false,
									duration: 3000
								})
								this.lists.splice(index, 1)
								this.total = this.total - 1
							}).catch(err => {
								this.$refs.uToast.show({
									title: err.message,
									type: 'error',
									icon: false,
									duration: 3000
								})
							})
						} else if (res.cancel) {
							this.$refs.uToast.show({
								title: '放弃了~',
								type: 'error',
								icon: false,
								duration: 3000
							})
						}
					}
				});

			},
			// 签收提货单
			nowSign(index, no) {
				uni.showModal({
					title: '哎呦，提醒你',
					content: '是否确认已经收到商品了呀',
					success: (res) => {
						if (res.confirm) {
							mallShipmentsSign(no).then(res => {
								this.$refs.uToast.show({
									title: res,
									type: 'error',
									icon: false,
									duration: 3000
								})
								this.lists.splice(index, 1)
								this.total = this.total - 1
							}).catch(err => {
								this.$refs.uToast.show({
									title: err.message,
									type: 'error',
									icon: false,
									duration: 3000
								})
							})

						} else if (res.cancel) {
							this.$refs.uToast.show({
								title: '放弃了~',
								type: 'error',
								icon: false,
								duration: 3000
							})
						}
					}
				});
			},

			// 申请退货
			nowRefund(no) {
				// this.$Router.push({
				// 	name: 'MallShipmentsRefund',
				// 	params: {
				// 		no: no
				// 	}
				// })
				uni.navigateTo({
					url:'/pages/user/order/mallShipmentsRefund?no='+no
				})
			},
			// 查看物流
			nowLogistics(no) {
				// this.$Router.push({
				// 	name: 'Orderlogistics',
				// 	params: {
				// 		no: no
				// 	}
				// })
				uni.navigateTo({
					url:'/pages/user/order/logistics?no='+no
				})
			},
			// 查看详情
			goDetail(no) {
				// this.$Router.push({
				//   name: 'MallShipmentsInfo',
				//   query:{
				// 	  no:no
				//   }
				// })
				uni.navigateTo({
					url:'/pages/user/order/mallShipmentsInfo?no='+no
				})
			},
			// 查看退货单详情
			// 查看详情
			goDetail1(no){
				// this.$Router.push({
				//   name: 'MallRefundsInfo',
				//   params:{
				// 	  no:no
				//   }
				// })
				uni.navigateTo({
					url:'/pages/user/order/mallRefundsInfo?no='+no
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.mallShipments {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #F7F7F7;

		// 订单nav
		.nav {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			box-sizing: border-box;
			font-size: $title-size*0.95;
			padding: 0 30rpx;
			background-color: #fff;
			color: #666;
			border-top: solid 20rpx #f7f7f7;
			position: sticky;
			top: 0rpx;
			z-index: 10000;

			.nav-item {
				border-bottom: solid 4rpx #fff;
				padding: 30rpx 10rpx;
			}

			.nav-item-selected {
				border-bottom: solid 4rpx $mian-color;
				color: $mian-color;
			}
		}
		
		.nav1 {
			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:30rpx 30rpx 20rpx 30rpx;
			color: #666;
			position: sticky;
			top: 120rpx;
			z-index: 10000;
			background-color: #f7f7f7;
		
			.nav-item {
				display: inline-block;
				padding-right: 30rpx;
			}
		
			.nav-item-selected {
				color: $mian-color;
			}
		}

		// 订单列表
		.order-list {
			background-color: #fff;
			border-radius: 20rpx;
			min-height: 300rpx;
			margin: 30rpx 20rpx 0 20rpx;
			padding: 30rpx 30rpx 20rpx 30rpx;
			// border-top: solid 4rpx #cacaca;

			// 操作信息
			.actions {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				box-sizing: border-box;
				flex-wrap: wrap;
				flex: 1;
				font-size: 28rpx;
				color: #fff;
				border-top: solid 1rpx #EFF4F2;

				.nowPay {
					padding: 4rpx 20rpx;
					border-radius: 40rpx;
					margin-left: 20rpx;
					margin-top: 20rpx;
					// background-color: $mian-color;
					color: #999;
					border: solid 1rpx #cacaca;
				}

				.cancelOrder {
					padding: 10rpx 30rpx;
					border-radius: 40rpx;
					margin-left: 20rpx;
					margin-top: 20rpx;
					background-color: #DD524D;
				}

				.logistics {
					background-color: $mian-color;
					padding: 10rpx 30rpx;
					border-radius: 40rpx;
					margin-left: 20rpx;
					margin-top: 20rpx;
				}

				.sign {
					background-color: #DD524D;
					padding: 10rpx 30rpx;
					border-radius: 40rpx;
					margin-left: 20rpx;
					margin-top: 20rpx;
				}

				.evaluate {
					background-color: $mian-color;
					padding: 10rpx 30rpx;
					border-radius: 40rpx;
					margin-left: 20rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>
