<template>
	<view class="container" v-if="detailsinfo">
		<view class="c-top">
			<view class="" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="c-title">救援详情</view>
			<view class=""></view>
		</view>
		<view class="" v-if="!detailsinfo.driverInfo">

			<map style="width: 100%;height: 250px;" :layer-style='5' :latitude="detailsinfo.rescueInfo.rescueLatitude"
				:longitude="detailsinfo.rescueInfo.rescueLongitude" :markers="marker" :scale="scale" @markertap="markertap"
				@callouttap='callouttap' @tap="tap">
			</map>
		</view>
		<view class="" v-if="detailsinfo.driverInfo">

			<map style="width: 100%;height: 250px;" :layer-style='5' :latitude="detailsinfo.driverInfo.driverLatitude"
				:longitude="detailsinfo.driverInfo.driverLongitude" :markers="marker" :scale="scale" @markertap="markertap"
				@callouttap='callouttap' @tap="tap">
			</map>
		</view>

		<view class="mubu">
			<view class="zzhui">
				<view class="c-box">
					<view class="box-title" v-if="detailsinfo.rescueInfo.rescueStatus == 1">您的订单还未开始，请耐心等待</view>
					<view class="box-title" v-else-if="detailsinfo.rescueInfo.rescueStatus == 7">您的订单已取消</view>
					<view class="box-title" v-else-if="detailsinfo.rescueInfo.rescueStatus == 2">您的订单处于待开始，请耐心等待</view>
					<view v-else class="box-title" style="display: flex;column-gap: 2px;align-items: center;">
						<text>{{detailsinfo.rescueInfo.driverCarNum}}</text>
						<!-- <text>|</text>
						<text></text>
						<text>|</text>
						<text></text> -->
					</view>
					<!-- <view class="box-title" style="display: flex;column-gap: 2px;align-items: center;"
						v-if="detailsinfo.rescueInfo.rescueStatus == 3">
						<text>{{detailsinfo.rescueInfo.driverCarNum}}</text>
						<text>|</text>
						<text></text>
						<text>|</text>
						<text></text>
					</view> -->
					<!-- 					<view class="box" v-if="detailsinfo.rescueInfo.rescueStatus == 3">
						救援人员仍在赶来的路上，请耐心等待
					</view> -->
					<!-- <view class="box-title" v-if="detailsinfo.rescueInfo.rescueStatus == 3"></view> -->
					<!-- <view class="box-title" v-if="detailsinfo.rescueInfo.rescueStatus == 5">您的订单已经完成</view>
					<view class="box-title" v-if="detailsinfo.rescueInfo.rescueStatus == 6">待取车</view> -->

					<view class="touxiang">
						<image :src=" baseUrl + detailsinfo.driverInfo.avatar " mode=""></image>
					</view>
					<view class="box-bs" v-if="detailsinfo.driverInfo != '' ">
						<view class="orderCardStatusData" v-if="detailsinfo.rescueInfo.rescueStatus == 3">
							<image src="@/static/icons/homeOrderCard/dhjl.png" class="orderCardDistanceIcon" mode="aspectFit"></image>
							<text class="orderCardDistanceValue">{{detailsinfo.rescueInfo.distance / 1000 || 0}}KM</text>
							&nbsp;
							<image src="@/static/icons/homeOrderCard/yjsj.png" class="orderCardPredictIcon"></image>
							<text class="orderCardPredictDate">{{detailsinfo.rescueInfo.needTime || 0}}分钟</text>
							到达
						</view>
						<view class="bs-lsft">
							<!-- <view class="box-dtitle">{{detailsinfo.rescueInfo.licenseNum || ''}} </view> -->
							<view class="dix">
								<text>{{detailsinfo.driverInfo.realName || '司机'}}</text>
								<view>
									<uni-icons type="star-filled" color="#FFA632" size="14"></uni-icons>
									<text>{{(detailsinfo.driverInfo.avgScore || 0).toFixed(1)}}</text>
								</view>
								<text>{{detailsinfo.driverInfo.rescueNum || 0}}单</text>
							</view>

						</view>
						<view class="box-bs-footer">
							<view v-if="detailsinfo.rescueInfo.rescueStatus <= 2" class="box-bs-footer-btn cancelOrderBtn">取消订单</view>
							<view v-if="detailsinfo.rescueInfo.rescueStatus > 2" class="box-bs-footer-btn callDriverBtn" @click="gettel(detailsinfo.driverInfo.phonenumber)">联系司机
							</view>
						</view>
					</view>
					<!-- <view class="lanniu" v-if="detailsinfo.driverInfo != '' "
						@click="gettel(detailsinfo.driverInfo.phonenumber)">
						<uni-icons type="phone-filled" color="#ffffff" size="16"></uni-icons>
						<text>拨打电话</text>
					</view> -->

				</view>

				<view class="cont-bs" v-if="detailsinfo.setMoney != '' ">
					<view class="dix">
						<text style="color: #000000;font-size: 32rpx;">订单金额: </text>
						<text style="color: #FF522A;font-size: 32rpx;">{{detailsinfo.setMoney / 100}}</text>
						<text>元</text>
					</view>
					<view class="dix">

						<uni-icons type="right" size="16" color="#C7C7CC"></uni-icons>
					</view>
				</view>
				<view class="c-box" style="margin-bottom: 15px;"
					v-if="detailsinfo.rescueInfo.orderStatus == 3 ||detailsinfo.rescueInfo.orderStatus == 2 ">
					<view style="font-size: 32rpx;color: #000;font-weight: bold" class="">评价内容</view>
					<view style="margin: 20rpx 0 20rpx 0;">
						<u-rate :count="count" v-model="value" active-color="#FFA632" inactive-color="#D7D7D7"></u-rate>
					</view>
					<u--textarea style="background: rgba(0,0,0,0.05);border-radius: 12rpx;" v-model="value5"
						v-if="detailsinfo.rescueInfo.orderStatus == 2 " placeholder="请输入内容" border="bottom"></u--textarea>
					<u--textarea v-model="value5" disabled v-if="detailsinfo.rescueInfo.orderStatus == 3 " placeholder="请输入内容"
						border="bottom"></u--textarea>
					<view class="anniua" @click="pinglun()" v-if="detailsinfo.rescueInfo.orderStatus == 2 ">
						<text>提交评价</text>
					</view>
				</view>
				<view class="cont-bs" v-if="detailsinfo.setMoney == '' ">
					<view class="dix">
						<!-- <text>订单金额: </text> -->
						<text style="color: #FF522A;">等待核算中......</text>
					</view>

				</view>

				<view v-if="detailsinfo.detail && detailsinfo.detail.length > 0" class="c-box">
					<view class="lan-ga" v-for="(item,index) in detailsinfo.detail" :key="index">
						<view class="ga-top-box">
							<view v-if="index === detailsinfo.detail.length - 1" class="gain">
								<image class="gainIcon" src="@/static/icons/currentDetails.png" mode="aspectFit"></image>
							</view>
							<view v-else class="gain">{{ index + 1 }}</view>
							<view class="ga-content">
								<view class="ga-content-top">
									<view class="ga-content-title">{{item.title}}</view>
									<view class="xhui">
										{{item.createTime}}
									</view>
								</view>
								<view class="beizh">
									{{item.remark}}
								</view>
								<view class="wrap-box" v-if="item.images">
									<view class="img-box" v-for="(items,index) in item.images.split(',') " :key="index"
										@click="previewImage(items)">
										<image :src="baseUrl + items " mode=""></image>
									</view>
								</view>
							</view>
						</view>
						<view v-if="index < detailsinfo.detail.length - 1" class="lan-ga-line"></view>
					</view>
					<!-- <view class="lan-ga" v-for="(item,index) in detailsinfo.detail" :key="index">
							<view class="ga-top-box">
								<view class="ga-top">
									<view class="gain">{{ String(index + 1).padStart(2, '0') }}</view>
									<view class="">{{item.title}}</view>
								</view>
								<view class="xhui">
									{{item.createTime}}
								</view>
							</view>
							<view class="beizh" style="margin-left: 60rpx;font-size: 14px;">
								{{item.remark}}
							</view>
							<view class="wrap-box" style="margin-left: 20px;" v-if="item.images">
								<view class="img-box" v-for="(items,index) in item.images.split(',') " :key="index"
									@click="previewImage(items)">
									<image :src="baseUrl + items " mode=""></image>
								</view>
							</view>
						</view> -->
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request';

	export default {
		data() {
			return {
				count: 5,
				value: 2,
				ggindex: '',
				value5: '',
				id: 0,
				page: 1,
				num: 8,
				arrlist: [],
				arr: [],
				latitude: 36.858810, //纬度
				longitude: 117.749930, //经度
				scale: 13, //缩放级别
				compass: true,
				marker: [],
				urlList: [],
				baseUrl: this.$baseUrl,
				detailsinfo: null,
				timerId: null,
				currentIndicator: 'none',
				isLoop: true,
				detailTestList: [{
						title: '发起救援',
						createTime: '2024-12-12 00:00:00',
						remark: '救援发起'
					},
					{
						title: '正在救援',
						createTime: '2024-12-12 00:00:00',
						remark: '司机正在赶来的路上'
					},
					{
						title: '费用核算',
						createTime: '2024-12-12 00:00:00',
						remark: '司机核算救援费用为1500元'
					},
				]
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getmapdetails()
		},

		mounted() {

			this.timerId = setInterval(() => {
				this.getmapdetails()
				console.log('123');
			}, 10000);
		},
		onHide() {
			this.destroyTimer();
		},
		components: {

		},
		onShareAppMessage(res) {
			// if (res.from === 'button') {// 来自页面内分享按钮
			//   console.log(res.target)
			// }
			return utils.sendFriend()
		},
		onShareTimeline(res) {
			return utils.sendCircle()
		},
		methods: {
			previewImage(url) {
				let newsurl = this.baseUrl + url
				this.urlList.push(newsurl)
				console.log();
				uni.previewImage({
					urls: this.urlList,
					indicator: this.currentIndicator,
					loop: this.isLoop
				})
			},
			destroyTimer() {
				clearInterval(this.timerId);
				this.timerId = null;
			},
			gettel(num) {
				uni.makePhoneCall({
					phoneNumber: num //仅为示例
				});
			},
			getback() {

				clearInterval(this.timerId);
				this.timerId = null;
				uni.navigateBack()

			},
			zhankai() {
				this.num = 999
				this.getmap()
			},
			getmapdetails() {
				request({
					url: '/app/rescueInfo/rescueInfoDetail?rescueId=' + this.id,
					method: 'get',
				}).then((res) => {
					console.log('返回信息', res);
					this.detailsinfo = res.data
					this.value5 = res.data.rescueInfo.commentDesc
					this.value = res.data.rescueInfo.commentStar
					let arrcopy = [];
					let obj = {}
					obj.id = res.data.rescueInfo.id
					obj.latitude = res.data.rescueInfo.rescueLatitude
					obj.longitude = res.data.rescueInfo.rescueLongitude
					obj.iconPath = 'http://www.nuoyunr.com/lananRsc/rescue/recueIcon.png'
					obj.rotate = 0
					obj.width = 25
					obj.height = 40
					obj.alpha = 1
					let callout = {}
					callout.content = ''
					callout.color = '#ffffff'
					callout.fontSize = 0
					callout.borderRadius = 0
					callout.borderWidth = '0'
					callout.bgColor = 'transparent'
					callout.display = 'ALWAYS'
					// console.log(obj);
					obj.callout = callout
					arrcopy.push(obj)
					if (this.detailsinfo.driverInfo) {
						let driverPosition = {}
						driverPosition.id = res.data.driverInfo.id
						driverPosition.latitude = res.data.driverInfo.driverLatitude
						driverPosition.longitude = res.data.driverInfo.driverLongitude
						driverPosition.iconPath = 'http://www.nuoyunr.com/lananRsc/rescue/car3.png'
						driverPosition.rotate = 0
						driverPosition.width = 25
						driverPosition.height = 40
						driverPosition.alpha = 1
						driverPosition.callout = callout
						arrcopy.push(driverPosition)
					}
					this.marker = arrcopy;
					// console.log(this.marker, "marker")
				})
			},
			async pinglun() {
				let data = {
					rescueId: this.detailsinfo.rescueInfo.id,
					starLevel: this.value,
					reviewStr: this.value5
				}
				const res = await request({
					url: '/rescuePayApi/reviewOrder',
					method: 'post',
					params: data
				})
				console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: '提交成功'
					})
				}

			},
			shou() {
				this.num = 8
				this.getmap()
			},
			async getlist(id) {
				this.ggindex = id
				const res = await request({
					url: 'GetMapList',
					data: {
						id: id,
						page: 1,
						num: 9999
					}
				})
				uni.showLoading({
					title: "加载中",
				})
				let arrlist = res.data
				this.arrlist = arrlist
			},

			godetails(id) {
				uni.navigateTo({
					url: "/pages/map/mapDetails?id=" + id
				})
			},
			// 点击标记点时触发
			markertap(e) {
				console.log('点击标记点时触发', e)
			},
			// 点击标记点对应的气泡时触发，
			callouttap(e) {
				console.log('点击标记点对应的气泡时触发', e)
			},
			// 点击地图时触发
			tap(e) {
				console.log('点击地图时触发', e)
			}
		},

		onUnload() {
			clearInterval(this.timerId);
			this.timerId = null;
		},

	}
