<template>
	<view class="orders-page">
		<!-- 顶部导航栏 -->
		<custom-navbar title="全部订单" :show-back="true" backgroundColor="#fff"></custom-navbar>
		<serviecFirstTab :tabs="tabs" :activeId="activeId" @tab-click="tabClick" bgColor="#FAFAFA">
		</serviecFirstTab>
		<!-- 订单列表 -->
		<CommonList ref="groupRef" :apiUrl="this.urls[this.serviceType].list" :queryParams="listQuery"
			:listScrollHeight="`calc(100vh - ${statusBarHeight * 2 + 180}rpx)`">
			<template #listData="{ list }">
				<view class="order_item" v-for="(item, index) in list" :key="index">
            <OrderCard :dataItem="item" :typeId="1" @cancel="cancelOrder($event, item)"
						@accept="confirmOrder($event, item)" @start="startOrder($event, item)"
						@done="endOrder($event, item)" @goOrderDetail="goOrderDetail" />
				</view>
				<!-- <view class="list-item" v-for="(item, index) in list" :key="index">
            <listCard :info="item" @goDetail="goDetail"></listCard>
        </view> -->
			</template>

			<!-- 空数据状态 -->
			<template #empty>
				<noData></noData>
			</template>
		</CommonList>
		<serviceCodeInput :show="showInput" @close="showInput = false" @confirm="onConfirm" />
	</view>
</template>

<script>
	import serviceCodeInput from "@/components/service-code-input/service-code-input.vue";
	import {
		debounce
	} from "@/utils/debounce";
	import OrderCard from "./components/orderCard.vue";
	import serviecFirstTab from "@/components/common/service-first-tab.vue";
	import CommonList from "@/components/common/CommonList.vue";
	import request from "../../utils/request";
	export default {
		components: {
			serviecFirstTab,
			CommonList,
			OrderCard,
			serviceCodeInput,
		},
		data() {
			const now = new Date();
			return {
        clickType: false, //点击状态，防止连续点击
				serviceType:1,//订单类型，1普通，2自营
				urls:{
					1:{
						weChatRefund: "/syr/yhwechatrefund",
						aliRefund: "/syr/yhalirefund",
						startOrder: "/syr/yhstartserver",
						endOrder: "/syr/yhendserver",
						sureOrder: "/syr/yhordersure",
						list:"/syr/syrgetyhorder",
					},
					2:{
						ordernum: "/syr/orderSelf/orderNum",
						weChatRefund: "/syr/orderSelf/weChatRefund",
						aliRefund: "/syr/orderSelf/aliRefund",
						startOrder: "/syr/orderSelf/start",
						endOrder: "/syr/orderSelf/end",
						sureOrder: "/syr/orderSelf/sure",
						list:"/syr/orderSelf/list",
					}
				},
				showInput: false,
				handelOrder: {},
				statusBarHeight: 0,
				listQuery: {
					syrid: "",
					state: "",
				},
				activeId: "",
				tabs: [{
						id: "",
						title: "全部",
					},
					{
						id: 3,
						title: "待开始",
					},
					{
						id: 4,
						title: "进行中",
					},
					{
						id: 5,
						title: "已完成",
					},
					{
						id: 7,
						title: "已取消",
					},
				],
				userInfo: {},
				isRefreshing: false,
				currentYear: now.getFullYear(),
				currentMonth: now.getMonth() + 1, // JavaScript月份从0开始，需要+1
				orderList: [],
				artisanType: getApp().globalData.artisanType,
			};
		},
		async onLoad(options) {
			if(options.serviceType){
					this.serviceType = options.serviceType
				}
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			const {
				data
			} = await request.post("/user/getuser", {
				type: 2,
			});
			this.userInfo = data;
			this.listQuery.syrid = this.userInfo.id;
			this.search();
			// this.loadOrders();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		methods: {
			search() {
				this.$refs.groupRef.manualRefresh(this.listQuery);
			},
			tabClick(id, title, tab) {
				this.activeId = id;
				this.listQuery.state = id;
				this.search();
				// console.log('tabClick',tab)
				// this.loadOrders();
			},
      // 确认接单
			confirmOrder(e, order) {
				const url = this.urls[this.serviceType].sureOrder;
				if (this.clickType) {
					return
				}
				this.clickType = true
				request
					.post(url, {
						syrid: this.userInfo.id,
						id: order.id
					})
					.then((res) => {
						uni.showToast({
							title: "已接单",
							icon: "none",
						});
						this.$refs.groupRef.manualRefresh(this.listQuery);
					}).finally(() => {
						this.clickType = false
					});
			},
			// 取消订单
			cancelOrder(e, order) {
				uni.showModal({
					title: "取消订单",
					content: "确定要取消该订单吗？（订单取消后，支付金额将原路退回）",
					success: (res) => {
						if (res.confirm) {
							// TODO: 取消订单
							let data = {
								orderNo: order.number,
								amount: order.pay_money,
								syrid: this.userInfo.id,
							};
							let url = "";
							if (order.pay_kind == 1) {
								url = "";
							} else if (order.pay_kind == 2) {
								url = this.urls[this.serviceType].weChatRefund;
							} else if (order.pay_kind == 3) {
								url = this.urls[this.serviceType].aliRefund;
							}
							console.log(data, url);
							request
								.post(url, data)
								.then((res) => {
									console.log("取消订单返回结果", res);
									if (res.state == 1 || res.code == 1 || res.code == 200) {
										this.$refs.groupRef.manualRefresh(this.listQuery);
									} else {
										uni.showToast({
											title: res.msg,
											icon: "none",
										});
									}
								})
								.catch((err) => {
									console.log(err);
								});
						}
					},
				});
			},
			// 开始服务
			startOrder(e, order) {
				this.showInput = true;
				this.handelOrder = order;
			},
			// 输入完成
			onConfirm(code) {
				this.showInput = false;
				request
					.post(this.urls[this.serviceType].startOrder, {
						id: this.handelOrder.id,
						server_code: code,
						syrid: this.userInfo.id,
					})
					.then((res) => {
						console.log(res);
						if (res.state == 1 || res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
							this.$refs.groupRef.manualRefresh(this.listQuery);
						}else if (res.state == 2 || res.code == 500) {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
						}
						this.handelOrder = {};
					});
			},
			// 去订单详情
			goOrderDetail(item) {
				let path = "";
				path = `/pages/syr/userorder-detail?id=${item.id}`;
				if(item.table_source=="order_self"){
					//如果是自营订单
					path = `/pages/syr/userorder-detail?id=${item.id}&serviceType=2`;
				}
				uni.navigateTo({
					url: path,
				});
			},
			// 完成服务
			endOrder: debounce(function(e, order) {
				request
					.post(this.urls[this.serviceType].endOrder, {
						id: order.id,
						syrid: this.userInfo.id,
					})
					.then((res) => {
						console.log("res====================", res);
						if (res.state == 1 || res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
							this.$refs.groupRef.manualRefresh(this.listQuery);
						}
					});
			}, 500),
		},
	};
