<template>
	<view class="order">
		<u-navbar title="我的订单" @leftClick="leftClick" placeholder bg-color="#fff0e7"></u-navbar>
		<view class="tabs-wrap">
			<u-tabs
				:list="tabList"
				:current="currentType"
				lineColor="#E39B46"
				lineHeight="12rpx"
				:activeStyle="{
					color: '#333333',
					fontSize: '26rpx',
					fontWeight: 'bold'
				}"
				:inactiveStyle="{
					color: '#333333',
					fontSize: '26rpx',
				}"
				@click="changeTab"
			>
			</u-tabs>
		</view>
		<view class="order-inner">
			<scroll-view style="height: 100%;"
				scroll-y="true" 
				refresher-enabled 
				:refresher-triggered="refreshState"
				@refresherrefresh="onScrollRefresh"
				@scrolltolower="loadMoreData" 
			>
				<template v-if="currentOrder.length > 0">
					<view class="order-item" v-for="item in currentOrder" :key="item.id" >
						<view class="order-hd">
							<view class="order-id">订单号 {{ item.id }}</view>	
							<view class="order-time">{{ item.create_time }}</view>	
						</view>		
						<view class="order-address">
							<view class="name">
								<view style="min-width: 55%; display: flex;">
									<view class="name-left">
										{{ item.send_address[0] }}
									</view>
									<view class="name-icon">
										<image src="../../static/mine/m_order_arrow.png" mode=""></image>
									</view>
								</view>
								<view class="name-right" style="flex: 1;">
									{{ item.take_address[0] }}
								</view>
							</view>
							<view class="address-text">
								<view class="address-text-inner" >
									{{ item.send_address[2] }}
								</view>
								<view class="address-text-inner">
									{{ item.take_address[2] }}
								</view>	
							</view>
						</view>	
						<view class="order-opera">
							<template v-if="currentType === 0">
								<u-button text="取消付款" plain shape="circle" @click="confirmCancel(item)"></u-button>
								<u-button text="去付款" type="warning" plain shape="circle" @click="selectPayMent(item)"></u-button>
							</template>
							<!-- <template v-else-if="currentType === 1"> -->
								<u-button text="查看预览" type="warning" plain shape="circle" @click="jumpPage(item)"></u-button>
								<u-button @click="toViewLogistics(item)" v-if="currentType==2||currentType==3"  text="物流详情" type="warning" plain shape="circle" ></u-button>
							<!-- </template> -->
						</view>	
					</view>
				</template>
				<view class="no-data" v-if="currentOrder.length <= 0">
					暂无订单
				</view>
				<u-modal
					showCancelButton
					:show="show" 
					:title="title" 
					:content="content" 
					:cancelText="cancelText" 
					:confirmText="confirmText"
					confirmColor="#E08745"
					@cancel="show = false"
					@confirm="cancelOrder"
				>
				</u-modal>
				<u-popup :show="showPopup" closeOnClickOverlay @close="showPopup = false">
					<view class="popup-content">
						<PayPatter v-model="pay_payment"></PayPatter>
						
						<view class="popup-footer">
							<u-button class="v-default" shape="circle" @click="showPopup = false">取消</u-button>
							<u-button class="v-primary" shape="circle" type="primary" @click="onRePayment(currentPayInfo)">确认</u-button>
						</view>	
					</view>
				</u-popup>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { rePayment, cancelPayment, getOrderList } from '@/request/yyf.js';
	import PayPatter from '@/components/Pay-patter/Pay-patter.vue';
	
	export default {
		components: {
			PayPatter
		},
		data() {
			return {
				currentType: 0,
				orderType: '0',
				show: false, // 弹窗状态
				title: "警告",
				content: "确认取消订单吗？",
				confirmText: "确认",
				cancelText: "取消",
				currentId: '',
				orderList: {
					'0': [],
					'1': [],
					'2': [],
					'3': [],
					'4': [],
				},
				params: {
					'0': { page: 1 },
					'1': { page: 1 },
					'2': { page: 1 },
					'3': { page: 1 },
					'4': { page: 1 },
				},
				total: {
					'0': { total: 0 },
					'1': { total: 0 },
					'2': { total: 0 },
					'3': { total: 0 },
					'4': { total: 0 },
				},
				showPopup: false,
				pay_payment: '',
				currentPayInfo: {},
				refreshState: false
			}
		},
		computed: {
			tabList() {
				return [
					{ name: '待付款', type: '0', badge: { value: this.orderNum['0'] || 0 } },
					{ name: '待寄出', type: '1', badge: { value: this.orderNum['1'] || 0 } },
					{ name: '已寄出', type: '2', badge: { value: this.orderNum['2'] || 0 } },
					{ name: '被退回', type: '3', badge: { value: this.orderNum['3'] || 0 } },
					{ name: '已取消', type: '4', badge: { value: this.orderNum['4'] || 0 } },
				]
			}, 
			currentOrder() {
				return this.orderList[this.currentType]
			},
			orderNum() {
				return this.$storeMine.orderNum;
			}, 
		},
		watch: {
			'$Route'(newVal) {
				console.log(newVal);
			}
		},
		methods: {
			jumpPage(item) {
				this.$Router.push({
					path: '/pages/preview/preview',
					query: {
						...item
					}
				})
			},
			toViewLogistics(data){
				uni.navigateTo({
					url:'pages/waybill-info/waybill-info?id='+data.id,
					
				})
				// console.log(data);
			},
			leftClick() {
				this.$Router.replace('/pages/mine/mine');
			}, 
			changeTab({ index, type }) {
				if(type === this.currentType) {
					return 
				}
				this.currentType = index;
				this.orderType = type;
				
				if(this.orderList[this.currentType].length <= 0) {
					this.queryData();
				}
			},
			confirmCancel({ id }) {
				this.currentId = id;
				this.show = true;
			},
			async cancelOrder() {
				const { data } = await cancelPayment({
					id: this.currentId
				});
				if(data.code === 1) {
					uni.$u.toast('订单已取消');
					this.show = false;
					this.refreshData();
					this.$actionsMine.onGetOrderNum();
				} else {
					uni.$u.toast(data.msg);
				}
			},
			selectPayMent(item) {
				this.currentPayInfo = { ...item };
				console.log(item);
				this.showPopup = true;
			},
			// 重新支付
			async onRePayment(item) {
				let { message, affix, thumb, mail_type, coupon, send_type, pay_payment, send_address, take_address, id } = item;
				
				// this.$store.letterInfo = {};
				// this.$store.letterInfo.message = message;
				// this.$store.letterInfo.mail_type = mail_type;
				// this.$store.letterInfo.thumb = thumb;
				// this.$store.letterInfo.affix = affix;
				// this.$store.letterInfo.coupon = coupon;
				// this.$store.letterInfo.send_type = send_type;
				// this.$store.letterInfo.pay_payment = pay_payment;
				
				// this.$store.letterInfo.send_address = send_address.reduce((total, item)=> total + ' ' + item);
				// this.$store.letterInfo.take_address = take_address.reduce((total, item)=> total + ' ' + item);
				
				// // console.log(this.$store.letterInfo);
				
				// this.$Router.push({
				// 	path: '/pages/confirmOrder/confirmOrder',
				// 	query: {
				// 		...item
				// 	}
				// })
				
				
				const { data } = await rePayment({
					id,
					pay_payment: this.pay_payment
				})
				
				if (data.code === 1) {
					if(this.pay_payment === 1) {
						uni.showToast({
						  title: data.msg,
						});
						this.refreshData();
					} else {
						// #ifdef H5
						 location.href = data.data.pay.url;
						// #endif
						
						// #ifdef MP-WEIXIN
						 uni.showToast({
							 title: "小程序支付暂未配置",
							 icon: "error",
						 });
						// #endif
					}
				 
				} else {
				 uni.showToast({
					title: data.msg,
					icon: 'error'
				 })
				}
			},
			// 刷新
			refreshData() {
				this.orderList[this.currentType] = [];
				this.params[this.currentType].page = 1;
				this.queryData();
			}, 
			onScrollRefresh() {
				this.refreshState = true;
				this.refreshData()
			},
			async queryData() {
				const { data } = await getOrderList({
					...this.params[this.currentType],
					status: this.currentType,
					order: 'desc'
				})
				
				if(data.code === 1) {
					this.total[this.currentType].total = data.data.total;
					this.orderList[this.currentType].push(...data.data.data);
				}
				setTimeout(()=>{
					this.refreshState = false;
				}, 1000)
			},
			loadMoreData() {
				if(this.total[this.currentType].total > this.orderList[this.currentType].length) {
					this.params[this.currentType].page += 1;
					this.queryData();
				}
			}
 		},
		onLoad() {
			let { type } = this.$Route.query;
			this.currentType = parseInt(type);
			this.orderType = type;
			this.$actionsMine.onGetOrderNum();
			
			this.queryData();
		}
	}
