<template>
	<view class="page">
		<u-navbar title="轨迹" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='45'>
		</u-navbar>
		<!-- 地图容器 -->
		<view class="map-container">
			<map id="map" class="map" :latitude="latitude" :longitude="longitude" :polyline="currentPolyline"
				:markers="markers" :scale="17" :polygon="polygon">

			</map>
		</view>
		<view class="park" @click="toggleIconAndCallout">
			<image class="img" src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW" mode="aspectFit"></image>
		</view>
		<!-- 轨迹信息面板 -->
		<view class="track-panel">
			<!-- 时间范围选择 -->
			<view class="time-range" v-if="type == 1">
				<view class="time-picker" @click="time1 = true">
					<text>{{ startTime }}</text>
					<u-icon name="arrow-down" size="14" color="#666"></u-icon>
				</view>
				<text class="separator">至</text>
				<view class="time-picker" @click="time2 = true">
					<text>{{ endTime }}</text>
					<u-icon name="arrow-down" size="14" color="#666"></u-icon>
				</view>
			</view>

			<!-- 快捷时间选择器 -->
			<view class="time-selector" v-if="type == 1">
				<view class="time-btn" v-for="(item, index) in timeOptions" :key="index"
					:class="{ active: activeTime === item.value }" @tap="selectTime(item.value)">
					{{ item.label }}
				</view>
			</view>

			<!-- 设备信息 -->
			<view class="device-info">
				<view class="device-item">
					<text class="device-number">{{ deviceNumber }}</text>
					<!-- <text class="device-type">· 小程序</text> -->
				</view>
				<view class="device-item">
					<text class="label">状态：</text>
					<text class="value">{{ currentStatus }}</text>
				</view>
				<view class="device-item">
					<text class="label">速度：</text>
					<text class="value">{{ currentSpeed }}km/h</text>
				</view>
				
				<view class="device-item">
					<text class="label">定位：</text>
					<text class="value">{{ location }}</text>
				</view>
				<view class="device-item">
					<text class="label">电压：</text>
					<text class="value">{{ currentBattery }}</text>
				</view>
				
				<view class="device-item">
					<text class="label">锁状态：</text>
					<text class="value">{{ currentLockStatus }}</text>
				</view>
				<view class="device-item">
					<text class="label">电门：</text>
					<text class="value">{{ currentEleLock }}</text>
				</view>
			</view>

			<!-- 轨迹回放控制面板 -->
			<view class="playback-panel">
				<view class="playback-controls">
					<!-- 进度条行 -->
					<view class="progress-row">
						<slider class="progress-slider" :value="currentProgress" :min="0" :max="trackPoints.length - 1"
							:step="1" @change="onSliderChange" @changing="onSliderChanging" />
					</view>

					<!-- 控制按钮行 -->
					<view class="control-row">
						<view class="left-controls">
							<view class="play-btn" @tap="togglePlay">
								<text>{{ isPlaying ? '暂停' : '播放' }}</text>
							</view>

							<view class="speed-control">
								<text class="speed-label">{{ playbackSpeed }}x</text>
								<view class="speed-buttons">
									<text @tap="changeSpeed('down')" class="speed-btn">-</text>
									<text @tap="changeSpeed('up')" class="speed-btn">+</text>
								</view>
							</view>
						</view>

						<view class="point-info">
							<text>{{ currentPointTime }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 时间选择器组件 -->
			<u-picker mode="time" v-model="time1" :params="params" :default-time="startTime" @confirm="confirm1"
				:start-year="startYear" :end-year="endYear" title="选择开始时间"></u-picker>

			<u-picker mode="time" v-model="time2" :params="params" :default-time="endTime" @confirm="confirm2"
				:start-year="startYear" :end-year="endYear" title="选择结束时间"></u-picker>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bgc: {
				backgroundColor: "#fff",
			},
			latitude: 39.909,
			longitude: 116.397,
			currentPolyline: [], // 当前显示的轨迹线
			polygon: [], // 用于存储区域多边形
			markers: [],
			activeTime: '3',
			deviceNumber: '',
			speed: '0.00',
			voltage: '0.000',
			location: '',

			// 区域和停车场相关数据
			parkingList: [],
			showIconAndCallout: false,
			areaId: '',

			// 轨迹回放相关数据
			trackPoints: [], // 存储轨迹点数据
			currentProgress: 0, // 当前进度
			isPlaying: false, // 是否正在播放
			playbackTimer: null, // 回放定时器
			currentPointTime: '', // 当前点的时间
			playbackSpeed: 1, // 播放速度倍数
			speedOptions: [0.5, 1, 2, 4, 8], // 可选的播放速度
			currentSpeedIndex: 1, // 当前速度索引
			currentSpeed: '0.00', // 当前估算速度
			playbackInterval: 1000, // 播放间隔（毫秒）
			currentBattery: '未知', // 当前电池电量
			currentLockStatus: '关锁', // 当前锁状态
			currentEleLock: '关锁', // 当前电子锁状态
			currentStatus: '', // 当前状态
			// 时间选择相关
			time1: false,
			time2: false,
			params: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: false
			},
			startYear: 2022,
			endYear: new Date().getFullYear(),
			startTime: '',
			endTime: '',
			sn: '',
			timeOptions: [
				{ label: '1小时', value: '1' },
				{ label: '3小时', value: '3' },
				{ label: '6小时', value: '6' },
				{ label: '12小时', value: '12' }
			],
			type: ''
		}
	},

	onLoad(e) {

		this.sn = e.sn
		this.type = e.type
		if (e.type == 1) {
			const now = new Date()
			const threeHoursAgo = new Date(now - 3 * 60 * 60 * 1000)

			this.startTime = this.formatDateTime(threeHoursAgo)
			this.endTime = this.formatDateTime(now)
		} else {
			this.startTime = e.startTime
			this.endTime = e.endTime
		}


		this.getDeviceInfo()
		this.updateTrackData()
	},

	methods: {
		getDeviceInfo() {
			this.$u.get('/app/device/info?sn=' + this.sn).then((res) => {
				if (res.code === 200) {
					this.deviceNumber = res.data.sn
					this.voltage = res.data.voltage
					this.areaId = res.data.areaId
					this.latitude = res.data.latitude
					this.longitude = res.data.longitude
					this.getArea()
				}
			})
		},
		getParking() {
			let data = {
				areaId: this.areaId
			}
			this.$u.get('/app/parking/list?', data).then((res) => {
				if (res.code === 200) {
					const type1Data = [];
					const type2Data = [];
					const type3Data = [];

					res.rows.forEach(row => {
						if (row.type == 1) type1Data.push(row);
						else if (row.type == 2) type2Data.push(row);
						else if (row.type == 3) type3Data.push(row);
					});

					const validBoundaries = type1Data.map(row => row.boundaryStr).filter(boundary =>
						typeof boundary === 'string' && boundary.trim() !== '');
					const polygons = this.convertBoundaryToPolygons(validBoundaries, 1);

					const validBoundaries1 = type2Data.map(row => row.boundaryStr).filter(boundary =>
						typeof boundary === 'string' && boundary.trim() !== '');
					const polygons1 = this.convertBoundaryToPolygons(validBoundaries1, 2);

					const validBoundaries2 = type3Data.map(row => row.boundaryStr).filter(boundary =>
						typeof boundary === 'string' && boundary.trim() !== '');
					const polygons2 = this.convertBoundaryToPolygons(validBoundaries2, 3);

					this.polygon = [...this.polygon, ...polygons2, ...polygons1, ...polygons];
					this.parkingList = res.rows;
				}
			}).catch(error => {
				console.error("Error fetching parking data:", error);
			});
		},

		// 获取区域数据
		getArea() {
			this.$u.get("/app/area/" + this.areaId).then((res) => {
				if (res.code === 200) {
					const polygons = this.convertBoundaryToPolygon(res.data.boundaryStr)
					if (polygons) {
						this.polygon.push(polygons)
					}
					this.getParking()
				}
			}).catch(error => {
				console.error("Error fetching area data:", error);
			});
		},
		updateTrackData() {
			console.log(this.startTime, this.endTime)
			const formattedStartTime = this.startTime
			const formattedEndTime = this.endTime

			this.$u.post('/appVerify/trajectoryDetails?sn=' + this.sn + '&startTime=' + formattedStartTime + '&endTime=' + formattedEndTime).then((res) => {
				if (res.code === 200) {
					if (!res.data || res.data.length === 0) {
						// 使用 uni.showToast 显示无轨迹数据的提示
						uni.showToast({
							title: '该时间段内无轨迹数据',
							icon: 'none',
							duration: 2000
						});
						// 清空现有轨迹数据
						this.trackPoints = [];
						this.currentPolyline = [];
						this.markers = [];
						return;
					}

					this.trackPoints = res.data.map(point => ({
						latitude: parseFloat(point.latitude),
						longitude: parseFloat(point.longitude),
						time: point.at,
						status: point.status,
						onlineStatus: point.onlineStatus,
						bat: point.bat || 0,
						lockStatus: point.lockStatus,
						q: point.q
					}));

					if (this.trackPoints.length > 0) {
						this.currentProgress = 0;
						this.updateMapPoint(0);
					}
				}
			}).catch(error => {
				uni.showToast({
					title: '获取轨迹数据失败',
					icon: 'none',
					duration: 2000
				});
				console.error("Error fetching track data:", error);
			});
		},
		// 转换多个边界数据为多边形
		convertBoundaryToPolygons(boundaries, num) {
			if (!boundaries || !boundaries.length) return [];

			const colors = {
				1: { fill: "#3A7EDB70", stroke: "#3A7EDB90" },
				2: { fill: "#FFF5D670", stroke: "#FFC10790" },
				3: { fill: "#FFE0E070", stroke: "#FF473E90" }
			};

			return boundaries.map(boundary => {
				if (!boundary) return null;
				let coords;
				try {
					coords = JSON.parse(boundary);
				} catch (error) {
					console.error("Error parsing boundary JSON:", error);
					return null;
				}

				if (!Array.isArray(coords)) {
					console.error("Parsed boundary is not an array:", coords);
					return null;
				}

				const points = coords.map(coord => ({
					latitude: coord[1],
					longitude: coord[0]
				}));

				return {
					points: points,
					fillColor: colors[num].fill,
					color: colors[num].stroke,
					width: 2,
					zIndex: 1
				};
			}).filter(Boolean);
		},
		// 切换图标和标注显示
		toggleIconAndCallout() {
        this.showIconAndCallout = !this.showIconAndCallout;
        if (this.showIconAndCallout) {
            const newMarkers = [];
            this.parkingList.forEach(item => {
                newMarkers.push({
                    id: parseFloat(item.parkingId),
                    latitude: parseFloat(item.latitude),
                    longitude: parseFloat(item.longitude),
                    width: 20,
                    height: 28.95,
                    iconPath: item.type == 1 ?
                        'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' : item.type == 2 ?
                            'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :
                            'https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq',
                    callout: {
                        content: item.parkingName,
                        color: '#ffffff',
                        fontSize: 14,
                        borderRadius: 10,
                        bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FFC107' : '#FF473E',
                        padding: 6,
                        display: 'ALWAYS'
                    }
                });
            });
            // 合并轨迹标记和停车场标记
            this.markers = [...this.markers, ...newMarkers];
        } else {
            // 仅移除停车场标记，保留轨迹标记
            this.markers = this.markers.filter(marker => marker.id === 1);
        }
    },
		// 转换边界数据为多边形
		convertBoundaryToPolygon(boundary) {
			if (!boundary) return null;

			const points = JSON.parse(boundary).map(coord => ({
				latitude: coord[1],
				longitude: coord[0]
			}));

			return {
				points: points,
				fillColor: "#55888890",
				color: "#22FF0050",
				strokeWidth: 2,
				zIndex: 1
			};
		},
		formatStatus(status) {
            const statusMap = {
                '0': '仓库中',
                '1': '待租',
                '2': '预约中',
                '3': '骑行中',
                '4': '临时锁车中',
                '6': '调度中',
                '8': '下线'
            }
            return statusMap[status] || '未知状态'
        },
		updateMapPoint(index) {
			if (!this.trackPoints[index]) return;

			const currentPoint = this.trackPoints[index];
			const prevPoint = index > 0 ? this.trackPoints[index - 1] : null;

			// 计算速度
			if (prevPoint) {
				const distance = this.calculateDistance(
					prevPoint.latitude,
					prevPoint.longitude,
					currentPoint.latitude,
					currentPoint.longitude
				);
				const timeGap = (new Date(currentPoint.time) - new Date(prevPoint.time)) / 1000;
				this.currentSpeed = timeGap > 0 ? ((distance / timeGap) * 3.6).toFixed(1) : '0.00';
			} else {
				this.currentSpeed = '0.00';
			}

			// 更新信息显示
			this.currentStatus = this.formatStatus(currentPoint.status)
			this.currentPointTime = currentPoint.time;
			this.location = `${currentPoint.longitude}, ${currentPoint.latitude}`;
			this.currentBattery = currentPoint.bat == null ? '未知' : (currentPoint.bat / 10).toFixed(1) + 'V'
			this.currentLockStatus = currentPoint.lockStatus == '0' ? '关锁' : '开锁'

            this.currentEleLock = point.q == null ? '未知' : (point.q == '0' ? '关锁' : '开锁')
			// 更新轨迹线
			this.currentPolyline = [{
				points: this.trackPoints.slice(0, index + 1),
				width: 8,
				arrowLine: true,
				color: '#00AF99'
			}];

			// 选择图标
			let iconPath = '';
			let calloutColor = '#2679D1';
			let calloutBgColor = '#D4ECFF';

			switch (currentPoint.status) {
				case '0':
					iconPath = currentPoint.onlineStatus == '0' ?
						'https://lxnapi.ccttiot.com/bike/img/static/uQRng4QNKA38Amk8Wgt5' :
						'https://lxnapi.ccttiot.com/bike/img/static/uocjFo8Ar2BJVpzC2G2f';
					calloutColor = '#ffffff';
					calloutBgColor = '#000000';
					break;
				case '1':
					iconPath = currentPoint.onlineStatus == '0' ?
						'https://lxnapi.ccttiot.com/bike/img/static/uzhMeExOQJbMcZtrfGUV' :
						'https://lxnapi.ccttiot.com/bike/img/static/uheL17wVZn24BwCwEztT';
					break;
				case '2':
					iconPath = currentPoint.onlineStatus == '0' ?
						'https://lxnapi.ccttiot.com/bike/img/static/uR3DQEssiK62ovhh88y8' :
						'https://lxnapi.ccttiot.com/bike/img/static/u460R1NKWHEpHbt0U4H7';
					break;
				case '3':
					iconPath = currentPoint.onlineStatus == '0' ?
						'https://lxnapi.ccttiot.com/bike/img/static/uG13E7BpUFF44wVYC9no' :
						'https://lxnapi.ccttiot.com/bike/img/static/uHQIdWCTmtUztl49wBKU';
					break;
				case '4':
					iconPath = currentPoint.onlineStatus == '0' ?
						'https://lxnapi.ccttiot.com/bike/img/static/uRod2zf3t9dAOYafWoWt' :
						'https://lxnapi.ccttiot.com/bike/img/static/uZpXq3TBtM5gVgJJeImY';
					break;
				case '6':
					iconPath = currentPoint.onlineStatus == '0' ?
						'https://lxnapi.ccttiot.com/bike/img/static/uhZudZM3nEKj0tYKlho2' :
						'https://lxnapi.ccttiot.com/bike/img/static/ujur6TezvPf4buFAqPHo';
					break;
				case '8':
					iconPath = currentPoint.onlineStatus == '0' ?
						'https://lxnapi.ccttiot.com/bike/img/static/ucBKG3ebYRAToVweJihu' :
						'https://lxnapi.ccttiot.com/bike/img/static/uyK7Vg4Lu8xb3oNVuG2l';
					calloutColor = '#ffffff';
					calloutBgColor = '#000000';
					break;
				default:
					iconPath = 'https://lxnapi.ccttiot.com/bike/img/static/uzhMeExOQJbMcZtrfGUV';
			}

			// 更新markers
			this.markers = [{
				id: 1,
				latitude: currentPoint.latitude,
				longitude: currentPoint.longitude,
				width: 40,
				height: 47,
				iconPath: iconPath,
				callout: {
					content: ` ${this.currentSpeed}km/h`,
					color: calloutColor,
					fontSize: 10,
					borderRadius: 10,
					bgColor: calloutBgColor,
					padding: 2,
					display: 'ALWAYS'
				}
			}];
		},

		calculateDistance(lat1, lon1, lat2, lon2) {
			const R = 6371000;
			const φ1 = this.toRadians(lat1);
			const φ2 = this.toRadians(lat2);
			const Δφ = this.toRadians(lat2 - lat1);
			const Δλ = this.toRadians(lon2 - lon1);

			const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
				Math.cos(φ1) * Math.cos(φ2) *
				Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
			const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

			return R * c;
		},

		toRadians(degrees) {
			return degrees * Math.PI / 180;
		},

		changeSpeed(direction) {
			if (direction === 'up' && this.currentSpeedIndex < this.speedOptions.length - 1) {
				this.currentSpeedIndex++;
			} else if (direction === 'down' && this.currentSpeedIndex > 0) {
				this.currentSpeedIndex--;
			}

			this.playbackSpeed = this.speedOptions[this.currentSpeedIndex];
			this.playbackInterval = 1000 / this.playbackSpeed;

			if (this.isPlaying) {
				this.stopPlayback();
				this.startPlayback();
			}
		},

		onSliderChange(e) {
			const index = parseInt(e.detail.value);
			this.currentProgress = index;
			this.updateMapPoint(index);
		},

		onSliderChanging(e) {
			const index = parseInt(e.detail.value);
			this.updateMapPoint(index);
		},

		togglePlay() {
			this.isPlaying = !this.isPlaying;
			if (this.isPlaying) {
				this.startPlayback();
			} else {
				this.stopPlayback();
			}
		},

		startPlayback() {
			if (this.playbackTimer) return;

			this.playbackTimer = setInterval(() => {
				if (this.currentProgress >= this.trackPoints.length - 1) {
					this.stopPlayback();
					return;
				}

				this.currentProgress++;
				this.updateMapPoint(this.currentProgress);
			}, this.playbackInterval);
		},

		stopPlayback() {
			if (this.playbackTimer) {
				clearInterval(this.playbackTimer);
				this.playbackTimer = null;
			}
			this.isPlaying = false;
		},

		formatDateTime(date) {
			const year = date.getFullYear()
			const month = (date.getMonth() + 1).toString().padStart(2, '0')
			const day = date.getDate().toString().padStart(2, '0')
			const hour = date.getHours().toString().padStart(2, '0')
			const minute = date.getMinutes().toString().padStart(2, '0')
			const second = '00'
			return `${year}-${month}-${day} ${hour}:${minute}:${second}`
		},

		confirm1(e) {
			this.activeTime = 0
			const selectedTime = new Date(e.year, e.month - 1, e.day, e.hour, e.minute)
			this.startTime = this.formatDateTime(selectedTime)
			this.updateTrackData()
		},

		confirm2(e) {
			this.activeTime = 0
			const selectedTime = new Date(e.year, e.month - 1, e.day, e.hour, e.minute)
			this.endTime = this.formatDateTime(selectedTime)
			this.updateTrackData()
		},

		selectTime(time) {
			this.activeTime = time
			const hours = parseInt(time)
			const now = new Date()
			const startTime = new Date(now - hours * 60 * 60 * 1000)

			this.startTime = this.formatDateTime(startTime)
			this.endTime = this.formatDateTime(now)
			this.updateTrackData()
		}
	}
}
</script>


