<template>
	<view class="order-center mg-lr-24">
		<view class="tab-list u-f u-f-jcsb u-f-aic mg-bot-38 mg-bot-40">
			<view class="list-item" v-for="(item, index) in tabList" :key="item.id">
				<common-tab :acitve-tab="activeTab" :item="item" @tab-item="handleTabItem"></common-tab>
			</view>
		</view>

		<view class="tab-content-wrap">
			<!-- 已付款 -->
			<!-- <view class="" v-if="tabIndex==6"> -->

			<view class="white-bg-wrap mg-bot-20" v-for="(item,index) in orderList" :key="index" @click="toOrderDetails(item)">
				<view class="shop-car-item mg-bot-20">
					<view class="title u-f u-f-jcsb u-f-aic mg-bot-20">
						<view>
							<text class="check mg-right-16"></text>
							<text class="fs24 fw400 light-black">{{item.storeName||''}}</text>
							<text class="fs24 fw400 light-gray">共{{item.storeNum||1}}家店通用</text>
							<text class="gray-right-arrow"></text>
						</view>
						<view>
							<text
								class="main-color fs28 fw400">{{item.status == 0? '待支付':item.status == 1? '待发货' :item.status == 2?'待使用': item.status == 3?'已完成' : item.status == 4?'待评价' : item.status == 5?'退款/售后' : item.status == 6?'已结算' : item.status == 7?'未成团' : item.status == 8?'已成团' : '已取消'}}</text>
						</view>
					</view>
					<view class="u-f u-f-jcsb u-f-aic mg-bot-20">
						<image :src="item.goodsImage" style="width: 128rpx;height: 128rpx;flex: 1"
							:mode="aspectFill" class="mg-right-10"></image>
						<view class="u-f u-f-fdc" style="flex: 4">
							<view class="fs28 light-black fw400 mg-bot-10">{{item.goodsName}}</view>
							<view class="mg-bot-10 u-f u-f-aic u-f-jcsb">
								<text class="light-gray fs24 mg-right-8">{{item.goodsSpecification || ''}}</text>
							</view>
							<view class="u-f u-f-aic u-f-jcsb">
								<view class="u-f u-f-jcsb u-f-aic" style="margin-right: 96rpx;">
									<view>
										<text class="fs24 main-color">￥</text>
										<text class="fs32 main-color">{{item.goodsPrice}}</text>
									</view>
								</view>
								<view class="fs24 light-gray">x{{item.goodsNum}}</view>
							</view>
						</view>
					</view>

					<view class="u-f u-f-jcfe u-f-aic fs24 light-gray mg-bot-20">
						<text class="mg-right-20">共 {{item.goodsTotal}} 件</text>
						<text class="mg-right-6">实付金额</text>
						<text class="main-color">￥{{item.actualAmount}}</text>
					</view>

					<view class="btn-group u-f u-f-jcfe u-f-aic" v-if="item.status == 0">
						<text class="small-default-btn mg-right-10" @click="cancelOrder(item)">取消订单</text>
						<text class="small-gradient-btn" @click="quickPay">立即支付</text>
					</view>

					<view class="btn-group u-f u-f-jcfe u-f-aic" v-if="item.status == 2">
						<text class="small-default-btn mg-right-10" @click="requestRefund">申请退款</text>
						<text class="small-default-btn mg-right-10">联系商家</text>
						<text class="small-gradient-btn" @click="checkQuanMa">查看券码</text>
					</view>

					<view class="btn-group u-f u-f-jcfe u-f-aic" v-if="item.status == 4">
						<text class="small-default-btn mg-right-10">再来一单</text>
						<text class="small-default-btn mg-right-10">申请售后</text>
						<text class="small-gradient-btn">去评价</text>
					</view>
				</view>
				<!-- </view> -->

			</view>
			<!-- 待使用 -->
			<!-- <view class="" v-if="tabIndex==2"> -->
			<view  class="white-bg-wrap mg-bot-20" v-for="(item,index) in 0" :key="index">
				<view class="shop-car-item">
					<view class="title u-f u-f-jcsb u-f-aic mg-bot-20">
						<view>
							<text class="check mg-right-16"></text>
							<text class="fs24 fw400 light-black">宏达汽修（民族路店）</text>
							<text class="fs24 fw400 light-gray">共17家店通用</text>
							<text class="gray-right-arrow"></text>
						</view>
						<view>
							<text class="main-color fs28 fw400">待使用</text>
						</view>
					</view>
					<view class="u-f u-f-jcsb u-f-aic mg-bot-20" v-for="i in 2" :key="i">
						<!-- <image src="../.././static/shop/server-type.png" style="width: 128rpx;height: 128rpx;flex: 1"
							:mode="'widthFix'" class="mg-right-10"></image> -->
						<view class="u-f u-f-fdc" style="flex: 4">
							<view class="fs28 light-black fw400 mg-bot-10">马牌高性能轮胎马牌高性能轮胎</view>
							<view class="mg-bot-10 u-f u-f-aic u-f-jcsb">
								<text class="light-gray fs24 mg-right-8">四只装</text>
							</view>
							<view class="u-f u-f-aic u-f-jcsb">
								<view class="u-f u-f-jcsb u-f-aic" style="margin-right: 96rpx;">
									<view>
										<text class="fs24 main-color">￥</text>
										<text class="fs32 main-color">4999</text>
									</view>
								</view>
								<view class="fs24 light-gray">x1</view>
							</view>
						</view>
					</view>

					<view class="u-f u-f-jcfe u-f-aic fs24 light-gray mg-bot-20">
						<text class="mg-right-20">共 2 件</text>
						<text class="mg-right-6">实付金额</text>
						<text class="main-color">￥4999</text>
					</view>

					<view class="btn-group u-f u-f-jcfe u-f-aic">
						<text class="small-default-btn mg-right-10" @click="requestRefund">申请退款</text>
						<text class="small-default-btn mg-right-10">联系商家</text>
						<text class="small-gradient-btn" @click="checkQuanMa">查看券码</text>
					</view>

				</view>
				<!-- </view> -->

			</view>
			<!-- 待评价 -->

			<!-- <view class="" v-if="tabIndex==4"> -->
			<view class="white-bg-wrap mg-bot-20" v-for="(item,index) in 0" :key="index">
				<view class="shop-car-item">
					<view class="title u-f u-f-jcsb u-f-aic mg-bot-20">
						<view>
							<text class="check mg-right-16"></text>
							<text class="fs24 fw400 light-black">宏达汽修（民族路店）</text>
							<text class="fs24 fw400 light-gray">共17家店通用</text>
							<text class="gray-right-arrow"></text>
						</view>
						<view>
							<text class="main-color fs28 fw400">待评价</text>
						</view>
					</view>
					<view class="u-f u-f-jcsb u-f-aic mg-bot-20" v-for="i in 2" :key="i">
						<!-- <image src="../.././static/shop/server-type.png" style="width: 128rpx;height: 128rpx;flex: 1"
							:mode="'widthFix'" class="mg-right-10"></image> -->
						<view class="u-f u-f-fdc" style="flex: 4">
							<view class="fs28 light-black fw400 mg-bot-10">马牌高性能轮胎马牌高性能轮胎</view>
							<view class="mg-bot-10 u-f u-f-aic u-f-jcsb">
								<text class="light-gray fs24 mg-right-8">四只装</text>
							</view>
							<view class="u-f u-f-aic u-f-jcsb">
								<view class="u-f u-f-jcsb u-f-aic" style="margin-right: 96rpx;">
									<view>
										<text class="fs24 main-color">￥</text>
										<text class="fs32 main-color">4999</text>
									</view>
								</view>
								<view class="fs24 light-gray">x1</view>
							</view>
						</view>
					</view>

					<view class="u-f u-f-jcfe u-f-aic fs24 light-gray mg-bot-20">
						<text class="mg-right-20">共 2 件</text>
						<text class="mg-right-6">实付金额</text>
						<text class="main-color">￥4999</text>
					</view>

					<view class="btn-group u-f u-f-jcfe u-f-aic">
						<text class="small-default-btn mg-right-10">再来一单</text>
						<text class="small-default-btn mg-right-10">申请售后</text>
						<text class="small-gradient-btn">去评价</text>
					</view>
				</view>
			</view>

			<!-- </view> -->
			<!-- 申请售后 -->

			<!-- <view class="" v-if="tabIndex==4"> -->

			<view class="white-bg-wrap mg-bot-20" v-for="(item,index) in 0" :key="index">
				<view class="shop-car-item">
					<view class="title u-f u-f-jcsb u-f-aic mg-bot-20">
						<view>
							<text class="check mg-right-16"></text>
							<text class="fs24 fw400 light-black">宏达汽修（民族路店）</text>
							<text class="fs24 fw400 light-gray">共17家店通用</text>
							<text class="gray-right-arrow"></text>
						</view>
						<view @click="">
							<text class="main-color fs28 fw400">申请售后</text>
						</view>
					</view>
					<view class="u-f u-f-jcsb u-f-aic mg-bot-20" v-for="i in 2" :key="i">
						<!-- <image src="../.././static/shop/server-type.png" style="width: 128rpx;height: 128rpx;flex: 1"
							:mode="'widthFix'" class="mg-right-10"></image> -->
						<view class="u-f u-f-fdc" style="flex: 4">
							<view class="fs28 light-black fw400 mg-bot-10">马牌高性能轮胎马牌高性能轮胎</view>
							<view class="mg-bot-10 u-f u-f-aic u-f-jcsb">
								<text class="light-gray fs24 mg-right-8">四只装</text>
							</view>
							<view class="u-f u-f-aic u-f-jcsb">
								<view class="u-f u-f-jcsb u-f-aic" style="margin-right: 96rpx;">
									<view>
										<text class="fs24 main-color">￥</text>
										<text class="fs32 main-color">4999</text>
									</view>
								</view>
								<view class="fs24 light-gray">x1</view>
							</view>
						</view>
					</view>

					<view class="u-f u-f-jcfe u-f-aic fs24 light-gray mg-bot-20">
						<text class="mg-right-20">共 2 件</text>
						<text class="mg-right-6">实付金额</text>
						<text class="main-color">￥4999</text>
					</view>

					<!-- 		<view class="u-f u-f-jcfs u-f-aic fs24 light-gray mg-bot-20">
						<text class="mg-right-20 fs28 main-color fw700">处理中:</text>
						<view class="light-gray fs24" style="word-break: break-all;">
							预计<text class="main-color">48小时</text>内为您审核完成，请保持手机通畅 耐心等待
						</view>
					</view> -->

					<!-- 		<view class="u-f u-f-jcfs u-f-aic fs24 light-gray mg-bot-20">
					<text class="mg-right-20 fs28 deep-gray fw700 main-color" style="flex: 1">退款完成:</text>
					<view class="light-gray fs24" style="word-break: break-all;flex: 3">
						如果需要可在售后申请页重新提交服务单
						如果需要可在售后申请页重新提交服务单
					</view>
				</view> -->

					<!-- 	<view class="u-f u-f-jcfs u-f-aic fs24 light-gray mg-bot-20">
						<text class="mg-right-20 fs28 deep-gray fw700" style="flex: 1">商家已拒绝:</text>
						<view class="light-gray fs24" style="word-break: break-all;flex: 3">
							如果需要可在售后申请页重新提交服务单
							如果需要可在售后申请页重新提交服务单
						</view>
					</view> -->

					<view class="btn-group u-f u-f-jcfe u-f-aic">
						<text class="small-gradient-btn">取消申请</text>
					</view>
				</view>
			</view>

			<!-- </view> -->
		</view>

		<!-- 优惠券列表 -->
		<view class="white-bg-wrap mg-bot-20" v-for="(item,index) in 0" :key="index">
			<view class="youhuiquan u-f u-f-jcsb u-f-aic mg-bot-20">
				<view class="left u-f u-f-fdc u-f-aic u-f-jcc fs34 fw700 mg-right-10">
					<view class="u-f u-f-fdc">
						<text>会员</text>
						<text>权益</text>
					</view>
				</view>
				<view class="u-f u-f-fdc" style="flex: 4">
					<view class="fs28 light-black fw400 mg-bot-10">【黄金会员】会员权益</view>
					<view class="mg-bot-10 u-f u-f-aic u-f-jcsb">
						<text class="light-gray fs24 mg-right-8"></text>
					</view>
					<view class="u-f u-f-aic u-f-jcsb">
						<view class="u-f u-f-jcsb u-f-aic" style="margin-right: 96rpx;">
							<view>
								<text class="fs24 main-color">￥</text>
								<text class="fs32 main-color">4999</text>
							</view>
						</view>
						<view class="fs24 light-gray">x1</view>
					</view>
				</view>
			</view>
			<view class="u-f u-f-jcsb u-f-aic fs24 light-gray mg-bot-20">
				<view class="fs28">已完成</view>
				<view>
					<text class="mg-right-20">共 2 件</text>
					<text class="mg-right-6">实付金额</text>
					<text class="main-color">￥4999</text>
				</view>
			</view>
		</view>

		<view class="white-bg-wrap mg-bot-20" v-for="(item,index) in 0" :key="index">
			<view class="youhuiquan u-f u-f-jcsb u-f-aic mg-bot-20">
				<view class="left u-f u-f-fdc u-f-aic u-f-jcc fs34 fw700 mg-right-10">
					<view>
						<text>优惠券</text>
					</view>
				</view>
				<view class="u-f u-f-fdc u-f-aisb" style="flex: 4">
					<view class="fs28 light-black fw400 mg-bot-10">商城满100-20满减券</view>
					<view class="mg-bot-10 u-f u-f-aic u-f-jcsb">
						<text class="light-gray fs24 mg-right-8">仅用于商城指定产品</text>
					</view>
					<view class="u-f u-f-aic u-f-jcsb">
						<view class="u-f u-f-jcsb u-f-aic" style="margin-right: 96rpx;">
							<view>
								<text class="fs24 main-color">￥</text>
								<text class="fs32 main-color">4999</text>
							</view>
						</view>
						<view class="fs24 light-gray">x1</view>
					</view>
				</view>
			</view>
			<view class="u-f u-f-jcsb u-f-aic fs24 light-gray mg-bot-20">
				<view class="fs28">已完成</view>
				<view>
					<text class="mg-right-20">共 2 件</text>
					<text class="mg-right-6">实付金额</text>
					<text class="main-color">￥4999</text>
				</view>
			</view>
		</view>

		<view class="white-bg-wrap mg-bot-20"  v-if="isIndex == 10">
			<view class="youhuiquan u-f u-f-jcsb u-f-aic mg-bot-20">
				<view class="left u-f u-f-fdc u-f-aic u-f-jcc fs34 fw700 mg-right-10">
					<view>
						<text>优惠券</text>
					</view>
				</view>
				<view class="u-f u-f-fdc u-f-aisb" style="flex: 4">
					<view class="fs28 light-black fw400 mg-bot-10">商城满100-20满减券</view>
					<view class="mg-bot-10 u-f u-f-aic u-f-jcsb">
						<text class="light-gray fs24 mg-right-8">仅用于商城指定产品</text>
					</view>
					<view class="u-f u-f-aic u-f-jcsb">
						<view class="u-f u-f-jcsb u-f-aic" style="margin-right: 96rpx;">
							<view>
								<text class="fs32 main-color">299积分</text>
							</view>
						</view>
						<view class="fs24 light-gray">x1</view>
					</view>
				</view>
			</view>
			<view class="u-f u-f-jcsb u-f-aic fs24 light-gray mg-bot-20">
				<view class="fs28">已完成</view>
				<view>
					<text class="mg-right-20">共 2 件</text>
					<text class="mg-right-6">所需积分</text>
					<text class="main-color">299积分</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import commonTab from "../.././components/common-tab/common-tab.vue"
	export default {
		components: {
			commonTab
		},
		data() {
			return {
				activeTab: 'all',
				isIndex:0,
				tabList: [{
						name: "全部订单",
						id: "all",
						index: "",
					},
					{
						name: "待付款",
						id: "unPay",
						index: "0",
					},
					{
						name: '待使用',
						id: 'unUse',
						index: "2",
					},
					{
						name: '待评价',
						id: 'unEvaluate',
						index: "4",
					},
					{
						name: '退款/售后',
						id: 'backMoney',
						index: "5",
					}
				],
				pageNum: 1,
				pageSize: 10,
				orderList: [],
				total: 0,
				tabIndex: "",
			}
		},

		onShow() {
			this.pageNum = 1
			this.getOrderList()
		},

		onReachBottom() {
			console.log(this.total, this.orderList.length);
			if (this.total > this.orderList.length) {
				this.pageNum = this.pageNum + 1
				this.getOrderList(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},

		methods: {

			//取消订单
			cancelOrder(item) {
				console.log(item);
				uni.showModal({
					content: '确定取消该订单吗？',
					success: (res) => {
						console.log(res);
						if (res.confirm) {
							this.$http.get('/api/client/order/cancelOrder', {
								orderId: item.orderId
							}).then(res => {
								if (res.data.code == 200) {
									this.pageNum = 1
									this.getOrderList()
								}
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								})
							})
						}
					},
					fail: (res) => {
						console.log(res);
					}
				})
			},

			//订单列表
			getOrderList(flag) {
				this.$http.post('/api/client/order/list', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					status: this.tabIndex
				}).then(res => {
					console.log(res.data.data);
					this.orderList = !flag ? res.data.data.rows : this.orderList.concat(res.data.data.rows)
					this.total = res.data.data.total
				})
			},




			handleTabItem(item) {
				this.activeTab = item.id
				this.tabIndex = item.index
				this.pageNum = 1
				this.getOrderList()
			},
			quickPay() {
				// uni.navigateTo({
				// 	url: '/pages/quick-buy/quick-buy'
				// })
			},
			checkQuanMa() {
				uni.navigateTo({
					url: '/pages/oil-bill-detail/oil-bill-detail'
				})
			},
			requestRefund() {
				uni.navigateTo({
					url: '/pages/request-refund/request-refund',
				})
			},
			requestShouHou() {
				this.User.navigate({
					url: '/pages/request-shouhou/request-shouhou'
				})
			},
			toOrderDetails(item){
				console.log(item);
				// this.User.navigate({
				// 	url: '/pages/oil-bill-detail/oil-bill-detail?orderId='+item.orderId +'&status='+item.status
				// })
			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFBFF;
	}
</style>

<style lang="scss" scoped>
	.order-center {
		.tab-list {
			.list-item {
				font-size: 30rpx;
				margin-right: 44rpx;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	.shop-car {
		.shop-car-item {
			padding: 20rpx 10rpx;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
		}
	}

	.gray-down-arrow {
		width: 16rpx;
		height: 16rpx;
		background: url(../.././static/shop/bot-arrow.png) no-repeat center center;
		background-size: 100%;
	}

	.btn-group {
		border-top: 1rpx solid #F0F0F0;
		padding-top: 20rpx;
	}

	.youhuiquan {
		.left {
			color: #ffffff;
			width: 128rpx;
			height: 128rpx;
			background: #FF4C02;
			border-radius: 9rpx 9rpx 9rpx 9rpx;
		}
	}
</style>