<template>
	<view class="content">
		<headersVue :titles="titles" style=" position: static !important;">
			<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
		</headersVue>
		<view class="appointment-detail">
			<!-- 顶部标题栏 -->
			<view class="header">
				<text class="title">预约详情</text>
				<text class="status" :class="{'converted': detail.isUse === '1'}">
					{{detail.isUse === '1' ? '已转订单' : '未转订单'}}
				</text>
			</view>

			<!-- 基本信息卡片 -->
			<view class="card">
				<view class="card-header">
					<text class="card-title">基本信息</text>
					<button v-if="detail.isUse !== '1' && detail.meetOrderId && detail.isMeet == 1" class="convert-btn"
						@click="convertToOrder" size="mini">
						转订单
					</button>
					<button v-else @click="clickDisabledButton" class="convert-btn-disable" size="mini">
						转订单
					</button>
				</view>

				<view class="info-list">
					<view class="info-item">
						<text class="label">预约类型：</text>
						<text class="value">{{detail.goodsTitle}}<text
								v-if="detail.carNature">{{ '-' + detail.carNature}}</text></text>
					</view>
					<view class="info-item">
						<text class="label">车牌号码：</text>
						<text class="value">{{detail.carNo || "暂无车牌号"}}</text>
					</view>
					<view class="info-item">
						<text class="label">车辆型号：</text>
						<text class="value">{{detail.carModel || "暂无型号"}}</text>
					</view>
					<view class="info-item">
						<text class="label">注册日期：</text>
						<text class="value">{{formatDate(detail.carRegisterDate) || "暂无注册日期"}}</text>
					</view>
					<view class="info-item">
						<text class="label">识别代码：</text>
						<text class="value">{{detail.carIdNo || '无'}}</text>
					</view>
				</view>
			</view>

			<!-- 预约信息卡片 -->
			<view class="card">
				<view class="card-header">
					<text class="card-title">预约信息</text>
				</view>

				<view class="info-list">
					<view class="info-item">
						<text class="label">预约人：</text>
						<text class="value">{{detail.owner || detail.buyName}}</text>
					</view>
					<view class="info-item">
						<text class="label">联系电话：</text>
						<text class="value">{{detail.otherPhone || detail.buyPhoneNum || '暂无'}}</text>
						<button class="call-btn" @click="callUser" size="mini">拨打</button>
					</view>
					<view class="info-item">
						<text class="label">预约时间：</text>
						<text class="value">{{formatDate(detail.appointmentDay)}}
							{{detail.appointmentPeriod === '0' ? '上午' : '下午'}}{{detail.time}}</text>
					</view>
					<view class="info-item">
						<text class="label">客户来源：</text>
						<text class="value">{{detail.partner_id ? '合作商客户' : '自来客户'}}</text>
					</view>
					<view class="info-item">
						<text class="label">支付方式：</text>
						<text class="value">{{detail.is_pay_online === '1' ? '线上支付' : '线下支付'}}</text>
					</view>
					<view class="info-item" style="justify-content: space-between;">
						<view>
							<text class="label">上门取车：</text>
							<text class="value">{{detail.isPickCar === '1' ? '是' : '否'}}</text>
						</view>
						<view>
							<text class="label" v-if="!detail.meetOrderId">暂未指派接车员</text>
							<text class="value" v-else>接车人：{{detail.meetName}}<text v-if="detail.isMeet == 0"
									style="color: red;">（暂未接车）</text><text v-else
									style="color: #1890FF;">（已接车）</text></text>
						</view>
					</view>
					<view class="info-item" v-if="detail.address">
						<text class="label">取车地址：</text>
						<text class="value">{{detail.adressDetail}}</text>
					</view>
				</view>
			</view>

			<!-- 证件信息卡片 -->
			<view class="card">
				<view class="card-header">
					<text class="card-title">证件信息</text>
				</view>

				<view class="info-list">
					<view class="info-item">
						<text class="label">行驶证：</text>
						<button class="view-btn" @click="viewDriverLicense" size="mini">
							{{detail.driverLicenesImg ? '查看' : '未上传'}}
						</button>
					</view>
				</view>
			</view>

			<!-- 备注信息卡片 -->
			<view class="card" v-if="detail.remark">
				<view class="card-header">
					<text class="card-title">备注信息</text>
				</view>

				<view class="info-list">
					<view class="info-item">
						<text class="value">{{detail.remark}}</text>
					</view>
				</view>
			</view>

			<!-- 底部操作栏 -->
			<view class="footer">
				<button class="btn" @click="callUser">拨打电话</button>
				<button class="btn primary" @click="clickMeetMan()" v-if="detail.meetOrderId == null">分配接车人</button>
			</view>
		</view>
		<u-modal :show="showPop" showCancelButton mode="center" @cancel="closePop" @confirm="confirmPop">
			<view style="width: 100%;">
				<view style="margin-bottom: 50rpx;text-align: center;">分配接车人</view>
				<view class="poup">
					<view>车牌号：</view>
					<view class="poup-item " style="padding-right: 38rpx;">
						{{detail.carNo || "暂无车牌号"}}
					</view>
				</view>
				<view class="poup">
					<view>取车日期：</view>
					<view class="poup-item " style="padding-right: 38rpx;">
						{{detail.pickCarAppointmentDay || "暂无取车日期"}}
					</view>
				</view>
				<view class="poup">
					<view>取车时间：</view>
					<view class="poup-item " style="padding-right: 38rpx;">
						{{detail.pickCarAppointmentTime || "暂无取车时间"}}
					</view>
				</view>
				<view class="poup">
					<view style="width: 340rpx;">取车地点：</view>
					<view class="poup-item " style="padding-right: 38rpx;">
						{{detail.adressDetail || "暂无取车地点"}}
					</view>
				</view>
				<view class="poup">
					<view>接车人：</view>
					<view class="poup-item" @click="showMeetMan = true">
						{{meetName}}
						<u-icon class="dl-float-right" name="arrow-right" size="18"></u-icon>
					</view>
				</view>
			</view>
		</u-modal>
		<u-picker :show="showMeetMan" :columns="[meetManList]" :defaultIndex="defaultIndex" @confirm="confirmMeetMan"
			@cancel="showMeetMan = false" keyName="nickname"></u-picker>
	</view>