<style lang="scss" scoped>
.page {
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: #f5f7fa;
	display: flex;
	flex-direction: column;
	position: relative;
}
.park {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		right: 30rpx;
		top: 700rpx;
		// background-color: #fff;
		border-radius: 50%;
		width: 82rpx;
		height: 82rpx;
		z-index: 10;

		.img {

			width: 82rpx;
			height: 82rpx;
		}
	}
.map-container {
	width: 100%;
	height: 45vh;
	position: relative;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	flex-shrink: 0;

	.map {
		width: 100%;
		height: 100%;
	}

	// .park {
	// 	position: absolute;
	// 	right: 24rpx;
	// 	bottom: 48rpx;
	// 	width: 88rpx;
	// 	height: 88rpx;
	// 	z-index: 999;
	// 	transition: transform 0.2s ease;

	// 	&:active {
	// 		transform: scale(0.95);
	// 	}

	// 	.img {
	// 		width: 100%;
	// 		height: 100%;
	// 		border-radius: 16rpx;
	// 		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	// 	}
	// }
}

.track-panel {
	flex: 1;
	background: #fff;
	border-radius: 32rpx 32rpx 0 0;
	margin-top: -30rpx;
	position: relative;
	z-index: 2;
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
	padding: 24rpx;
	display: flex;
	flex-direction: column;
}

