<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="我的订单"></z-nav-bar>

		<view class="orderTabs">
			<view v-for="(item,index) in orderTabs" @click="orderTabCLi(item.value)"
				:class="orderListTab==item.value?'ordStyle':''">{{item.name}}</view>
		</view>

		<view class="orderList">
			<view class="orderItem" v-for="(ifex,inten) in orderList">
				<view class="orderState" v-if="ifex.orderStatus==0">待支付</view>
				<view class="orderState" v-if="ifex.orderStatus==1">待发货</view>
				<view class="orderState" v-if="ifex.orderStatus==2">待收货</view>
				<view class="orderState" v-if="ifex.orderStatus==3">已完成</view>
				<view class="orderContent" :key="index" v-if="ifex.orderType=='order'"
					v-for="(item,index) in ifex.products" @click="goOrdiCont(ifex)">
					<image :src="item.image" mode=""></image>
					<view class="itemJian">
						<view class="orderTitle">
							<text>{{item.productName}}</text>
						</view>
						<view class="orderPrice">
							￥<text style="font-weight: bold;">{{item.productPrice}}</text><br>
							<text style="color: #bbbbbb;font-size: 20rpx;margin-right: 10rpx;">X</text>
							<text style="color: #bbbbbb;">{{item.quantity}}</text>
						</view>
						<br clear="both">
					</view>
					<br clear="both">
				</view>
				<view class="orderContent" v-if="ifex.orderType=='point'" @click="goOrdiCont(ifex)">
					<image src="../../static/icon/oder_chong.png" mode="" style="height: 150rpx;"></image>
					<view class="itemJian">
						<view class="orderTitle">
							<text>花生币充值</text>
						</view>
						<view class="orderPrice">
							￥<text style="font-weight: bold;">{{ifex.realMoney}}</text>
						</view>
						<br clear="both">
					</view>
					<br clear="both">
				</view>
				<view class="orderContent" v-if="ifex.orderType=='vip'" @click="goOrdiCont(ifex)">
					<image src="../../static/icon/oder_vip.png" mode="" style="height: 150rpx;"></image>
					<view class="itemJian">
						<view class="orderTitle">
							<text>会员充值</text>
						</view>
						<view class="orderPrice">
							￥<text style="font-weight: bold;">{{ifex.realMoney}}</text>
						</view>
						<br clear="both">
					</view>
					<br clear="both">
				</view>				
				<view class="orderReal">
					<span style="color: #666; float: left; font-size: 12px;">下单时间：{{ifex.createTime}}</span>
					<span style="color: #666;margin-right: 10rpx;">实付款 : </span>
					<span>￥</span>{{ifex.realMoney}}
				</view>
				<view class="orderOper" v-if="ifex.orderStatus==0">
					<view class="opFix" @click="canceOrder(ifex)">取消订单</view>
					<view class="opCan" @click="goPay(ifex)">去支付</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	import {
		setPay,
		setPayAssign
	} from '@/config/utils';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				orderTabs: [{
					name: '全部',
					value: 9
				}, {
					name: '待支付',
					value: 0
				}, {
					name: '待发货',
					value: 1
				}, {
					name: '待收货',
					value: 2
				}, {
					name: '已完成',
					value: 3
				}],
				orderListTab: 9,
				orderList: [],
			}
		},
		onShow() {
			this.getOrderList()
		},
		computed: {
			...mapState(['userInfo']),
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getOrderList()
			uni.stopPullDownRefresh()
		},
		methods: {
			// 切换订单状态
			orderTabCLi(e) {
				this.orderListTab = e
				this.getOrderList()
			},

			// 获取订单列表
			getOrderList() {
				this.$http
					.post(`book/buyorder/appUserGetlist?userId=${this.userInfo.id}&orderStatus=${this.orderListTab}`)
					.then(res => {						
						this.orderList = res.page.list
					})
			},

			// 订单详情
			goOrdiCont(e) {
				uni.navigateTo({
					url: './orderLCont?orderId=' + e.orderId + '&orderType=' + e.orderStatus
				});
			},

			// 取消订单
			canceOrder(e) {
				uni.showModal({
					title: '提示',
					content: '确定要取消订单吗？',
					confirmText: "取消订单",
					cancelText: "考虑一下",
					confirmColor: '#c96713',
					cancelColor: '#555',
					success: res => {
						if (res.confirm) {
							this.$http
								.post(`book/buyorder/appDelete?orderId=${e.orderId}`)
								.then(res => {
									uni.showToast({
										icon: 'none',
										title: '取消订单成功'
									})
									this.getOrderList()
								})
						}
					}
				});
			},

			// 支付
			goPay(payItem) {
				setPay({
					typePay: 'alipay',
					subject: 'order',
					totalAmount: payItem.realMoney,
					type: 2,
					relevanceoid: payItem.orderSn,
					customerId: this.userInfo.id,
				}, res => {
					if (res.success) {
						uni.showToast({
							title: "支付成功"
						});
					} else {
						uni.showToast({
							title: "支付失败",
							icon: "none",
							image: '../../static/icon/ic_close.png'
						});
					}
					this.getOrderList()
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.orderTabs {
		margin: 70rpx 0 0 0;
		width: 100%;
		padding: 0 3% 3% 3%;
		position: fixed;
		top: 80rpx;
		background-color: #f7faf9;
		z-index: 100;

		view {
			display: inline-block;
			padding: 0 0 20rpx 0;
			margin: 40rpx 0 15rpx 0;
			width: 20%;
			text-align: center;
			font-size: 30rpx;
		}

		.ordStyle {
			border-bottom: 5rpx solid #54a966;
			color: #54a966;
			font-weight: bold;
		}
	}

	.orderList {
		padding: 20rpx;
		margin-top: 130rpx;

		.orderItem {
			padding: 30rpx 10rpx 30rpx 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			margin-bottom: 30rpx;

			.orderState {
				
				text-align: right;
				font-size: 30rpx;
				margin: 0 20rpx 30rpx 0;
				font-weight: bold;				
				color: #d70808;
			}

			.orderContent {
				margin-bottom: 20rpx;

				image {
					width: 150rpx;
					height: 180rpx;
					margin-right: 20rpx;
					float: left;
				}

				.itemJian {
					float: left;
					width: 470rpx;

					.orderTitle {
						font-weight: bold;
						font-size: 30rpx;
						margin: 0 0 20rpx 0;
						float: left;
						width: 410rpx;
					}

					.orderPrice {
						font-size: 28rpx;
						float: right;
						width: 60rpx;
						text-align: right;
						line-height: 40rpx;
					}
				}


			}

			.orderReal {
				border-top: 1px solid #eee;
				text-align: right;
				font-size: 30rpx;
				margin: 30rpx 20rpx 0 0;
				padding: 30rpx 0 0 0;
			}

			.orderOper {
				text-align: right;
				margin: 30rpx 20rpx 0 0;

				view {
					margin-left: 20rpx;
					padding: 10rpx 0;
					display: inline-block;
					width: 150rpx;
					font-size: 25rpx;
					text-align: center;
				}

				.opFix {
					color: #555;
					border: 1px solid #ddd;
					border-radius: 30rpx;
				}

				.opCan {
					color: #c96713;
					border: 1px solid #eba00b;
					border-radius: 30rpx;
				}
			}
		}
	}
</style>