</template>

<script>
	import request from '../../../utils/request';
	import headersVue from '@/components/header/headers.vue';
	import qianziyuSelect from '@/components/qianziyu-select/qianziyu-select.vue';
	import {
		formatDate
	} from '../../../utils/utils';

	export default {
		data() {
			return {
				id: null,
				detail: {},
				titles: "预约详情",
				baseImageUrl: this.$baseImageUrl,
				meetManId: undefined,
				meetName: '请选择接车人',
				showMeetMan: false,
				showPop: false,
				meetManList: [],
				defaultIndex: [0],
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.fetchDetail();
		},
		components: {
			headersVue,
			qianziyuSelect
		},
		methods: {
			async fetchDetail() {
				uni.showLoading({
					title: '加载中...'
				});

				try {
					const res = await request({
						url: `/inspection/appointment/${this.id}`,
						method: 'GET'
					})
					this.detail = res.data;
					await this.getStaff();
				} catch (error) {
					console.error('获取预约详情失败:', error);
					uni.showToast({
						title: '获取详情失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			clickDisabledButton() {
				console.log('执行了');
				if (!this.detail.meetOrderId) {
					uni.showToast({
						title: '请先指派接车人',
						icon: 'none'
					})
					return
				}
				if (this.detail.isMeet != 1) {
					uni.showToast({
						title: '请通知接车人去完成接车',
						icon: 'none'
					})
					return
				}
			},
			closePop() {
				this.showPop = false
			},
			confirmPop() {
				// 分配借车人
				this.getgoodes()
			},
			clickMeetMan() {
				console.log('执行');
				// this.showMeetMan = true;
				this.showPop = true;
			},
			formatDate(dateStr) {
				return formatDate(dateStr);
			},
			goAddOrder(data) {
				uni.navigateTo({
					url: `/pages/index/Neworder?appointmentId=${data.id}&meetCarId=${data.meetOrderId}`
				})
			},
			confirmMeetMan(e) {
				this.meetName = e.value[0].nickname
				this.meetManId = e.value[0].id
				this.showMeetMan = false
			},
			async getStaff() {
				let data = {
					pageNo: 1, //第几页
					pageSize: 10000000, //一页多少张
				}
				let res = await request({
					url: '/system/role/selectListByRoleId',
					method: 'get',
					params: data
				})
				// 如果需要确保DOM已更新再操作：
				this.$nextTick(() => {
					this.meetManList = res.data.records;
					// 这里可以放需要DOM更新的操作
				});
			},
			convertToOrder() {
				uni.showModal({
					title: '提示',
					content: '确定将此预约转为订单吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								this.goAddOrder(this.detail)
							} catch (error) {
								console.error('转订单失败:', error);
								uni.showToast({
									title: '转换失败',
									icon: 'none'
								});
							}
						}
					}
				});
			},
			viewDriverLicense() {
				if (!this.detail.driverLicenesImg) {
					uni.showToast({
						title: '未上传行驶证',
						icon: 'none'
					});
					return;
				}

				uni.previewImage({
					urls: [this.baseImageUrl + '/' + this.detail.driverLicenesImg]
				});
			},
			async getgoodes() {
				if (this.carNum == '' || this.carRegisterDate == '') {
					uni.showToast({
						title: '车牌号 车辆注册日期 必填！',
						icon: 'none'
					})
					return
				}
				let data = {
					partnerId: uni.getStorageSync('partnerId'),
					buyName: this.detail.owner || this.detail.buyName,
					buyPhone: this.detail.otherPhone || this.detail.buyPhone,
					userAddress: this.detail.address,
					unitName: this.detail.unitName,
					carNum: this.detail.carNo,
					carModel: this.detail.carModel,
					carStatus: this.detail.carStatus,
					carIdNo: this.detail.carIdNo,
					customerSource: this.detail.customerSource,
					skuId: this.detail.skuId,
					carNature: this.detail.carNature,
					inspectionWorkNodes: this.detail.inspectionWorkNodes,
					leadManId: this.detail.leadManId,
					startTime: this.detail.recordTime,
					otherPhone: this.otherPhone,
					carRegisterDate: this.detail.carRegisterDate,
					meetManId: this.meetManId,
					appointmentId: this.detail.id,
					meetType: 1
				}

				try {
					let res = await request({
						url: '/inspection-meet-car-order/add',
						method: 'post',
						data: data
					})
					uni.showToast({
						title: "分配成功"
					})
					await this.fetchDetail()
					this.showPop = false
				} catch {
					uni.showToast({
						title: '分配失败',
						icon: 'none'
					})
				}
			},
			callUser() {
				const phone = this.detail.otherPhone || this.detail.buyPhoneNum;
				if (!phone) {
					uni.showToast({
						title: '无联系电话',
						icon: 'none'
					});
					return;
				}

				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		}
	}
</script>

<style lang="scss">
	.appointment-detail {
		padding: 20rpx;
		padding-bottom: 120rpx;
		background-color: #f5f5f5;
		box-sizing: border-box;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}

			.status {
				padding: 6rpx 20rpx;
				border-radius: 20rpx;
				font-size: 24rpx;
				background-color: #f0f0f0;
				color: #666;

				&.converted {
					background-color: #e6f7ff;
					color: #1890ff;
				}
			}
		}

		.card {
			background-color: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				border-bottom: 1rpx solid #f0f0f0;

				.card-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
				}

				.convert-btn {
					margin: 0;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
					background-color: #1890ff;
					color: white;
				}

				.convert-btn-disable {
					margin: 0;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
				}
			}

			.info-list {
				padding: 0 20rpx;

				.info-item {
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #f0f0f0;

					&:last-child {
						border-bottom: none;
					}

					.label {
						width: 160rpx;
						font-size: 28rpx;
						color: #999;
					}

					.value {
						flex: 1;
						font-size: 28rpx;
						color: #333;
					}

					.call-btn,
					.view-btn {
						margin-left: 20rpx;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 24rpx;

						&.call-btn {
							background-color: #1890ff;
							color: white;
						}

						&.view-btn {
							background-color: #fff;
							color: #1890ff;
							border: 1rpx solid #1890ff;
						}
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			padding: 20rpx;
			background-color: #fff;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

			.btn {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				margin: 0 10rpx;
				background-color: #fff;
				color: #333;
				border: 1rpx solid #ddd;

				&.primary {
					background-color: #1890ff;
					color: white;
					border: none;
				}
			}
		}
	}

	.poup {
		display: flex;
		justify-content: space-between;
		width: 100%;
		color: #666;

		.poup-item {
			display: flex;
			justify-content: space-between;
			margin-top: 15rpx;



		}
	}
</style>