</script>

<style lang="scss" scoped>
	.order-item {
		margin: 32rpx 24rpx;
		border-radius: 16rpx;
		padding: 24rpx;
		background-color: #ffffff;
		position: relative;
	}

	.order-date {
		font-size: 24rpx;
		color: #666666;
		font-weight: 400;
	}

	.order-content {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		margin-top: 16rpx;
	}

	.service-image {
		width: 162rpx;
		height: 162rpx;
		border-radius: 24rpx;
		margin-right: 16rpx;
		background-color: #333333;
	}

	.order-info {
		width: 350rpx;
		height: 162rpx;
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.service-name {
		flex: 1;
		font-size: 28rpx;
		color: #000000;
		font-weight: 400;
		margin-bottom: 6rpx;
	}

	.rating {
		display: flex;
		align-items: center;
		margin-bottom: 6rpx;
	}

	.star-icon {
		width: 20rpx;
		height: 20rpx;
		margin-right: 6rpx;
		background-color: #000000;
	}

	.rating-score {
		font-size: 16rpx;
		color: #FF4767;
		margin-left: 68rpx;
	}

	.currency {
		font-size: 24rpx;
		color: #ff0037;
	}

	.amount {
		font-size: 32rpx;
		color: #ff0037;
		font-weight: 500;
	}

	.address {
		display: flex;
		align-items: center;
	}

	.location-icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 4rpx;
	}

	.address-text {
		font-size: 24rpx;
		color: #999999;
		flex: 1;
	}

	.order-status {
		position: absolute;
		top: 0;
		right: 0;
	}

	.status-text {
		font-size: 24rpx;
		font-weight: 400;
		padding: 6rpx 16rpx;
		color: #28d189;
		background-color: rgba(40, 209, 137, 0.2);
		border-radius: 0 16rpx 0 16rpx;
	}

	.load-more {
		text-align: center;
		padding: 0 0 32rpx;
	}

	.load-date {
		font-size: 24rpx;
		color: #FF4767;
	}

	.load-text {
		font-size: 24rpx;
		color: #999999;
	}

	.nothings-box {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		padding: 280rpx 0 0;
	}

	.nothings-text {
		font-size: 32rpx;
		font-weight: 500;
		color: #999999;
		text-align: center;
		font-style: italic;
	}

	/* 下拉刷新样式 */
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.service-first-tab {
		border-bottom-color: transparent;
	}

	.common-list {
		padding-bottom: 0rpx;

		position: fixed;
		left: 0;
		right: 0;
		bottom: 0rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-color: #fafafa;

		::v-deep .list-scroll {
			margin-top: 0rpx;

			.uni-scroll-view-content {
				margin-top: 0rpx;
			}

			.list-item {
				display: block;
				padding: 0;
				background-color: transparent;
				margin-bottom: 20rpx;
			}

			.list-container {
				padding: 0;
			}
		}
	}

	.service-first-tab {
		box-shadow: none;
	}
</style>