<template>
	<view>
		<!-- 搜索 -->
		<view class="backcorfff width100 height120" style="position: fixed;z-index: 999;" :style="{top:headerTop}" >
			<view class="alijusstart">
				<view class="input-box">
					<view class="icon search"></view>
					<input placeholder="搜索我的订单" v-model="couponName" placeholder-style="color:#c0c0c0;"
						@input="toSearch()" />
				</view>
				<view class="searbtn">搜索</view>
			</view>
			<view class="width100 bor-botm1 mart10 marb5"></view>
			<!-- 顶部导航 -->
			<view class="topTabBar">
				<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
					<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}
					</view>
				</view>
			</view>
		</view>

		<scroll-view scroll-x='true' :style="{top:headerswper}" class="srollview width100" scroll-with-animation>
			<view class="conent" :class="[ordertypeid == index ? 'activeconent' : 'frontconent']"
				v-for="(item,index) in orderTyplist" :key="index">{{item}}</view>
		</scroll-view>
		<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
		<view class="order-list">
			<view class="list">
				<view class="onorder" v-if="orderList.length==0">
					<image :src="imagewxUrl+imgadres"></image>
				</view>
				<view class="row" v-for="(row,index) in orderList" :key="index"
					@click="jumpDetails(row.highChildOrderList[0].goodsType,row.id)">
					<view class="width96 mart10 alijusstart">
						<view class="width70">
							<view class="orderlabel">在线加油</view>
							<view class="unread" v-if="row.orderStatus == 3 && !row.whetherCheck"></view>
						</view>
						<view class="width30 fotrt fcor666 font12">
							{{typeText[row.orderStatus]}}
						</view>
					</view>

					<view class="width96 height25 mart10">
						<view class="width70 flleft fotlt ">
							<view class="font16 fontwig6 text1 fcor333 alijusstart">
								<image src="../../../static/img/order5.png" class="marglerig"
									style="width: 50rpx;height: 50rpx;"></image>{{row.highChildOrderList[0].goodsName}}
							</view>
						</view>
						<view class="width30 flright fotrt fcor666 font15 fotrt">
							<view class="font14 fcor333">
								x1
							</view>
						</view>
					</view>
					<view class="width96 mart10 font12 fcor999">
						订单编号:{{row.orderNo}}
					</view>
					<view class="width96 height25 paddbotm10  alijusstart">
						<view class="width70  fotlt ">
							<view class="font12 text1 fcor999 mart5">
								下单时间 : {{row.createTime | formatDate('-')}}
							</view>
						</view>
						<view class="width30 fotrt fcor666 font15 fotrt">
							<view class="fotrt font12 text1 fcor999 mart5">
								合计:<text class="fcor333 font18"> ￥{{row.payPrice}} </text>
							</view>
						</view>
					</view>
					<view class="width96 mart10 marb5" style="border:1px dashed #f4f4f4;"
						v-if="(row.orderStatus==1 && row.highChildOrderList[0].goodsType !=6 && row.highChildOrderList[0].goodsType !=5)">
					</view>
					<view class="btns"
						v-if="(row.orderStatus==1 && row.highChildOrderList[0].goodsType !=6 && row.highChildOrderList[0].goodsType !=5)">
						<block>
							<view class="default" @click.stop="cancelOrder(row.id,row.highChildOrderList[0].goodsType)">
								取消订单
							</view>
							<view class="pay" @click.stop="toPayment(row)">立即支付</view>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getUserOrderList,
		cancelOrder,
		thirdCancelOrder,
		orderCheck
	} from '../../../Utils/Api.js';
	let app = getApp()
	export default {
		data() {
			return {
				imagewxUrl: app.globalData.imageWxImg,
				imgadres: 'noorder.png',
				imgadres1: 'dhf.png',
				headerTop: "0px",
				headerswper:'120px',
				typeText: {
					1: '等待付款',
					2: '订单已支付',
					3: '订单已完成',
					4: '订单已退款',
					5: '订单已取消',
					6: '订单退款中',
					7: '订单退款失败'
				},
				// 退换货
				orderType: ['全部', '待支付', '已支付', '已完成', '已退款'],
				//订单列表 演示数据
				orderList: [],
				list: [],
				tabbarIndex: 0,
				pageNum: 1,
				pageSize: 10,
				isNoMoreData: false,
				loadingText: '',
				typeId: '',
				imageUrl: app.globalData.imgUrl,
				reFresh: "",
				orderTyplist: ['全部订单', '在线加油', '肯德基', '星巴克', '话费充值', '卡券订单'], //订单类型
				ordertypeid: 1 //类型id
			}
		},

		onLoad(option) {
			let tbIndex = parseInt(option.tbIndex) + 1;
			if (tbIndex == 0) {
				this.typeId = '';
			} else {
				this.typeId = tbIndex;
			}
			this.list = this.orderList[this.typeId];
			this.tabbarIndex = tbIndex;
			this.getUserOrderList();
		},
		onReachBottom() {
			this.getUserOrderList();
		},
		filters: {
			toFixed: function(x) {
				return parseFloat(x).toFixed(2);
			},
			//过滤器 用于格式化时间
			formatDate: function(value, spe = '/') {
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
			}
		},
		watch: {
			//监听reFresh,如果有修改就执行监听器
			reFresh: function() {
				this.tabbarIndex = 0;
				this.typeId = '';
				this.pageNum = 1;
				this.orderList = []
				this.isNoMoreData = false;
				this.getUserOrderList();
			}
		},
		methods: {
			//查询订单列表
			getUserOrderList() {
				uni.showLoading({
					title: '加载中...'
				})
				if (this.isNoMoreData) {
					uni.hideLoading()
					return false;
				}
				let statusId;
				if (this.typeId == 2) {
					statusId = '2,6,7';
				} else {
					statusId = this.typeId;
				}

				let pagenum = this.pageNum;
				let params = {
					status: statusId,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}

				getUserOrderList(params).then(res => {
					if (res.return_code == '000000' && res.return_data.list != '') {
						uni.hideLoading();
						this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
						if (res.return_data.total == (this.pageNum * this.pageSize)) {
							this.isNoMoreData = true;
						}
						this.orderList = this.orderList.concat(res.return_data.list);
						this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
					} else {
						this.orderList = [];
						uni.hideLoading()
					}
				})


			},
			//跳转详情
			jumpDetails(item, e) {
				console.log('===========')
				this.orderCheck(e);
				if (item == 4 || item == 9 || item == 10) {
					uni.navigateTo({
						url: '/qianzhu-KFC/order-details/order-details?id=' + e
					})
					return;
				}
				uni.navigateTo({
					url: '../order_details/order_details?id=' + e
				})

			},
			//查看状态
			orderCheck(item) {
				let datas = {
					orderId: item
				}
				orderCheck(datas).then(res => {

				});
			},
			showType(tbIndex) {
				this.tabbarIndex = tbIndex;
				this.pageNum = 1;
				this.orderList = []
				this.isNoMoreData = false;
				if (tbIndex == 0) {
					this.typeId = '';
				} else {
					this.typeId = tbIndex;
				}
				this.getUserOrderList();
			},
			showLogistics(row) {

			},
			remindDeliver(row) {
				uni.showToast({
					title: '已提醒商家发货'
				})
			},
			cancelOrder(row, item) {
				let that = this;
				uni.showModal({
					title: '取消订单',
					content: '确定取消此订单？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中...'
							})
							let params = {
								orderId: row,
							}
							if (item == 9 || item == 4) {
								thirdCancelOrder(params).then(res => {
									if (res.return_code == '000000') {
										uni.hideLoading();
										uni.showToast({
											title: res.return_data,
											icon: 'none',
											duration: 2000
										})
										this.pageNum = 1;
										this.orderList = []
										this.isNoMoreData = false;
										that.getUserOrderList();
									} else {
										uni.showToast({
											title: res.return_msg,
											icon: 'none',
											duration: 2000
										})
										uni.hideLoading()
									}
								})
								return;
							}
							cancelOrder(params).then(res => {
								if (res.return_code == '000000') {
									uni.hideLoading();
									uni.showToast({
										title: res.return_data,
										icon: 'none',
										duration: 2000
									})
									this.pageNum = 1;
									this.orderList = []
									this.isNoMoreData = false;
									that.getUserOrderList();
								} else {
									uni.showToast({
										title: res.return_msg,
										icon: 'none',
										duration: 2000
									})
									uni.hideLoading()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//去支付
			toPayment(row) {
				let payTypes;
				if (row.payType == 1 || row.payType == null) {
					payTypes = 3;
				} else if (row.payType == 2) {
					payTypes = 1;
				} else {
					payTypes = 2;
				}
				if (row.highChildOrderList[0].goodsType == 4 || row.highChildOrderList[0].goodsType == 9 || row
					.highChildOrderList[0].goodsType == 10) {
					uni.redirectTo({
						url: '/qianzhu-KFC/payment-method/payment-method?orderId=' + row.id + '&amount=' + row
							.payPrice + '&productType=' + row.productType
					})
					return;
				}
				uni.redirectTo({
					url: "/pages/pay/payment/payment?amount=" + row.payPrice +
						'&paytype=' + payTypes + '&orderId=' + row.id + '&couponId=' + this.orderList[0]
						.highChildOrderList[0].goodsId + '&typeaout=' + this.orderList[0].highChildOrderList[0]
						.ext1 + '&goodsType=' + row.highChildOrderList[0].goodsType
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.input-box {
		width: 72%;
		margin-left: 5%;
		margin-top: 15px;
		height: 70rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		position: relative;
		display: flex;
		align-items: center;
		border-radius: 15px 0 0 15px;

		.icon {
			display: flex;
			align-items: center;
			position: absolute;
			top: 2px;
			left: 5px;
			width: 60upx;
			height: 60upx;
			font-size: 34upx;
			color: #c0c0c0;
		}

		input {
			padding-left: 50upx;
			height: 28upx;
			font-size: 26upx;
			width: 100%;
		}
	}

	.searbtn {
		height: 35px;
		width: 18%;
		background-color: #009DFF;
		font-size: 16px;
		text-align: center;
		margin-top: 15px;
		line-height: 35px;
		color: #ffffff;
		letter-spacing: 2px;
		border-radius: 0 15px 15px 0;
	}

	.topTabBar {
		width: 100%;
		background-color: #ffffff;
		height: 80upx;
		display: flex;
		justify-content: space-around;

		.grid {
			width: 20%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #444;
			font-size: 28upx;

			.text {
				height: 76upx;
				display: flex;
				align-items: center;

				&.on {
					color: #009dff;
					border-bottom: solid 8upx #0083f5;
				}
			}

		}
	}

	.srollview {
		position: fixed;
		z-index: 999;
		height: 50px;
		top: 120px;
		background-color: #f3f3f3;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		white-space: nowrap;

		.conent {
			height: 24px;
			line-height: 24px;
			margin-top: 15px;
			padding-left: 10px;
			font-size: 12px;
			padding-right: 10px;
			border-radius: 20px;
			margin-left: 10px;
			display: inline-flex;
			flex-direction: column;
			text-align: center;
			position: relative;
		}
	}

	.frontconent {
		background-color: #ffffff;
		color: #333333;
	}

	.activeconent {
		background-color: #e8eff4;
		color: #009DFF;
	}

	.order-list {
		margin-top: 170px;
		padding-top: 20upx;
		width: 100%;

		.list {
			width: 94%;
			margin: 0 auto;

			.onorder {
				width: 100%;
				height: 50vw;
				display: flex;
				justify-content: center;
				align-content: center;
				flex-wrap: wrap;

				image {
					width: 70vw;
					margin-top: 150px;
				}

				.text {
					width: 100%;
					height: 60upx;
					font-size: 28upx;
					color: #444;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.row {
				width: calc(100% - 40upx);
				padding: 10upx 20upx;
				border-radius: 10upx;
				background-color: #fff;
				margin-bottom: 30upx;

				.unread {
					width: 10px;
					height: 10px;
					background-color: #e75e58;
					border-radius: 50%;
					margin-top: -25px;
					position: absolute;
					margin-left: 60px;
				}

				.type {
					font-size: 26upx;
					color: #0083f5;
					height: 50upx;
					display: flex;
					align-items: center;
				}

				.order-info {
					width: 100%;
					display: flex;

					.left {
						flex-shrink: 0;
						width: 25vw;
						height: 25vw;

						image {
							width: 25vw;
							height: 25vw;
							border-radius: 10upx;
						}
					}

					.right {
						width: 100%;
						margin-left: 10upx;
						position: relative;

						.name {
							width: 100%;
							font-size: 18px;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}

						.spec {
							color: #a7a7a7;
							font-size: 14px;
						}

						.price-number {
							width: 100%;
							font-size: 15px;
							display: flex;

							.price {
								font-size: 14px;
								margin-right: 5upx;
							}

						}
					}
				}

				.detail {
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					height: 60upx;
					font-size: 26upx;

					.sum {
						padding: 0 8upx;
						display: flex;
						align-items: flex-end;

						.price {
							font-size: 30upx;
						}
					}

				}

				.btns {
					height: 80upx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					view {
						min-width: 120upx;
						height: 60rpx;
						padding: 0 20upx;
						border-radius: 50upx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28upx;
						margin-left: 20upx;
					}

					.default {
						border: solid 1upx #ccc;
						color: #666;
					}

					.pay {
						background-color: #0083f5;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.orderlabel {
		width: 50px;
		border-radius: 5px;
		height: 22px;
		line-height: 22px;
		background-color: #eeebeb;
		color: #797979;
		text-align: center;
		padding-left: 10px;
		padding-right: 10px;
		font-size: 12px;
	}
</style>