</script>

<style scoped lang="scss">
	.container {
		box-sizing: border-box;
		padding-bottom: 40rpx;
		background: #f6f6f6;
	}

	.c-top {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		height: 88px;
		padding-top: 28px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
	}

	.c-title {
		font-size: 18px;
		font-weight: bold
	}

	.c-box {
		width: 95%;
		margin: 0 auto;
		box-sizing: border-box;
		border-radius: 10px;
		padding: 15px;
		background: white;
		position: relative;
	}

	.cont-bs {
		width: 95%;
		margin: 10px auto;
		box-sizing: border-box;
		border-radius: 10px;
		padding: 15px;
		background: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.box-title {
		font-size: 16px;
		font-weight: bold;
	}

	.box-dtitle {
		font-size: 18px;
		font-weight: bold;
	}

	.mubu {
		width: 100%;
		background: #f6f6f6;
		box-sizing: border-box;
		padding-top: 15px;
		height: calc(60vh);
	}

	.zzhui {
		width: 100%;
		padding-bottom: 20rpx;

		background: #f6f6f6;
	}

	.lanniu {
		width: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 5px 10px;
		color: white;
		background: #2D81FF;
		border-radius: 10px;
	}

	.anniua {
		width: 100%;
		height: 88rpx;
		background: #327DFB;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		color: white;
		margin-top: 20rpx;
	}

	.dix {
		display: flex;
		align-items: center;
		column-gap: 6px;
	}

	.hezi-ga {
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 12px;
		font-weight: 400;
		color: #333333;
		margin: 10px auto;
	}

	.box-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;


		.bt-box {
			width: 25%;
			margin-top: 30rpx;

			.bt-img {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				overflow: hidden;
				box-sizing: border-box;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.zi {
				margin-top: 20rpx;
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				line-height: 24rpx;
			}

		}

		// 蓝杠

	}

	.zi {
		margin-right: 30px;
	}

	.box-bs {
		width: 100%;
	}

	.orderCardStatusData {
		margin: 32rpx 0;
		display: flex;
		align-items: center;
		column-gap: 4rpx;
		font-size: 24rpx;
	}

	.orderCardDistanceIcon,
	.orderCardPredictIcon {
		width: 36rpx;
		height: 36rpx;
	}

	.orderCardDistanceValue {
		color: #919191;
		margin-right: 16rpx;
	}

	.orderCardPredictDate {
		color: #317DFA;
	}

	.bs-lsft {
		margin: 32rpx 0;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}

	.box-bs-footer {
		margin: 32rpx 0 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		column-gap: 24rpx;

		.box-bs-footer-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
		}

		&>.cancelOrderBtn {
			width: 160rpx;
			height: 52rpx;
			border-radius: 24rpx;
			border: 2rpx solid #327DFB;
			color: #327DFB;
		}

		&>.callDriverBtn {
			width: 160rpx;
			height: 52rpx;
			background: #327DFB;
			border-radius: 24rpx;
			color: #fff;
		}
	}

	.touxiang {
		position: absolute;
		right: 20rpx;
		top: 40%;
		transform: translateY(-50%);
		width: 90rpx;
		height: 90rpx;
		background: #B9B9B9;
		border: 2px solid #fff;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 0rpx 0rpx 8rpx 4rpx rgba(0, 0, 0, 0.2);

		image {
			width: 100%;
			height: 100%;
		}
	}

	.bot-di {
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 24rpx;
		color: #5BA8FF;
		margin: 0rpx auto;
		margin-top: 30rpx;
	}

	.dz-box {
		margin: 0 auto;
		width: 95%;
		height: 220rpx;
		border-bottom: 2rpx solid #EEEEEE;
		box-sizing: border-box;
		padding: 30rpx 0px;
		overflow: hidden;
		display: flex;

	}

	.dz-left {
		width: 256rpx;
		height: 160rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.dz-right {
		width: 55%;
	}

	.dz-title {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.dz-hui {
		width: 100%;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		display: flex;
		margin-top: 20rpx;
		// display: -webkit-box;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// -webkit-line-clamp: 1;
		// -webkit-box-orient: vertical;
	}

	.slue {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.sy {
		color: #5BA8FF !important;
		font-weight: bold !important;
	}

	.lan-ga {
		width: 100%;
		margin: 20rpx auto;
		box-sizing: border-box;
		padding-bottom: 40rpx;
		position: relative;

		.lan-ga-line {
			position: absolute;
			width: 2rpx;
			height: calc(100% - 56rpx);
			background-color: #979797;
			left: calc(56rpx / 2 - 2rpx);
			transform: translate(-50%, 0);
			top: calc(56rpx + 10rpx);
		}
	}

	.ga-top-box {
		display: flex;
		justify-content: space-between;
	}

	.ga-content {
		flex: 1;
		width: 0;

		.ga-content-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			column-gap: 8rpx;
			padding-bottom: 14rpx;
		}

		.ga-content-title {
			font-weight: bold;
			flex: 1;
			width: 0;
			word-break: break-all
		}

		.xhui {
			font-size: 22rpx;
			color: #929292;
			flex-shrink: 0;
		}

		.beizh {
			font-size: 28rpx;
			color: #000000;
		}
	}

	.ga-top {
		display: flex;
		align-items: center;
		color: #000;
		font-weight: bold;
		font-size: 16px;
	}

	.img-box {
		width: 70px;
		height: 70px;
		border-radius: 6px;
		overflow: hidden;
		margin-top: 10px;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.wrap-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}


	.gain {
		box-sizing: border-box;
		width: 52rpx;
		height: 52rpx;
		font-size: 34rpx;
		color: #327DFB;
		margin-right: 20rpx;
		border: 2rpx solid #327DFB;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		font-weight: bold;

		.gainIcon {
			width: 100%;
			height: 100%;
		}
	}
</style>