</script>

<style lang="scss" scoped>
/deep/.u-tabs__wrapper__nav__line {
	bottom: 0;
}

/deep/.u-tabs__wrapper__nav__item {
	box-sizing: border-box;
	min-width: 20%;
}

/deep/.u-badge--error {
	margin-left: 0 !important;
	background-color: transparent;
	color: #000;
	font-size: 24rpx;
}

.order {
	height: 100vh;
	display: flex;
	flex-direction: column;
	
	.tabs-wrap {
	}
	
	.order-inner {
		flex: 1;
		overflow: auto;
		background-color: rgba(255, 255, 255, .33);
		padding: 35rpx 30rpx;
		
		.order-item {
			box-sizing: border-box;
			padding: 42rpx 40rpx;
			background-color: #fff;
			border-radius: 40rpx;
			margin-bottom: 40rpx;
			
			.order-hd {
				display: flex;
				justify-content: space-between;
				color: #333;
				font-size: 26rpx;
				font-family: OPPOSans-Medium, OPPOSans;
			}
			
			.order-address {
				padding-top: 33rpx;
				.name {
					display: flex;
					align-items: center;
					font-size: 34rpx;
					font-weight: bold;
					&-icon {
						padding: 0 28rpx;
						image {
							width: 190rpx;
							height: 12rpx;
						}
					}
				}
				.address-text {
					padding-top: 10rpx;
					display: flex;
					.address-text-inner {
						width: 50%;
						font-size: 24rpx;
						font-family: OPPOSans-Medium, OPPOSans;
						font-weight: 500;
						color: #ababab;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						margin-right: 5%;
						&:last-child {
							flex: 1;
						}
					}
				}
			}
			.order-opera {
				margin-top: 46rpx;
				display: flex;
				justify-content: flex-end;
				/deep/.u-button {
					margin: 0 0 0 20rpx;
					padding: 12rpx 22rpx;
					height: auto;
					background-color: transparent;
					border-width: 2rpx;
					width: auto;
				}
				
				/deep/.u-button--warning {
					color: #f9ae3d;
				}
			}
		}
	}
	
	.no-data {
		padding: 100rpx 0;
		text-align: center;
		color: #ababab;
	}
}

.popup-content {
	padding: 40rpx;
	.popup-footer {
		padding-top: 40rpx;
		display: flex;
		.v-default {
			margin-right: 20rpx;
		}
		.v-primary {
			background-color: #E39B46;
			border-color: #E39B46;;
		}
	}

}
</style>
