<template>
	<view class="content">
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" :current="current" :scrollable="false" @click="changeTab"></u-tabs>
		</u-sticky>
		<u-empty :show="total == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in pageList" :key="index">
				<view class="orderModel">
					<view class="orderTop" @click="gotoDetail(item.order_id)">
						<view class="orderTime">
							{{item.created_at}}
						</view>
						<view class="orderStatus">
							{{item.status_txt}}
						</view>
					</view>
					<view class="orderBaseInfo" @click="gotoDetail(item.order_id)"
						v-for="(jtem,jndex) in item.order_goods" :key="jndex">
						<view class="orderImg">
							<image class="init_image" :src="jtem.goods_img" mode=""></image>
						</view>
						<view class="orderInfo">
							<view class="orderName">
								{{jtem.goods_name}}
							</view>
							<view class="orderNorms">
								<span>{{jtem.goods_attr}}</span>
								<span>x{{jtem.goods_number}}</span>
							</view>
							<view class="orderPrice">
								<span>¥</span>{{item.order_amount}}
							</view>
						</view>
					</view>
					<view class="orderBtnList">
						<view class="orderBtn" @click="payMthods(item.order_id)" v-show="item.order_status == 0">
							去支付
						</view>
						<view class="orderBtn" @click="goCode(item.verification_code)" v-show="item.order_status == 2">
							核销码
						</view>
						<view class="orderOtherBtn" @click="del_order(item.order_id)"
							v-show="item.order_status == 0 || item.order_status == 1">
							取消
						</view>
						<view class="orderOtherBtn" @click="gotoDetail(item.order_id)" v-show="item.order_status == 3">
							去评价
						</view>
					</view>
				</view>
			</u-list-item>

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

<script>
	export default {
		data() {
			return {
				pageList: [],
				pageNum: 1,
				list: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '待到货'
				}, {
					name: '待领取'
				}, {
					name: '待评价'
				}],
				nowStatus: "-1",
				totalPage: 0,
				current: 1,
				total: 0,
				btnFlag: false
			}
		},
		onLoad(option) {
			this.nowStatus = option.status;
		},
		onShow() {
			this.btnFlag = false
			this.pageType()
		},
		methods: {
			goCode(code) {
				uni.navigateTo({
					url: '/pageSub-pc/pages/orderCode/orderCode?code=' + code
				})
			},
			payMthods(order_id) {
				if (this.btnFlag) {
					return
				}
				this.btnFlag = true
				setTimeout(() => {
					this.btnFlag = false
				}, 10000)
				this.$utils.payOrder(order_id)
			},
			pageType() {
				this.pageList = [];
				if (this.nowStatus == '-1' || this.nowStatus == undefined) {
					this.pageNum = 1;
					this.getOrderList();
					this.current = 0
				}
				if (this.nowStatus == '0') {
					this.pageNum = 1;
					this.getOrderList();
					this.current = 1
				}
				if (this.nowStatus == '1') {
					this.pageNum = 1;
					this.getOrderList();
					this.current = 2
				}
				if (this.nowStatus == '2') {
					this.pageNum = 1;
					this.getOrderList();
					this.current = 3
				}
				if (this.nowStatus == '3') {
					this.pageNum = 1;
					this.getOrderList();
					this.current = 4
				}
			},
			del_order(id) {
				if (this.btnFlag) {
					return
				}
				this.btnFlag = true
				setTimeout(() => {
					this.btnFlag = false
				}, 4000)
				this.$request('/cance-order', 'POST', {
					order_id: id
				}).then(res => {
					console.log(res.data)
					this.$refs.uToast.show({
						type: 'success',
						message: "订单取消成功！",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png',
						complete() {}
					})
					this.pageType()
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message

					})
				})
			},
			scrolltolower() {
				if (this.totalPage == this.pageNum) {
					return
				}
				this.pageNum += 1;
				this.getOrderList();
			},
			//获取我的订单
			getOrderList() {
				this.$request('/order-list', 'GET', {
					order_status: this.nowStatus,
					page: this.pageNum
				}).then(res => {
					console.log(res.data)
					this.pageList = [...this.pageList, ...res.data.list];
					this.total = res.data.total;
					this.totalPage = res.data.total_page;
				}).catch(err => {
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '1111' + err.message
					// })
				})
			},
			changeTab(item) {
				this.pageList = []
				console.log('item', item);
				if (item.name == '全部') {
					this.pageNum = 1;
					this.nowStatus = "-1";
					this.getOrderList();
				}
				if (item.name == '待付款') {
					this.pageNum = 1;
					this.nowStatus = "0";
					this.getOrderList();
				}
				if (item.name == '待到货') {
					this.pageNum = 1;
					this.nowStatus = "1";
					this.getOrderList();
				}
				if (item.name == '待领取') {
					this.pageNum = 1;
					this.nowStatus = "2";
					this.getOrderList();
				}
				if (item.name == '待评价') {
					this.pageNum = 1;
					this.nowStatus = "3";
					this.getOrderList();
				}
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: '/pageSub-pc/pages/orderDetail/orderDetail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		background: #F8F8F8;
	}

	.orderModel {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		padding: 30rpx;
		margin-bottom: 0rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
	}

	.orderTop {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #ECECEC;
		margin-bottom: 20rpx;

		.orderTime {
			width: 50%;
			font-size: 24rpx;
			color: #666666;
		}

		.orderStatus {
			width: 50%;
			font-size: 24rpx;
			color: #333333;
			text-align: right;
		}
	}

	.orderBtnList {
		width: 100%;
		height: 60rpx;
		padding-top: 20rpx;
		line-height: 60rpx;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}

	.orderBtn {
		height: 58rpx;
		width: 160rpx;
		text-align: center;
		border-radius: 58rpx;
		border: 1rpx solid #E9799F;
		background-color: #E9799F;
		color: #ffffff;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.orderOtherBtn {
		height: 58rpx;
		line-height: 58rpx;
		width: 160rpx;
		text-align: center;
		border-radius: 58rpx;
		border: 1rpx solid #777777;
		background-color: #ffffff;
		color: #777777;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.orderBaseInfo {
		width: 100%;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
	}

	.orderImg {
		background-color: #f3d4d7;
		width: 180rpx;
		height: 180rpx;
		margin-right: 30rpx;
		overflow: hidden;
		border-radius: 8rpx;
	}

	.orderInfo {
		height: 180rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.orderName {
		font-size: 30rpx;
		color: #333333;
		line-height: 36rpx;
		display: -webkit-box;
		/* 使用弹性盒模型 */
		-webkit-box-orient: vertical;
		/* 垂直方向的弹性盒 */
		-webkit-line-clamp: 2;
		/* 显示两行 */
		overflow: hidden;
		/* 隐藏超出部分 */
		text-overflow: ellipsis;
		/* 使用省略号 */
	}

	.orderNorms {
		line-height: 58rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		color: #999999;
		font-size: 24rpx;
	}

	.orderPrice {
		height: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: baseline;
		color: #D61A62;
		font-size: 36rpx;

		span {
			font-size: 24rpx;
			margin-right: 10rpx;
		}
	}
</style>