<template>
	<view class="container">
		<u-loading-page :loading="loading" bg-color="#eef3f7" loadingText="FastBee.cn"></u-loading-page>
		<view class="card">
			<u-sticky>
				<view class="player-wrapper">
					<web-view style="width: 100%; height: 220px" id="webviewId" :webview-styles="webviewStyles"
						:fullscreen="false" ref="webview" :update-title="false" @onPostMessage="onMessage"
						@message="onMessage" :src="webviewSrc"></web-view>
				</view>
				<!-- 切换直播和录像的tab栏 -->
				<view class="video-tab-bar">
					<view v-for="(item, index) in tabs" :key="index"
						:class="['video-tab-item', tabIndex === index ? 'video-tab-item-active' : '']"
						@click="switchTab(index)">
						<image :src="icons[index]" :class="['video-tab-icon', isRotated[index] ? 'rotated' : '']" />
						<text>{{ item }}</text>
					</view>
					<view class="video-slider" :style="{ left: `${tabIndex * 50}%` }"></view>
				</view>
			</u-sticky>

			<!-- 中间控制按钮 -->
			<view class="opt_button_wrap">
				<view v-if="tabIndex == 0">
					<view class="remote-control">
						<!-- 圆环中方向控制按钮，圆环中心添加播放按钮 -->
						<view class="container-circle">
							<view class="circle">
								<view class="button top" @click='handlePtz("up")'>
									<u-icon name="arrow-up" color="#b9b9b9" size="22"></u-icon>
								</view>
								<view class="button right" @click='handlePtz("right")'>
									<u-icon name="arrow-right" color="#b9b9b9" size="22"></u-icon>
								</view>
								<view class="button bottom" @click='handlePtz("down")'>
									<u-icon name="arrow-down" color="#b9b9b9" size="22"></u-icon>
								</view>
								<view class="button left" @click='handlePtz("left")'>
									<u-icon name="arrow-left" color="#b9b9b9" size="22"></u-icon>
								</view>
								<!-- 圆环中心的播放按钮 -->
								<view class="button center" @click="operate">
									<u-icon name="play-right" color="#b9b9b9" size="30"></u-icon>
								</view>
							</view>
						</view>

						<!-- 下方的缩放按钮分布于左右两侧 -->
						<view class="bottom-controls">
							<view class="play_btn_wrap">
								<button class="btn_icon-size" @click="handlePtzScale(1)">
									<u-icon name="plus" size="24" color="#b9b9b9"></u-icon>
								</button>

							</view>
							<view class="play_btn_wrap">
								<button class="btn_icon-size" @click="handlePtzScale(2)">
									<u-icon name="minus" size="24" color="#b9b9b9"></u-icon>
								</button>

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="playback_wrap" v-if="tabIndex == 1">
			<view class="button-trap">
				<!-- 左侧部分 -->
				<view class="date_wrap" @click="showcalendar = true">
					<uni-icons class="calendar-icon" type="calendar-filled" size="30"></uni-icons>
					<u--input readonly :value="playbackDate || '今天'"
						customStyle="background:rgba(255, 255, 255,0.1); border:none; padding:6rpx 0; margin-left: 16rpx; width:auto;">
					</u--input>
				</view>
				<!-- 右侧部分 -->
				<view class="date_wrap">
					<uni-icons class="calendar-icon" type="download-filled" size="30"
						@click="downloadRecord"></uni-icons>
				</view>
			</view>
			<video-progress-bar :dateList="this.dateList"></video-progress-bar>
			<u-calendar :show="showcalendar" :minDate="minDate" :maxDate="maxDate" month-num="7"
				:defaultDate="defaultDate" @confirm="confirmCalendar" @close="closeCalendar"></u-calendar>
		</view>
		<!-- 底部 Tab 栏 -->
		<!-- 实时视频部分导航功能 -->
		<view class="tab-bar" v-show="tabIndex == 0">
			<view class="tab-item" @click="takeScreenshot" :class="{ active: activeTab === 'screenshot' }">
				<view class="tab-icon-wrapper small-icon">
					<image src="/static/home/video/screenshot.png" class="tab-icon" />
				</view>
				<text class="tab-text">{{$tt('player.screenshot')}}</text>
			</view>
			<view class="tab-item" @click="startRecording" :class="{ active: activeTab === 'record' }">
				<view class="tab-icon-wrapper small-icon">
					<image v-show="startrecord" mode="widthFix" src="/static/home/video/record.png" class="tab-icon" />
					<image v-show="!startrecord" mode="widthFix" src="/static/stoprecord.png" class="tab-icon" />
				</view>
				<text v-show="startrecord" class="tab-text">{{$tt('player.startRecord')}}</text>
				<text v-show="!startrecord" class="tab-text">{{$tt('player.stopRecord')}}</text>
			</view>

			<!-- 中间凸起的对讲按钮 -->
			<view class="tab-item tab-item-center" @touchstart="startIntercom" @touchend="endIntercom"
				:class="{ active: intercomActive }">
				<view class="tab-icon-wrapper tab-icon-center">
					<image v-show="intercom==='startIntercom'" src="/static/home/video/startintercom.png"
						mode="widthFix" class="tab-icon" />
					<image v-show="intercom==='loadIntercom'" src="/static/home/video/loading.png" mode="widthFix"
						class="tab-icon" />
					<image v-show="intercom==='Intercom'" src="/static/home/video/intercom.png" mode="widthFix"
						class="tab-icon" />
				</view>
			</view>

			<view class="tab-item" @click="controlclarity()" :class="{ active: activeTab === 'clarity' }">
				<view class="tab-icon-wrapper small-icon">
					<image v-if="clarity==='流畅'" src="/static/home/video/lc.png" mode="widthFix" class="tab-icon" />
					<image v-if="clarity==='标清'" src="/static/home/video/bq.png" mode="widthFix" class="tab-icon" />
					<image v-if="clarity==='高清'" src="/static/home/video/gq.png" mode="widthFix" class="tab-icon" />
				</view>
				<text class="tab-text">{{$tt('player.definition')}}</text>
			</view>

			<view class="tab-item" @click="more" :class="{ active: activeTab === 'more' }">
				<view class="tab-icon-wrapper small-icon">
					<image src="/static/home/video/playlist.png" class="tab-icon" />
				</view>
				<text class="tab-text">{{$tt('player.more')}}</text>
			</view>
		</view>
		<u-action-sheet @select="selectClick" round="3%" :closeOnClickOverlay='false' :actions="claritylist"
			cancelText="取消" @close="clarityshow = false" :show="clarityshow"></u-action-sheet>
		<!-- 录像部分 -->
		<view class="tab-bar" v-if="tabIndex == 1">
			<view class="tab-item" @click="screenShot" :class="{ active: activeTab === 'screenshot' }">
				<view class="tab-icon-wrapper small-icon">
					<image src="/static/home/video/screenshot.png" class="tab-icon" />
				</view>
				<text class="tab-text">{{$tt('player.screenshot')}}</text>
			</view>
			<view class="tab-item" @click="operate" :class="{ active: activeTab === 'operate' }">
				<view class="tab-icon-wrapper small-icon">
					<image src="/static/home/video/play.png" class="tab-icon" />
				</view>
				<text class="tab-text">{{$tt('player.play')}}</text>
			</view>
			<view class="tab-item" @click="startRecording" :class="{ active: activeTab === 'record' }">
				<view class="tab-icon-wrapper small-icon">
					<image src="/static/home/video/record.png" class="tab-icon" />
				</view>
				<text class="tab-text">{{$tt('player.Recording')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import projectConfig from '@/env.config.js';
	import VideoProgressBar from './VideoProgressBar.vue';
  import {
    ptzdirection,
    ptzscale
  } from '@/apis/modules/sip';
	import {
    startPlay,
    playback,
    closeStream,
    playbackSeek,
    playbackSpeed,
    getDevRecord,
    getPushUrl,
    startBroadcast,
    stopBroadcast,
    startDownloadRecord
	} from '@/apis/modules/player';

	export default {
		name: 'devicePlayerWebView',
		components: {
			VideoProgressBar
		},
		data() {
			return {
				webviewStyles: {
					width: '100%',
					height: '220px',
				},
				//录制状态
				startrecord: true,
				//对讲状态
				intercom: 'startIntercom',
				//清晰度展示
				clarityshow: false,
				clarity: '标清',
				claritylist: [{
						name: '高清',
						value: 0
					}, {
						name: '标清',
						value: 1
					},
					{
						name: '流畅',
						value: 2
					}
				],
				dateList: [], //录像时间段列表
				tabs: ['实时视频', '录像回放'],
				icons: [
					'../../static/home/video/play.png', // 自定义的图标1
					'../../static/home/video/record.png' // 自定义的图标2
				],
				tabIndex: 0,
				isRotated: [false, false], // 初始化旋转状态
				intercomActive: false, // 对讲功能激活状态
				activeTab: null, // 当前激活的Tab项
				// 设备升级模态窗
				show: false,
				showcalendar: false,
				// 加载图标
				loading: false,
				// 控制模块标题
				title: ' 设备通道 ',
				scrollTop: 0,
				queryParams: {
					deviceSipId: '', //设备sipid
				},
				// 通道集合
				channelList: [],
				selectChannel: null,
				// 设备信息
				deviceId: '',
				channelId: '',
				streamId: '',
				webviewSrc: '',
				playurl: '',
				playing: false,
				queryDate: '',
				videoVod: false,
				vodData: {},
				minDate: "",
				maxDate: "",
				defaultDate: "",
				hisData: [],
				playbackDate: '',
				currentWebview: null
			}
		},
		onReady() {
			this.decoderUrl = projectConfig.WEBVIEW_URL + 'js/';
			// #ifdef APP-HARMONY
			//！！！ webview标签必须设置id并且是webviewId,this必传
			this.currentWebview = uni.createWebviewContext('webviewId', this)
			// #endif

			// #ifndef APP-HARMONY
			// #ifdef APP || MP-WEIXIN
			let wv = this.$scope.$getAppWebview()
			setTimeout(() => {
				this.currentWebview = wv.children()[0]
			}, 1000);
			// #endif
			// #endif
			if (this.name) {
				uni.setNavigationBarTitle({
					title: this.name
				})
			}
		},
		onLoad(option) {
			if (option.deviceId) {
				console.log(option, '携带参数')
				this.deviceId = option.deviceId
				this.channelId = option.channelSipId
			}
			this.webviewSrc = projectConfig.WEBVIEW_URL + "js/video.html"
		},
		onNavigationBarButtonTap(event) {
			console.log(event, 'event')
			console.log(event.type, 'event.type')
		},
		onBackPress(event) {
			console.log(event, 'event');
			this.currentWebview.clear();
			return false;
		},
		methods: {
			// 底部导航栏功能
			takeScreenshot() {
				this.activeTab = 'screenshot';
				if (this.playing) {
					console.log('截图');
					this.evalJS(`screenshot()`);
				}
				setTimeout(() => {
					this.activeTab = null;
				}, 300); // 稍微延长动画时间
			},
			startRecording() {
				if (this.startrecord) {
					console.log('录制开始');
					this.evalJS(`startRecord()`);
				} else {
					console.log('录制结束');
					this.evalJS(`stopRecordAndSave()`);
				}
				this.startrecord = !this.startrecord;
				this.activeTab = 'record';

				setTimeout(() => {
					this.activeTab = null;
				}, 300);
			},

			// 用户长按开始对讲
			startIntercom() {
				this.intercomActive = true;
				this.intercom = 'loadIntercom'
				setTimeout(() => {
					this.intercom = "Intercom";
				}, 300);
				console.log('对讲开始');
				// 这里可以添加对讲逻辑的代码，如开始录音
			},
			// 用户松开结束对讲
			endIntercom() {
				this.intercom = 'startIntercom'
				this.intercomActive = false;
				console.log('对讲结束');
				// 这里可以添加对讲结束的逻辑，如停止录音
			},

			controlclarity() {
				this.clarityshow = true
				this.activeTab = 'clarity';
				console.log('清晰度控制');
				setTimeout(() => {
					this.activeTab = null;
				}, 300);
			},
			//清晰度选择
			selectClick(index) {
				console.log(index)
				if (index.value == '0') {
					this.clarity = '高清'
				}
				if (index.value == '1') {
					this.clarity = '标清'
				}
				if (index.value == '2') {
					this.clarity = '流畅'
				}
			},
			more() {
				this.activeTab = 'more';
				uni.showToast({
					title: "更多功能尽情期待！",
					icon: 'none'
				})
				setTimeout(() => {
					this.activeTab = null;
				}, 300);
			},

			confirmCalendar(n) {
				this.playbackDate = n[0];
				this.showcalendar = false;
				this.queryDate = n;
				this.loadDevRecord();
			},
			closeCalendar(n) {
				this.showcalendar = false;
			},
			closeWebview() {
				this.webviewSrc = ''; // 清空当前页面
				this.$nextTick(() => {
					this.webviewSrc = projectConfig.WEBVIEW_URL + 'js/video.html';
				});
				this.currentWebview.clear();
			},
			cleanPlayer(stop) {
				if (stop) {
					this.stopPlay()
				}
				this.closeWebview();
				this.playing = false
			},
			// 单击选显卡
			switchTab(index) {
				this.tabIndex = index;
				this.$set(this.isRotated, index, !this.isRotated[index]);
				if (this.playing) {
					this.cleanPlayer(true);
				}
				switch (this.tabIndex) {
					case 0:
						this.videoVod = false;
						this.sendDevicePush();
						break;
					case 1:
						this.videoVod = true;
						this.initCalendar();
						break;
				}
			},
			initCalendar() {
				this.defaultDate = new Date();
				let minstamp = new Date().getTime() - 1000 * 3600 * 24 * 28 * 6;
				let maxstamp = new Date().getTime();
				var mindate = new Date(minstamp);
				let minmonth = mindate.getMonth() + 1;
				let minday = mindate.getDate();
				if (minmonth <= 9) {
					minmonth = '0' + minmonth;
				}
				if (minday <= 9) {
					minday = '0' + minday;
				}
				var maxdate = new Date(maxstamp);
				let maxmonth = maxdate.getMonth() + 1;
				let maxday = maxdate.getDate();
				if (maxmonth <= 9) {
					maxmonth = '0' + maxmonth;
				}
				if (maxday <= 9) {
					maxday = '0' + maxday;
				}
				this.minDate = mindate.getFullYear() + '-' + minmonth + '-' + minday;
				this.maxDate = maxdate.getFullYear() + '-' + maxmonth + '-' + maxday;
			},
			//直播控制
			sendDevicePush: function() {
				console.log("通知设备推流1：" + this.deviceId + " : " + this.channelId);
				if (this.channelId) {
					startPlay(this.deviceId, this.channelId).then((response) => {
						console.log("开始播放：" + this.deviceId + " : " + this.channelId);
						let res = response.data;
						this.streamId = res.streamId;
						this.playurl = res.playurl;
						//如果是页面初始化调用时，需要延时一下
						console.log("sendDevicePush");
						this.webviewSrc = ''; // 清空当前页面
						this.currentWebview.clear();
						var timestamp = new Date().getTime();
						this.$nextTick(() => {
							// 执行安卓平台的代码
							console.log("playurl：" + res.playurl);
							this.webviewSrc = projectConfig.WEBVIEW_URL + 'js/video.html?data=' +
								encodeURIComponent(JSON.stringify({
									"type": "play",
									"playUrl": res.playurl,
									"time": timestamp
								}));
						});
						this.playing = true;
					});
				}
			},
			/**下载录像*/
			downloadRecord: function() {
				this.startTime = '00:00:00';
				this.startTime = '23:59:59';
				const start = new Date(this.startTime).getTime() / 1000;
				const end = new Date(this.endTime).getTime() / 1000;
				const query = {
					startTime: start,
					endTime: end,
					speed: '4',
				};
				if (this.dateList.length > 0) {
					startDownloadRecord(this.deviceId, this.channelId, query).then((res) => {
						console.log('开始转存到流服务器：' + this.deviceId + ' : ' + this.channelId);
						if (res.code === 200) {
							uni.showToast({
								icon: 'success',
								title: '转存到流服务器,请前往网页端视频中心->录像管理查看！',
							});
						}
					});
				} else {
					uni.showToast({
						title: "暂时没有录像！",
						icon: 'none'
					})
				}
			},
			operate() {
				//这是增加动画效果的
				this.activeTab = 'operate';
				console.log('播放暂停');
				setTimeout(() => {
					this.activeTab = null;
				}, 300);
				if (!this.videoVod) {
					if (this.playing == true) {
						this.evalJS(`pause();`);
						this.playing = false;
					} else {
						this.sendDevicePush();
					}
				} else {
					if (this.streamId && this.playing) {
						this.playing = false
					} else {
						this.playing = true
					}
				}
			},
			stopPlay() {
				if (this.streamId && this.playing) {
					closeStream(this.deviceId, this.channelId, this.streamId).then(res => {
						this.playing = false
						this.streamId = '';
						this.playurl = '';
					})
				}
			},
			handlePtz(arrow) {
				let leftRight = 0;
				let upDown = 0;
				if (arrow === 'left') {
					leftRight = 2;
				} else if (arrow === 'right') {
					leftRight = 1;
				} else if (arrow === 'up') {
					upDown = 1;
				} else if (arrow === 'down') {
					upDown = 2;
				}
				var data = {
					leftRight: leftRight,
					upDown: upDown,
					moveSpeed: 125
				};
				ptzdirection(this.deviceId, this.channelId, data).then(async response => {
					console.log("云台方向控制：" + JSON.stringify(response));
				});
			},
			handlePtzScale(inOut) {
				console.log('云台缩放：' + inOut);
				var data = {
					inOut: inOut,
					scaleSpeed: 30
				}
				ptzscale(this.deviceId, this.channelId, data);
				// 放大/缩小后自动关闭
				setTimeout(() => {
					ptzscale(this.deviceId, this.channelId, {
						inOut: 0,
						scaleSpeed: 30
					})
				}, 800);
			},
			//录像控制
			loadDevRecord() {
				if (this.deviceId && this.channelId) {
					const date = this.queryDate ? new Date(new Date(this.queryDate).toLocaleDateString()).getTime() :
						new Date(new Date().toLocaleDateString()).getTime()
					const start = date / 1000
					const end = Math.floor((date + 24 * 60 * 60 * 1000 - 1) / 1000)
					const query = {
						start: start,
						end: end,
					}
					getDevRecord(this.deviceId, this.channelId, query).then(async (response) => {
						if (response.data != null && response.data.recordItems != null) {
							this.hisData = response.data.recordItems;
							this.dateList = this.hisData;
							const len = this.hisData.length
							if (len > 0) {
								if (this.hisData[0].start < start) {
									this.vodData = {
										start: start,
										end: end,
										base: start
									}
									this.hisData[0].start = start
								} else {
									this.vodData = {
										start: this.hisData[0].start,
										end: end,
										base: start
									}
								}
								this.playback(this.hisData)
							} else {
								this.dateList = [];
								this.$u.toast('当前通道没有录像');
							}
						} else {
							this.$u.toast('当前通道没有录像');
						}
					})
				}
			},
			triggerPlay(playTimes) {
				if (this.playing && this.videoVod) {
					this.webviewSrc = ''; // 清空当前页面
					this.currentWebview.clear();
					this.$nextTick(() => {
						this.webviewSrc = projectConfig.WEBVIEW_URL + 'js/video.html?data=' +
							encodeURIComponent(JSON.stringify({
								"type": "playback",
								"playUrl": this.playurl,
								"playTimes": playTimes
							}));
					});
				}
			},
			screenShot() {
				this.activeTab = 'screenshot';
				if (this.playing) {
					console.log('截图');
					this.evalJS(`screenshot()`);
				}
				setTimeout(() => {
					this.activeTab = null;
				}, 300); // 稍微延长动画时间

			},
			onMessage(e) {
				console.log(`【UNILOG】-【onGetH5Message】`);
        var data = e.detail.data;
        console.log('【UNILOG】', data);
        data.forEach(item => {
          console.log('action:', item.action);
          if (item.action === "seekPlay") {
            console.log("进度条拖拽");
            console.log(item.msg);
            this.seekPlay(item.msg);
          }
        });
			},
			evalJS(cmd) {
				console.log('evalJS');
				const currentWebview = this.$scope.$getAppWebview();
				const wv = currentWebview.children()[0];
				wv.evalJS(cmd);
			},
			seekPlay(s) {
				const curTime = this.vodData.base + s.hour * 3600 + s.min * 60 + s.second
				const seekRange = curTime - this.vodData.start
				if (this.streamId && this.playing) {
					const query = {
						seek: seekRange,
					}
					playbackSeek(this.deviceId, this.channelId, this.streamId, query).then(res => {
						this.evalJS("setPlaybackStartTime(" + curTime + ");");
					})
				}
			},
			playback(playTimes) {
				if (this.deviceId && this.channelId) {
					if (this.streamId) {
						closeStream(this.deviceId, this.channelId, this.streamId).then(res => {
							const query = {
								start: this.vodData.start,
								end: this.vodData.end,
							}
							playback(this.deviceId, this.channelId, query).then(res => {
								this.playing = true
								this.streamId = res.data.streamId
								this.playurl = res.data.playurl
							}).finally(() => {
								this.triggerPlay(playTimes)
							})
						})
					} else {
						const query = {
							start: this.vodData.start,
							end: this.vodData.end,
						}
						playback(this.deviceId, this.channelId, query).then(res => {
							this.playing = true
							this.streamId = res.data.streamId
							this.playurl = res.data.playurl
						}).finally(() => {
							this.triggerPlay(playTimes)
						})
					}
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		background: radial-gradient(circle, #e9faff, #f5f5f5); // 整体背景颜色变得更亮
		position: relative;
		height: calc(100vh - 150rpx);
	}

	.player-wrapper {
		display: flex;
		place-content: center;
		font-size: 12px;
		width: 100%;
		height: 220px;
	}

	// 中部切换录像与直播tab标签
	.video-tab-bar {
		display: flex;
		position: relative;
		justify-content: space-around;
		background: rgba(244, 246, 246, 1);
		padding: 10rpx 0;
		border-bottom: #767676 solid 1rpx;
		//box-shadow: 0 0 25rpx rgba(0, 0, 0, 0.25);
	}

	.video-tab-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		font-size: 30rpx;
		font-weight: 500;
		transition: all 0.3s ease;

		&:hover {
			transform: scale(1.1); // 鼠标悬浮时放大
		}

		&.video-tab-item-active {
			color: #3378FE; // 激活状态使用更深的蓝色
			text-shadow: 0 3rpx 5rpx rgba(2, 119, 189, 0.6);
		}

		.video-tab-icon {
			margin-right: 12rpx;
			width: 40rpx;
			height: 40rpx;
			transition: transform 0.4s ease;
		}

		.video-tab-icon.rotated {
			transform: rotate(360deg); // 激活时旋转
		}
	}

	.video-slider {
		position: absolute;
		bottom: 0;
		margin-left: 12.5%;
		width: 25%;
		height: 7rpx;
		background: linear-gradient(90deg, #3378FE, #486ff2); // 渐变浅蓝到深蓝色
		border-radius: 4rpx;
		box-shadow: 0 3rpx 8rpx rgba(2, 136, 209, 0.5);
		transition: left 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); // 添加弹跳效果
	}


	.remote-control {
		padding-top: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.play_btn_wrap {
		margin: 10rpx;

		button {
			width: 120rpx;
			height: 80rpx;
			background: linear-gradient(145deg, #ffffff, #d8e8f6);
			border-radius: 40rpx;
			box-shadow: 6rpx 6rpx 12rpx rgba(0, 0, 0, 0.3), -6rpx -6rpx 12rpx rgba(255, 255, 255, 0.9); // 更柔和的阴影效果
			display: flex;
			align-items: center;
			justify-content: center;

			&:active {
				box-shadow: inset 6rpx 6rpx 12rpx rgba(0, 0, 0, 0.1), inset -6rpx -6rpx 12rpx rgba(255, 255, 255, 0.7); // 按下效果更深一些
			}
		}
	}

	.container-circle {

		margin: 50rpx;
		position: relative;
		width: 375rpx;
		height: 375rpx;

		.circle {
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: radial-gradient(circle, #d8e8f6, #fff);
			box-shadow: 6rpx 6rpx 12rpx rgba(0, 0, 0, 0.3), -6rpx -6rpx 12rpx rgba(255, 255, 255, 0.9); // 外圈阴影调整

			&:before {
				content: '';
				position: absolute;
				width: 175rpx;
				height: 175rpx;
				//background: radial-gradient(circle, #d0e6f6, #d0e6f6); // 中间渐变效果
				border-radius: 50%;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				box-shadow: inset 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.1), inset -4rpx -4rpx 8rpx rgba(255, 255, 255, 0.7); // 内圈拟态效果
			}

			.button {
				width: 110rpx;
				height: 110rpx;
				background-color: rgba(221, 239, 251, 0.1); // 更亮的白色背景
				border-radius: 50%;
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: box-shadow 0.3s;

				&:active {
					box-shadow: inset 5rpx 5rpx 15rpx rgba(0, 0, 0, 0.1), inset -5rpx -5rpx 15rpx rgba(255, 255, 255, 0.7);
				}
			}

			.top {
				top: 0;
				left: 50%;
				transform: translate(-50%, 0%);
			}

			.right {
				top: 50%;
				right: 0;
				transform: translate(0%, -50%);
			}

			.bottom {
				bottom: 0;
				left: 50%;
				transform: translate(-50%, 0%);
			}

			.left {
				top: 50%;
				left: 0;
				transform: translate(0%, -50%);
			}

			/* 播放按钮居中 */
			.center {
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 120rpx;
				height: 120rpx;
				background: linear-gradient(145deg, #ffffff, #d8e8f6); // 中心按钮渐变背景
				box-shadow: 6rpx 6rpx 12rpx rgba(0, 0, 0, 0.3), -6rpx -6rpx 12rpx rgba(255, 255, 255, 0.9); // 中心按钮拟态效果
			}
		}
	}

	.bottom-controls {
		display: flex;
		justify-content: space-around;
		width: 80%;
		margin-top: 30rpx;
	}




	.live_str_item {
		display: flex;
		flex-direction: row;
		margin-top: 60px;
	}

	.playback_wrap {
		padding: 0 20px;

		.button-trap {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			/* 将内容分布在左右两侧 */
			align-items: center;
			/* 垂直居中对齐 */
			width: 100%;
			/* 容器宽度为 100% */
			padding: 20rpx 0;

			/* 外边距，适配不同屏幕 */
			.date_wrap {
				display: flex;
				align-items: center;
				background-color: rgba(248, 248, 248, 0.8);
				padding: 12rpx 20rpx;
				border-radius: 20rpx;
				cursor: pointer;

				.calendar-icon {
					margin-right: 12rpx;
					/* 图标与输入框的间距 */
					color: #606266;
				}

				u--input {
					flex: 1;
					font-size: 28rpx;
					/* 输入框字体大小 */
					color: #000;
				}
			}
		}

		.button_wrap {
			display: flex;
			flex-direction: row;
			margin-top: 56px;
		}
	}

	/* Tab栏整体 */
	.tab-bar {

		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 130rpx;
		background: radial-gradient(circle, #d0e6f6, #f0faff);
		/* 浅蓝色渐变背景 */
		box-shadow: 0 0 25rpx rgba(0, 0, 0, 0.25);
		/* 强化阴影 */
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		padding-bottom: 10rpx;
		transition: background 0.5s ease;
		z-index: 999;
	}

	/* 单个Tab项 */
	.tab-item {
		flex: 1;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: all 0.4s ease;
	}

	/* 中间凸起的对讲按钮 */
	.tab-item-center {
		position: relative;
		width: 130rpx;
		height: 120rpx;
		margin-bottom: 35rpx;

		background-color: #d8ebf8;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

		transition: all 0.4s ease;
		z-index: 1;


		/* 中间对讲按钮图标 */
		.tab-icon-center {
			width: 80rpx;
			height: 80rpx;
			background: radial-gradient(circle, #42a7ff, #3cabff, #9ed8f6, #cbf0ff);


			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);

			.tab-icon {
				width: 55rpx;
				height: 55rpx;
			}
		}
	}



	/* Tab激活时的状态 */
	.tab-item.active .small-icon {
		transform: translateY(0rpx) scale(1.1);
		/* 激活时上浮并放大 */
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
		/* 动态阴影 */
	}

	/* 图标的容器 */
	.tab-icon-wrapper {
		width: 60rpx;
		height: 60rpx;
		background-color: #f0faff;
		/* 与背景保持一致的浅蓝色 */
		border-radius: 50%;
		padding: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.4s ease;
	}

	/* 图标 */
	.tab-icon {
		width: 40rpx;
		height: 40rpx;
	}

	/* 文字 */
	.tab-text {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #555;
		transition: color 0.4s ease;
	}

	/* 点击时的效果 */
	.tab-item:active .tab-icon-wrapper {
		//transform: scale(1.1) rotate(0deg); /* 增强的放大和旋转效果 */
		background-color: #a3d7ff;
		/* 浅蓝色点击效果背景 */
	}

	.tab-item:active .tab-text {
		color: #1e90ff;
		/* 点击时文字变为蓝色 */
	}

	.tab-item-center:active .tab-icon-center {

		box-shadow: 0 15rpx 25rpx rgba(0, 0, 0, 0.3);
	}

	/* 定义放大缩小的动画 */
	@keyframes scaleAnimation {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	/* 点击时触发动画效果，动画无限循环 */
	.tab-item-center:active .tab-icon-center {
		animation: scaleAnimation 3s ease-in-out infinite;
		/* 无限循环 */
		box-shadow: 0 15rpx 25rpx rgba(0, 0, 0, 0.3);
	}

	.tab-item-center:active {
		height: 130rpx;
	}
</style>