<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="white-bg-wrap mg-bot-20" v-for="(item,index) in orderList" :key="index">
				<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="fs24 fw400 light-black">{{item.storeName||''}} &nbsp;&nbsp;</text>
							<!-- <text class="fs24 fw400 light-gray">共{{item.storeNum||1}}家店通用</text>
							<text class="gray-right-arrow"></text> -->
						</view>
						<view v-if="item.status !== 5">
							<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?'已成团' : item.status == 9 ? '进行中' : item.status == 10 ? '已完成': item.status == 90 ? '已取消':''}}
							</text>
						</view>
						<view v-else>
							<text class="main-color fs28 fw400"
								v-if="item.afterSalesStatus === 1 || item.afterSalesStatus === 2">申请售后</text>
							<text class="main-color fs28 fw400" v-else-if="item.afterSalesStatus === 3">退款完成</text>
							<text class="light-gray fs28 fw400" v-else-if="item.afterSalesStatus === 4">拒绝退款</text>
							<text class="light-gray fs28 fw400" v-else>取消申请</text>
						</view>
					</view>
					<view class="u-f u-f-jcsb u-f-aic mg-bot-20" @click.stop="goToBillDetail(item)">
						<image :src="item.goodsImage" style="width: 128rpx;height: 128rpx;" :mode="aspectFill"
							class="mg-right-10 border-radius-9"></image>
						<view class="u-f u-f-fdc" style="flex: calc(100% - 128rpx)">
							<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 || item.actualAmount}}</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 v-if="item.status==5" class="mg-bot-14">
						<view class="u-f u-f-jcsb u-f-aifs fs24 light-gray"
							v-if="item.afterSalesStatus == 1 || item.afterSalesStatus == 2">
							<text class="mg-right-20 fs28 main-color fw600" style="width: 120rpx;">处理中：</text>
							<view class="fs24 u-f u-f-aic u-f-jcfs two-line-ellipsis">
								<text class="mg-right-6 light-gray">预计</text>
								<text class="main-color">48</text>
								<text class="light-gray">小时内为您审核完成，请保持手机通畅 耐心等</text>
							</view>
						</view>
						<view class="u-f u-f-jcfs u-f-aic"
							v-if="item.afterSalesStatus == 3 || item.afterSalesStatus == 4 || item.afterSalesStatus == 5">
							<text class="mg-right-20 fs28 main-color fw600" style="width: 168rpx;"
								v-if="item.afterSalesStatus == 3">退款已完成：</text>
							<text class="mg-right-20 fs28 light-gray fw600" style="width: 168rpx;"
								v-if="item.afterSalesStatus == 4">商家已拒绝：</text>
							<text class="mg-right-20 fs28 light-gray fw600" style="width: 168rpx;"
								v-if="item.afterSalesStatus == 5">服务已取消：</text>
							<view class="fs24 u-f u-f-aic u-f-jcfs two-line-ellipsis">
								<text class="light-gray">如果需要可在售后申请页重新提交服务单</text>
							</view>
						</view>
					</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="goToBillDetail(item)">立即支付</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(item)">申请退款</text>
						<text class="small-default-btn mg-right-10" @click="showPopup(item)">联系商家</text>
						<text class="small-gradient-btn" @click="goToBillDetail(item)">查看券码</text>
					</view>

					<!-- 	<view class="btn-group u-f u-f-jcfe u-f-aic" v-if="item.status == 3&&item.type!==2&&item.type!==5">
						<text class="small-gradient-btn" @click="goToEvalution(item)">去评价</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" @click="againBuyOne(item)">再来一单</text>
						<text class="small-default-btn mg-right-10" @click="requestShouHou(item)">申请售后</text>
						<text class="small-gradient-btn" @click="goToEvalution(item)">去评价</text>
					</view>

					<view class="btn-group u-f u-f-jcfe u-f-aic" v-if="item.status == 5">
						<text v-if="item.afterSalesStatus == 1 || item.afterSalesStatus == 2" class="small-gradient-btn"
							@click="cancelApply(item)">取消申请</text>
						<text v-if="item.afterSalesStatus == 4" class="small-gradient-btn"
							@click="contactCustomerService">联系客服</text>
					</view>

				</view>
			</view>
			<view v-if="orderList.length ==0">
				<image style="width: 376rpx;display: block;margin: 0 auto;" src="../../static/icon_xx_k.png">
				</image>
				<text style="display: block;text-align: center;color: #ccc;">暂无数据</text>
			</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 class="modelContent">
			<uni-popup :position="'middle'" class="middle-wrap" :show="showBotPopup" @hidePopup="handleHidePopup">
				<view class="common-mes-nofity">
					<view class="top u-f u-f-aic u-f-jcc">联系商家</view>
					<view class="mg-top-38 deep-gray u-f u-f-jcc u-f-aic">
						<text>{{curService.storeCustomerService}}</text>
					</view>
					<view class="bot u-f u-f-jcc u-f-aic" @click="callOut(curService.storeCustomerService)"><text
							class="confirm">拨打电话</text></view>
				</view>
			</uni-popup>
		</view>

		<!-- 客服 -->
		<!-- <uni-popup :position="'middle'" class="middle-wrap" :show="showBotPopup" @hidePopup="hideCusServeicePopup">
			<view class="sys-mes-nofity">
				<view class="top u-f u-f-aic u-f-jcc">联系客服</view>
				<view class="mg-top-28 u-f u-f-jcc u-f-aic">
					<text>客服电话：{{customerService.cusServicePhone}}</text>
				</view>
				<view class="bot u-f u-f-jcc u-f-aic" @click="callOut(customerService.cusServicePhone)">
					<text class="confirm">拨打电话</text>
				</view>
			</view>
		</uni-popup> -->

	</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: "",
				showBotPopup: false,
				curService: {}
			}
		},

		onLoad(option) {
			console.log(123123)
			console.log("option", option)
			this.tabIndex = option.tabIndex
			this.activeTab = option.activeTab

			this.getOrderList()
		},

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

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

		methods: {
			//取消订单
			cancelOrder(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: '/pagesD/quick-buy/quick-buy'
				// })
			},
			// checkQuanMa(item) {
			// 	console.log("item")
			// 	uni.navigateTo({
			// 		// url: '/pagesE/oil-bill-detail/oil-bill-detail?storeId='+item.storeId
			// 		url: '/pagesE/oil-bill-detail/oil-bill-detail?orderId='+item.orderId
			// 	})
			// },
			requestRefund(item) {
				uni.navigateTo({
					url: '/pagesB/request-refund/request-refund?data=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			requestShouHou(item) {
				uni.navigateTo({
					url: '/pagesB/request-shouhou/request-shouhou?data=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			toOrderDetails(item) {
				console.log("item", item);
				// this.User.navigate({
				// 	url: '/pagesE/oil-bill-detail/oil-bill-detail?orderId='+item.orderId +'&status='+item.status
				// })
				// if (item.status === 5) {
				// 	this.User.navigate({
				// 		url: '/pagesB/refund/refund?orderId='+item.orderId
				// 	})
				// }
			},
			goToEvalution(item) {
				uni.navigateTo({
					url: '/pagesA/add-evaluation/add-evaluation?data=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			callOut(data) {
				uni.makePhoneCall({
					phoneNumber: data, //要拨打的手机号
					success: (res) => {
						// console.log("调用成功")
					},
					fail: (res) => {
						// console.log('调用失败!')
					}
				})
			},
			showPopup(item) {
				this.showBotPopup = true
				this.curService = item
			},
			handleHidePopup() {
				this.showBotPopup = false
			},
			againBuyOne(item) {
				this.cusService = item
			},
			goToBillDetail(item) {
				// 订单状态 0待支付 1待发货 2待使用 3已完成 4待评价 5退款/售后 6已结算 7未成团 8已成团 90已取消
				if (item.status === 0 || item.status === 90) {
					uni.navigateTo({
						url: '/pagesD/unpay-order-detail/unpay-order-detail?orderId=' + item.orderId
					})
				} else if (item.status === 2) {
					uni.navigateTo({
						// url: '/pagesE/oil-bill-detail/oil-bill-detail?storeId='+item.storeId
						url: '/pagesD/unuse-order-detail/unuse-order-detail?orderId=' + item.orderId
					})
				} else if (item.status === 4) {
					uni.navigateTo({
						url: '/pagesD/unevaluated-order-detail/unevaluated-order-detail?orderId=' + item.orderId
					})
				} else if (item.status === 5) {
					uni.navigateTo({
						url: '/pagesB/refund/refund?orderId=' + item.orderId
					})
				} else if (item.type === 7) {
					uni.navigateTo({
						url: '/pagesD/self-bill-detail/self-bill-detail?orderId=' + item.orderId
					})
				}
			},
			cancelApply(item) {
				uni.navigateTo({
					url: '/pagesB/refund/refund?orderId=' + item.orderId
				})
			},
			contactCustomerService() {
				uni.navigateTo({
					url: '/pages/contactTheCustomerService/contactTheCustomerService'
				})
			}
		}
	}
</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;
		}
	}

	.check {
		width: 38rpx;
		height: 38rpx;
	}

	.middle-wrap :deep(.uni-popup-insert) {
		width: 624rpx !important;
	}
</style>