.time-range {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16rpx;
	gap: 16rpx;

	.time-picker {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f8fafc;
		padding: 16rpx;
		border-radius: 12rpx;
		border: 2rpx solid #e2e8f0;
		transition: all 0.3s ease;

		&:active {
			background: #f1f5f9;
		}

		text {
			margin-right: 12rpx;
			font-size: 24rpx;
			color: #334155;
		}
	}

	.separator {
		padding: 0 16rpx;
		color: #64748b;
		font-size: 24rpx;
	}
}

.time-selector {
	display: flex;
	justify-content: space-between;
	margin-bottom: 16rpx;
	gap: 12rpx;

	.time-btn {
		flex: 1;
		padding: 12rpx 20rpx;
		border-radius: 32rpx;
		font-size: 24rpx;
		color: #64748b;
		background: #f1f5f9;
		transition: all 0.3s ease;
		text-align: center;

		&.active {
			background: #3b82f6;
			color: #fff;
			box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
		}

		&:active {
			transform: scale(0.98);
		}
	}
}

.device-info {
	padding: 16rpx;
	background: #f8fafc;
	border-radius: 16rpx;
	margin-bottom: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);

	.device-item {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.device-number {
			font-size: 28rpx;
			font-weight: 600;
			color: #1e293b;
		}

		.device-type {
			font-size: 24rpx;
			color: #64748b;
			margin-left: 12rpx;
		}

		.label {
			width: 100rpx;
			font-size: 24rpx;
			color: #64748b;
		}

		.value {
			flex: 1;
			font-size: 24rpx;
			color: #334155;
			font-weight: 500;
		}
	}
}

