<template>
	<view class="page-container">
		<webviewPoint ref="webviewRef" />

		<z-paging ref="paging" v-model="dataList" @query="queryList">

			<template #top>
				<!-- 搜索框 -->
				<view class="searchClass">
					<u-search searchIcon="search" shape="round" placeholder="输入服务项目/客户手机号" searchIconColor="#A0A0A0"
						v-model=searchProductName @search='goSearch' @custom='goSearch'></u-search>

				</view>
			</template>
			<view class="list-box" v-if="dataList && dataList.length > 0">
				<view class="item" v-for="(item, index) in dataList" :key="index" @click="goDetails(item.id)">
					<!-- 订单信息 -->
					<view style="border-bottom: 1px solid #E7E7E7;">
						<view class="row1" @click="goDetails(item.cId)">
							<view style="display: flex;align-items: center;">
								<image src="/static/workbench/clockIcon3.png"
									style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" mode="aspectFill" />
								{{ item.appointmentTimeRange }}
							</view>
							<view v-if="item.status == 2" class="status">待接单</view>

							<!-- 3:待服务  待出发\待签到\已出发\已到达\已签到 -->
							<view v-if="item.status == 3"
								:class="(item.afterSalesServiceStatus === '待出发' || item.afterSalesServiceStatus === '待签到') ? 'status1' : 'status2'">
								{{ item.afterSalesServiceStatus }}</view>
							<view v-if="item.status == 4" class="status2">服务中</view>
							<view v-if="item.status == 5" class="status3">已完成</view>

						</view>
						<view class="row2">
							<image src="/static/workbench/propleIcon.png"
								style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" mode="aspectFill" />
							<view>{{ item.contactPersonName }} {{ item.contactPhoneNumber }}
							</view>
							<view class="type">
								<image v-if="item.customerTagCode == 0" src="/static/workbench/licenceIcon.png"
									style="width: 108.5rpx;height: 40rpx;" mode="aspectFill" />
								<image v-if="item.customerTagCode == 1" src="/static/workbench/licenceIcon1.png"
									style="width: 108.5rpx;height: 40rpx;" mode="aspectFill" />
								<image v-if="item.customerTagCode == 3" src="/static/workbench/licenceIcon2.png"
									style="width: 92rpx;height: 40rpx;" mode="aspectFill" />

							</view>
						</view>

						<view class="row3">
							<image src="/static/workbench/localIcon.png"
								style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" mode="aspectFill" />

							{{ item.contactAddressInfo }}
							<text class="cont">{{ item.distanceKm }}km</text>
						</view>
					</view>

					<!-- 服务项目信息 -->
					<view class="row4">
						<view>
							<image :src="item.projectCover" mode="aspectFill"
								style="border: 1px solid red;width: 96rpx;height: 96rpx;border-radius: 8rpx;" />
						</view>
						<view
							style="display: flex;flex-direction: column;flex: 1;justify-content: space-between;margin-left: 24rpx;">
							<view style="display: flex; justify-content: space-between;">
								<view class="title">{{ item.projectName }}（{{ item.projectPrice }}分钟）</view>
								<view class="cont">
									<view style="font-size: 20rpx;">￥</view>
									{{ item.finalAmount }}
								</view>
							</view>
							<view v-if="item.status == 9" class="refundStatus1">退款中</view>
							<view v-if="item.status == 9" class="refundStatus2">已退款</view>

						</view>

					</view>
					<!-- 订单金额 -->
					<view class="price">
						交通费
						<view
							style="font-weight: bold;font-size: 28rpx;display: flex;align-items: baseline;margin-right: 32rpx;">
							<view style="font-size: 20rpx;">￥</view>
							{{ item.trafficFee }}
						</view>
						实付
						<view
							style="font-weight: bold;font-size: 36rpx;color: #FF4C12;display: flex;align-items: baseline;">
							<view style="font-size: 20rpx;">￥</view>
							{{ item.finalAmount }}
						</view>
					</view>

					<view class="btn">

						<view class="button">
							<!-- v-if="[0, 1, 2, 3, 6].includes(item.nStatus)" -->
							<view class="pay" v-if="item.status == 2" @click="onCancleOrder(item)">拒接</view>
							<view class="pay" v-if="[2, 3,].includes(item.status)" @click="onCancleOrder(item)">联系客户
							</view>
							<view class="pay main" v-if="item.status == 2" @click="onCancleOrder(item)">立即接单</view>

							<view class="pay" v-if="[4, 3,].includes(item.status)" @click="onCancleOrder(item)">取消订单
							</view>
							<view class="pay main" v-if="item.status == 3" @click="onCancleOrder(item)">我已出发/签到</view>
							<view class="pay main" v-if="item.status == 3" @click="onCancleOrder(item)">已到达</view>
							<view class="pay main" v-if="item.status == 3" @click="onCancleOrder(item)">开始服务</view>

							<view class="pay" v-if="item.status == 4" @click="onCancleOrder(item)">提前结束</view>
							<view class="pay alarm" v-if="item.status == 4" @click="onCancleOrder(item)">一键报警</view>
							<view class="pay main" v-if="item.status == 4" @click="onCancleOrder(item)">服务完成</view>
						</view>
					</view>
				</view>
			</view>

			<template v-slot:empty>
				<u-empty :text="!isLogin ? '您还没有登录' : '暂无相关订单'" icon="/static/workbench/emptyIcon1.png">
					<u-button size="small" text="去登录" color="linear-gradient(to right, #35c99d, #27aea7)"
						:customStyle="{ marginTop: '20rpx' }" v-if="!isLogin" @click="goLogin">
					</u-button>
				</u-empty>
			</template>
		</z-paging>

	</view>
</template>

<script>
//   // 订单状态(0：待付款，1:待派单，2:待接单，3:待服务 4:服务中 5：已完成 6：已取消
//7：已关闭 8：拒绝接单 9：退款成功)
import { queryOrder } from '@/api/order.js';
import {
	getIsLottery,
} from '@/api/index.js';
import {
	delOrder,
	cancleOrder,
	cancleApply,
	orderDeatails,
} from '@/api/order.js';
import webviewPoint from "@/components/webviewPoint.vue";
import { onHide } from '@dcloudio/uni-app';
export default {
	components: { webviewPoint },
	data() {
		return {
			searchProductName: '',
			searchPhoneNumber: '',
			startDate: '',
			endDate: '',
			dataList: [],
			current: 0,
			nStatus: '',
			isLogin: false,
			// 取消订单
			cancelOrderPopup: {
				show: false, // 弹窗显示状态
				isOk: false, // 是否确认
				successTip: '您的申请已提交，客服审核中，请注意接听客服电话：19936963696',
				orderList: [],
				orderInfo: null, // 当前要取消的订单信息
				cId: '', // 订单ID
				reason: '' // 用户输入的取消原因
			},
			selectDateKey: '',
			dateValue: '',
			datePickerShow: false,
			feeOptions: [
				{ label: '免车费', value: 'free' },
				{ label: '不免车费', value: 'not_free' }
			],
			timeOptions: [
				{ label: '今日', value: 'today' },
				{ label: '近7天', value: '7days' },
				{ label: '近30天', value: '30days' },
				{ label: '近6个月', value: '6months' }
			]
		}
	},
	onLoad(query) {
		this.isLogin = !!uni.getStorageSync('wx_copenid');
	},
	onShow() {
		this.queryList(1, 10)
	},
	onHide() {
		this.resetFilter()
	},
	methods: {
		// 搜索订单
		queryList(pageNo, pageSize) {
			let params = {
				current: pageNo,
				size: pageSize,
				status: null,
				projectName: this.searchProductName,
				contactPhoneNumber: this.searchPhoneNumber || '',

			}
			queryOrder(params).then(res => {
				if (res.data.code === 200) {
					if (!res.data.data) return
					this.dataList = res.data.data.records;
					// let data = res.data.data.records.forEach(item => {
					// 	item.dtCreateTime = item.dtCreateTime.replace('T', ' ')
					// });
					this.$refs.paging.complete(this.dataList);

				} else {
					this.$refs.paging.complete([]);

				}
			});
		},
		// 跳转搜索订单
		goSearch(e) {
			const keyword = this.searchProductName.trim()
			if (!keyword) return uni.showToast({ title: '请输入搜索内容', icon: 'none' })

			// 手机号正则：1开头，第二位3-9，后面9位数字，总共11位
			const phoneReg = /^1[3-9]\d*$/
			let searchType = ''

			if (phoneReg.test(keyword)) {
				searchType = 'phone' // 手机号搜索
				this.searchProductName = keyword 
			} else {
				searchType = 'name' // 项目名称搜索
				this.searchProductName = keyword 
			}
			this.$refs.paging.reload();

		},

		// 格式化日期显示
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			}
			if (type === 'month') {
				return `${value}月`;
			}
			if (type === 'day') {
				return `${value}日`;
			}
			return value;
		},
		// 支付订单
		onPayOrder(item) {
			if (item.remainingTime <= 0) {
				uni.showToast({
					title: '订单已超时',
					icon: 'none'
				})
			} else {
				let str = uni.$u.queryParams({
					page: 'order',
					orderNo: item.orderNo
				});
				uni.navigateTo({
					url: `/pages/identify/pay_order${str}`
				})
			}

		},
		// 取消退单申请
		onCancleApply(item) {
			uni.showModal({
				title: '提示',
				content: '确定取消退单申请吗？',
				showCancel: true,
				success: (res) => {
					if (res.confirm) {
						let params = {
							cId: item.cId
						}
						cancleApply(params).then(res => {
							if (res.data.code == 200) {
								this.$refs.paging.reload();
								uni.showToast({
									title: '已取消',
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						})
					}
				}
			})
		},
		// 取消订单
		onCancleOrder(item) {
			this.cancelOrderPopup.cId = item.cId
			this.cancelOrderPopup.orderList = item.cGoods || []
			this.cancelOrderPopup.show = true;
		},
		// 提交退单申请
		onSubmitApply() {
			if (this.cancelOrderPopup.reason === '') {
				uni.showToast({
					title: '请输入退单原因',
					icon: 'none'
				})
				return
			}
			let params = {
				cId: this.cancelOrderPopup.cId,
				cancelReason: this.cancelOrderPopup.reason
			}
			cancleOrder(params).then(res => {
				if (res.data.code == 200) {
					this.cancelOrderPopup.isOk = true
					this.$refs.paging.reload();
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			})
		},

		// 删除订单
		onDelOrder(item) {
			uni.showModal({
				title: '提示',
				content: '确定删除订单吗？',
				showCancel: true, // 是否显示取消按钮
				success: (res) => {
					if (res.confirm) {
						let params = {
							cId: item.cId
						}
						delOrder(params).then(res => {
							if (res.data.code == 200) {
								this.$refs.paging.reload();
								uni.showToast({
									title: '删除订单成功！',
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						})
					}
				}
			})
		},

		// 切换订单
		onTabChange(code, index) {
			this.current = index;
			this.nStatus = code;
			this.$refs.paging.reload();
		},
		// 跳转订单详情
		goDetails(cid) {
			let str = uni.$u.queryParams({
				cid
			});
			uni.navigateTo({
				url: `/pages/order/order_detail${str}`
			});
		},
		goEvaluate(item) {
			console.log(item)
			let str = uni.$u.queryParams({
				orderNo: item.orderNo,
				cId: item.cId,
				cJsId: item.cJsId,
				cName: item.js.cName,
				nickName: item.wxUser.nickName
			});
			uni.navigateTo({
				url: `/pages/order/comment${str}`
			});
		},
		goLogin() {
			uni.navigateTo({
				url: '/setting/myNew/phone',
			})
			// uni.navigateTo({
			// 	url: '/pages/login/wxLogin'
			// })
		},
	},
}
</script>

<style scoped lang="scss">
::v-deep .searchClass {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12rpx 32rpx;

	.u-search {
		width: 622rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 66rpx 66rpx 66rpx 66rpx;
		border: 1rpx solid #333335;

		.u-search__content {
			background: #FFFFFF !important;
		}

		.u-search__content__input {
			background: #fff !important;
			height: 30rpx !important;

			.u-search__content__input--placeholder {
				font-weight: 400 !important;
				font-size: 26rpx !important;
				color: #AAA !important;
				height: 30rpx !important;
			}
		}


		.u-search__action {
			margin-right: 8rpx;
			width: 104rpx;
			height: 48rpx;
			background: #333335;
			border-radius: 32rpx 32rpx 32rpx 32rpx;

			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;

		}


	}

	.orderBox {
		margin-left: 16rpx;
		height: 68rpx;
	}


}

::v-deep .zp-view-super {
	background-color: #F7F8FA !important;
}

.page-container {
	background: linear-gradient(180deg, #C1FFF8 0%, #B8FFF3 34%, #F5FFFF 100%);

	.tab-box {
		padding: 0 15rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 30rpx;
		z-index: 999;
		background: radial-gradient(circle, #fcfdff, #fcfdff);

		.item {
			height: 100%;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			display: flex;
			align-items: center;

		}

		.active {
			font-weight: 500;
			font-size: 36rpx;
			color: #1D2129;
			text-align: center;
			position: relative;
			z-index: 99999 !important;

			&::after {
				content: '';
				z-index: -1 !important;
				position: absolute;
				bottom: 18rpx;
				left: 50%;
				transform: translateX(-50%);

				width: 100%;
				height: 8rpx;
				background: linear-gradient(263deg, #45FFD7 0%, #7FFFBD 100%);
				border-radius: 2rpx 2rpx 2rpx 2rpx;
			}
		}
	}

	.list-box {
		flex: 1;
		padding: 32rpx;

		.item {
			width: 100%;
			padding: 32rpx;
			margin-bottom: 10rpx;
			font-size: 28rpx;
			margin-bottom: 28rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.row1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
				text-align: left;

				.status {
					background: #FFF0ED;
					border-radius: 4rpx 4rpx 4rpx 4rpx;

					font-weight: 400;
					font-size: 24rpx;
					color: #FF531C;
					line-height: 34rpx;
					text-align: center;
				}

				.status1 {
					background: #FFF7E7;
					border-radius: 4rpx 4rpx 4rpx 4rpx;

					font-weight: 400;
					font-size: 24rpx;
					color: #FF7D00;
					line-height: 34rpx;

				}

				.status2 {
					background: #E8FFEA;
					border-radius: 4rpx 4rpx 4rpx 4rpx;

					font-weight: 400;
					font-size: 24rpx;
					color: #00B42A;
					line-height: 34rpx;
					text-align: center;
				}


				.status3 {
					background: #F7F8FA;
					border-radius: 4rpx 4rpx 4rpx 4rpx;

					font-weight: 400;
					font-size: 24rpx;
					color: #4E5969;
					line-height: 34rpx;
					text-align: center;
				}

			}

			.row2 {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
				text-align: left;

				.type {
					margin-left: 16rpx;
					display: flex;
					align-items: center;
				}
			}

			.row3 {
				display: flex;
				align-items: center;
				margin-top: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
				margin-bottom: 24rpx;

				.cont {
					margin-left: 40rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #1D2129;
				}
			}

			.row4 {
				display: flex;
				margin: 24rpx 0 32rpx 0;

				.title {
					font-weight: 500;
					font-size: 30rpx;
					color: #1D2129;
				}

				.cont {
					display: flex;
					align-items: baseline;
					font-weight: 400;
					font-size: 28rpx;
					color: #1D2129;
				}
			}

			.refundStatus1 {
				margin-top: 16rpx;
				width: 96rpx;
				height: 36rpx;
				background: #FFF2E5;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 1rpx solid #FF7D00;

				font-weight: 400;
				font-size: 24rpx;
				color: #FF7D00;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;

			}

			.refundStatus2 {
				width: 96rpx;
				height: 36rpx;
				background: #FFF2E5;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 1rpx solid #F53F3F;

				font-weight: 400;
				font-size: 24rpx;
				color: #F53F3F;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;

			}

			.price {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-weight: 400;
				font-size: 24rpx;
				color: #1D2129;
				line-height: 24rpx;
				text-align: right;
			}

			.cont {
				color: rgb(162, 162, 162);
				font-size: 26rpx;
				line-height: 45rpx;
			}

			.btn {


				.button {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.pay {
						margin-left: 24rpx;
						margin-top: 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 152rpx;
						height: 64rpx;
						background: rgba(51, 51, 53, 0.05);
						border-radius: 32rpx 32rpx 32rpx 32rpx;

						font-weight: 400;
						font-size: 26rpx;
						color: #1D2129;


					}

					.alarm {
						background-color: #F53F3F;
						color: #FFFFFF;
					}

					.main {
						background-color: #333335;
						font-weight: 500;
						color: #FFFFFF;
					}

					.pay:last-child {
						background-color: #333335;
						font-weight: 500;
						font-size: 26rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;

					}

					.cancel {
						width: 152rpx;
						height: 48rpx;
						border-radius: 98rpx;
						border: 2rpx solid #BBBBBB;
						padding: 5rpx 30rpx;
					}
				}
			}
		}
	}

	.popup-content {
		width: 90vw;
		padding: 100rpx 30rpx 30rpx;
		box-sizing: border-box;

		.table-header {
			background-color: #FBFBFB;
		}

		.success-tip {
			padding: 50rpx;
			font-size: 32rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.reson {
			margin: 30rpx;
		}

		.popup-btn {
			padding: 0 80rpx;
			display: flex;
			justify-content: space-between;
		}
	}


}
</style>