.playback-panel {
	background: #fff;
	border-radius: 16rpx;
	padding: 16rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

	.playback-controls {
		display: flex;
		flex-direction: column;
		gap: 16rpx;

		.progress-row {
			padding: 0 8rpx;
			margin-bottom: 8rpx;
		}

		.control-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 8rpx;

			.left-controls {
				display: flex;
				align-items: center;
				gap: 20rpx;
			}

			.play-btn {
				width: 72rpx;
				height: 72rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #3b82f6;
				border-radius: 50%;
				box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
				transition: all 0.2s ease;

				&:active {
					transform: scale(0.95);
					box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.2);
				}

				text {
					color: #fff;
					font-size: 24rpx;
					font-weight: 500;
				}
			}

			.speed-control {
				display: flex;
				align-items: center;
				background: #f8fafc;
				padding: 8rpx 16rpx;
				border-radius: 32rpx;
				border: 2rpx solid #e2e8f0;

				.speed-label {
					font-size: 24rpx;
					color: #334155;
					font-weight: 500;
					margin-right: 12rpx;
					min-width: 44rpx;
					text-align: center;
				}

				.speed-buttons {
					display: flex;
					align-items: center;
					gap: 8rpx;

					.speed-btn {
						width: 60rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						background: #fff;
						border-radius: 50%;
						font-size: 28rpx;
						color: #334155;
						font-weight: 500;
						box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
						transition: all 0.2s ease;

						&:active {
							background: #f1f5f9;
							transform: scale(0.95);
						}
					}
				}
			}

			.point-info {
				font-size: 24rpx;
				color: #64748b;
				background: #f8fafc;
				padding: 8rpx 16rpx;
				border-radius: 24rpx;
			}
		}
	}
}

// 自定义滑块样式
::v-deep .uni-slider {
	margin: 0;
}

::v-deep .uni-slider-handle {
	width: 28rpx;
	height: 28rpx;
	background-color: #3b82f6;
	box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.3);
	transition: transform 0.2s ease;

	&:active {
		transform: scale(1.1);
	}
}

::v-deep .uni-slider-track {
	height: 4rpx;
	background-color: #3b82f6;
}
</style>