<template>
	<view class="w-100">
		<view class="bg-f1 h-100vh">
			<view class="film-header">
				<view class="film-title">
					<view class="title">
						{{filmData.movieName}}
					</view>
					<view class="type">
						{{filmData.versionType}}
					</view>
				</view>
				<view class="film-time">
					{{filmList.showTime}}
				</view>
			</view>
			<!-- 荧幕 -->
			<view class="pt-f left-0 w-100 screen-bg">
				<image src="https://img.agrimedia.cn/chwl%2Fv2%2F20220921-113344.png"></image>
			</view>
			<!-- 循环的座位 -->
			<movable-area :style="'height:'+(seatRow * 40 + 550)+'rpx;width: 100vw;top:'+(rpxNum * 280)+'px'"
				class="pt-f left-0 seat-wrap">
				<movable-view :style="'width: 100vw;height:'+(seatRow*40+350)+'rpx;'" :inertia="true" :scale="true"
					:scale-min="0.95" :scale-max="2" direction="all" @change="onMove" @scale="onScale">
					<view v-for="(item,index) in seatArray" :key="index" class="dp-f mt-20"
						:style="'width:'+boxWidth+'px;height:'+seatSize+'px'">
						<view v-for="(seat,col) in item" :key="col" class="dp-ib"
							:style="'width:'+seatSize+'px;height:'+seatSize+'px'" @click="handleChooseSeat(index,col)">
							<!-- 0为可选空座(白)  1为当前选择(红) 2为不可售或者禁用(灰)-->
							<image v-if="seat.type===0" class="w-100 h-100"
								src="https://img.agrimedia.cn/chwl%2Fv2%2Fseat-0.png" mode="aspectFit"></image>
							<image v-else-if="seat.type===1" class="w-100 h-100"
								src="https://img.agrimedia.cn/chwl%2Fv2%2Fseat-2.png" mode="aspectFit"></image>
							<image v-else-if="seat.type===2" class="w-100 h-100"
								src="https://img.agrimedia.cn/chwl%2Fv2%2Fseat-1.png" mode="aspectFit"></image>
						</view>
					</view>
					<!-- 座位列表左轴 -->
					<view class="pt-f bg-line br-15 over-h"
						:style="'left: '+(10-moveX/scale)+'px;top:0rpx;width:30rpx;'">
						<view class="w-100 dp-f ai-c jc-c fz-22 color-fff" :style="'height:'+seatSize+'px'"
							v-for="(m,mindex) in mArr" :key="mindex">{{m}}</view>
						<view :style="'height: 20rpx;'"></view>
					</view>
					<!-- 座位列表右轴 -->
					<view class="pt-f bg-line br-15 over-h"
						:style="'right: '+(10-moveX/scale)+'px;top:0rpx;width:30rpx;'">
						<view class="w-100 dp-f ai-c jc-c fz-22 color-fff" :style="'height:'+seatSize+'px'"
							v-for="(m,mindex) in mArr" :key="mindex">{{m}}</view>
						<view :style="'height: 20rpx;'"></view>
					</view>
				</movable-view>
			</movable-area>
			<!-- 底部工具栏 -->
			<view class="pt-f bottom-bar left-0 dp-f fd-cr mrg-0 z1000">
				<!-- 按钮 -->
				<view class="btn-wrap">
					<view class="btn-seat" @click="buySeat">
						{{SelectNum > 0 ? ('￥' + aPrice + '确认座位'):'请选座位'}}
					</view>
				</view>
				<!-- 自动调座 -->
				<view class="auto-seat">
					<view class="auto-left">
						<view class="auto-title">自动调座</view>
						<view class="auto-desc">所选座位已售时，系统自动调至最佳观影座位</view>
					</view>
					<u-switch v-model="autoSeatFlag" activeColor="#FC554F" @change="autoSeat"></u-switch>
				</view>
				<!-- 已选 -->
				<view class="seat-selected" v-if="SelectNum > 0">
					<u-scroll-list :indicator="false">
						<view class="seat-selected-item" v-for="(optItem,optindex) in optArr" :key="optindex">
							{{optItem.seatNo}}
							<text @click="deleteSeat(optItem)">×</text>
						</view>
					</u-scroll-list>
				</view>
			</view>

			<!-- 自动购票提示框 -->
			<view class="tipModel">
				<u-modal :show="showFlag" title="  " borderRadius="20">
					<template v-slot:default>
						<view class="RX-slot-content">
							<view class="text">
								为节省您的购票时间，若您所选座位被占时系统自动将座位调至剩余座位中最佳观影区
							</view>
						</view>
					</template>
					<template v-slot:confirmButton>
						<view class="confirmButton">
							<view class="btn replace" @tap="showFlag = false">不同意(无座自动退款)</view>
							<view class="btn confirm" @tap="agreen">同意</view>
						</view>
					</template>
				</u-modal>
			</view>

			<!-- 场次取消提示框 -->
			<view class="tipModel">
				<u-modal :show="cancelFlag" title="  " borderRadius="20">
					<template v-slot:default>
						<view class="RX-slot-content">
							<view class="text">{{contentTips}}</view>
						</view>
					</template>
					<template v-slot:confirmButton>
						<view class="confirmButton">
							<view class="btn confirm btn-one" @tap="cancelFlag = false">确认</view>
						</view>
					</template>
				</u-modal>
			</view>

			<!-- 加载状态 -->
			<b-load :show="loading" width="79" height="80" background="rgba(0,0,0,0.3)" type="load"></b-load>
		</view>
	</view>
	</view>
</template>
<script>
	import {
		getFilmTimeSeat
	} from '@/request/film/index.js';
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				scaleMin: 1, //h5端为解决1无法缩小问题，设为0.95
				boxWidth: 450, //屏幕宽度px
				space: ' ', //空格
				seatArray: [], //影院座位的二维数组,-1为非座位，0为未购座位，1为已选座位(绿色),2为已购座位(红色),一维行，二维列
				seatRow: 0, //影院座位行数
				seatCol: 0, //影院座位列数
				seatSize: 0, //座位尺寸
				SelectNum: 0, //选择座位数
				moveX: 0, //水平移动偏移量
				scale: 1, //放大倍数
				minRow: 0, //从第几行开始排座位
				minCol: 0, //从第几列开始排座位
				showTis: true, //显示选座提示
				seatList: [], //接口获取的原始位置
				mArr: [], //排数提示
				optArr: [], //选中的座位数组。
				isWXAPP: false,
				loading: true,

				// 后增
				showFlag: false, // 自动选座提示框
				cancelFlag: false, // 提示框
				optArr: [], //选中的座位数组。
				autoSeatFlag: false, // 自动调座
				filmData: {}, // 电影详情
				seatData: [], // 座位数据
				contentTips: "", // 提示内容
				cinemaId: "", // 场次ID

				// 订单
				showInfor: [] //选票数据
			};
		},
		watch: {
			// 选择的座位数量
			SelectNum: {
				deep: true,
				immediate: true,
				handler(val) {
					this.showInfor = [];
					for (let i = 0; i < this.optArr.length; i++) {
						let obj = {}
						obj.seatId = this.optArr[i].seatId;
						obj.seatName = this.optArr[i].seatNo;
						this.showInfor.push(obj)
					}
				}
			},
			optArr: {
				deep: true,
				immediate: true,
				handler(val) {

				}
			}
		},
		computed: {
			// 总价格
			aPrice() {
				return Math.round((parseFloat(this.SelectNum) * parseFloat(this.filmList.pay_price)) * 100) / 100
			},
			rpxNum() {
				return this.boxWidth / 750;
			},
			pxNum() {
				return 750 / this.boxWidth;
			},
		},
		onLoad(option) {
			//获取宽度
			uni.getSystemInfo({
				success: function(e) {
					this.boxWidth = e.screenWidth
					//#ifdef H5
					this.scaleMin = 0.95
					//#endif
				}
			})


			// this.filmData = JSON.parse(decodeURIComponent(option.filmData)); // 电影详情
			// this.filmList = JSON.parse(decodeURIComponent(option.filmList)); // 场次详情
			// this.cinemaData = JSON.parse(decodeURIComponent(option.cinemaData)); // 影院详情

			// this.contentTips = '该场次已取消'
			// this.cancelFlag = true;
			this.getData()
		},
		methods: {
			...mapMutations("film", {
				SetFileData: 'SetFileData'
			}),

			// 初始化请求数据
			getData() {
			
				const params = {
					showId: this.filmList.showId,
					addFlag: 0,
				}
				getFilmTimeSeat(params).then((res) => {
					this.seatData = res['data']['seats'];
					this.seatData.map(item => {
						// 字符串转坐标
						// item.YCoord = item.seatNo.substring(0, item.seatNo.indexOf("排"));
						// item.XCoord = item.seatNo.substring(item.YCoord.length + 1, item.seatNo.length - 1);
						item.YCoord = item.rowNo;
						item.XCoord = item.columnNo;
					});
					console.table(this.seatData)
					this.initData()
				});
			},

			initData() {
				let arr = this.seatData;
				//假数据说明：seatNo座位编号，rowNo-行号，columnNo-纵号，YCoord-Y坐标，XCoord-X坐标，Status-状态
				let row = 0
				let col = 0
				let minCol = parseInt(arr[0].XCoord)
				let minRow = parseInt(arr[0].YCoord)
				console.log()
				for (let i of arr) {
					console.group(`第${i['seatNo']}次循环`);
					console.log(`XCoord:${i.XCoord}`);
					console.log(`YCoord:${i.YCoord}`);
					console.log(i);
					console.groupEnd(`第${i['seatNo']}次循环`);
					minRow = parseInt(i.YCoord) < minRow ? parseInt(i.YCoord) : minRow;
					minCol = parseInt(i.XCoord) < minCol ? parseInt(i.XCoord) : minCol;
					row = parseInt(i.YCoord) > row ? parseInt(i.YCoord) : row;
					col = parseInt(i.XCoord) > col ? parseInt(i.XCoord) : col;
				};
				// console.log(row,minRow)
				this.seatList = arr;
				this.seatRow = row - minRow + 1;
				this.seatCol = col - minCol + 3;
				this.minRow = minRow;
				this.minCol = minCol - 1;
				this.initSeatArray()
			},
			//初始座位数组
			initSeatArray: function() {
				let seatArray = Array(this.seatRow).fill(0).map(() => Array(this.seatCol).fill({
					type: -1,
					seatNo: '',
					rowNo: '',
					columnNo: ''
				}));
				this.seatArray = seatArray
				this.seatSize = this.boxWidth > 0 ?
					parseInt(parseInt(this.boxWidth, 10) / (this.seatCol + 1), 10) :
					parseInt(parseInt(414, 10) / (this.seatCol + 1), 10)
				this.initNonSeatPlace();
			},

			//初始化是座位的地方
			initNonSeatPlace: function() {
				let seat = this.seatList.slice()
				let arr = this.seatArray.slice()
				for (let num in seat) {
					// 0为可选空座(白)  1为当前选择(红) 2为不可售或者禁用(灰)
					// N 可售  LK 不可售
					let type
					if (seat[num].status === 'N') {
						type = 0
					} else if (seat[num].status === 'LK') {
						type = 2
					} else {
						type = 2
					}

					// 映射对应的座位数据
					arr[parseInt(seat[num].YCoord) - this.minRow][parseInt(seat[num].XCoord) - this.minCol] = {
						type,
						XCoord: seat[num].XCoord,
						YCoord: seat[num].YCoord,
						areaId: seat[num].areaId,
						seatId: seat[num].seatId,
						seatNo: seat[num].seatNo,
						rowNo: seat[num].rowNo,
						columnNo: seat[num].columnNo,
						status: seat[num].status
					}
				}
				this.seatArray = arr.slice()
				let mArr = []
				for (let i = 0; i < arr.length; i++) {
					mArr.push(i + 1)
				}
				this.mArr = mArr
				this.loading = false; // 关闭加载
				this.showFlag = true; // 选座提示
			},
			// 自动选座（单人）
			autoSeat(e) {
				this.autoSeatFlag = e;
				if (this.autoSeatFlag) {
					this.smartChoose(1);
				} else {
					this.autoSeatFlag = e;
					this.resetSeat();
				}
			},
			//放大缩小事件
			onScale: function(e) {
				this.showTis = false
				// this.moveX=-e.detail.x
				let w = this.boxWidth * 0.5
				let s = 1 - e.detail.scale
				this.moveX = w * s
				this.scale = e.detail.scale
				if (s > 0 || s === 0) {
					this.showTis = true
				}
			},
			//移动事件
			onMove: function(e) {
				this.showTis = false
				this.moveX = e.detail.x
			},
			//重置座位
			resetSeat: function() {
				this.SelectNum = 0
				this.optArr = []
				//将所有已选座位的值变为0
				let oldArray = this.seatArray.slice();
				for (let i = 0; i < this.seatRow; i++) {
					for (let j = 0; j < this.seatCol; j++) {
						if (oldArray[i][j].type === 1) {
							oldArray[i][j].type = 0
						}
					}
				}
				this.seatArray = oldArray;
			},

			//选定且购买座位提交订单
			buySeat() {
				if (this.SelectNum === 0) {
					this.cancelFlag = true;
					this.contentTips = '请选择座位再购买';
					return
				}

				console.log(this.cinemaData, '影片数据')
				console.log(this.filmList, '放映厅列表')

				const params = {
					amount: this.SelectNum, // 购票数
					filmImg: this.filmData.posterUrl, // 海报图
					movieId: this.filmList.movieId, // 影片ID
					cinemaId: this.cinemaData.cinemaId, // 影院ID
					cinemaName: this.cinemaData.cinemaName, // 影院名称
					cinemaAddress: this.cinemaData.cinemaAddress, // 影院地址
					lng: this.cinemaData.longitude, // 纬
					lat: this.cinemaData.latitude, // 经
					movieName: this.filmData.movieName, // 影片名称
					showTime: this.filmList.showTime, // 上映时间
					autoSeatFlag: this.filmList.autoSeatFlag, // 自动选座

					pay_price: this.filmList.pay_price * this.SelectNum, // 价格
					price: this.filmList.showPrice * this.SelectNum, // 原价
					deduction_price: this.filmList.deduction_price * this.SelectNum, // 抵扣
					commission_total: this.filmList.commission_price * this.SelectNum, // 佣金

					showId: this.filmList.showId, // 影院ID
					showInfor: this.showInfor, // 票详情
					hallName: this.filmList.hallName, // 厅型

					versionType: this.filmData.versionType, // 电影型号
					movieType: this.filmData.movieType, // 电影类型
					stopSellTime: this.filmList.stopSellTime, // 出票时间

					addFlag: 0
				}

				console.log(params, '传过去的参数')

				this.SetFileData(params)

				uni.navigateTo({
					url: './filmSubmit'
				})
			},

			//处理座位选择逻辑
			handleChooseSeat: function(row, col) {
				if (this.optArr.length <= 3) {
					let seatValue = this.seatArray[row][col].type;
					let newArray = this.seatArray;
					//如果是已购座位，直接返回
					if (seatValue === 2 || seatValue === -1) return
					//如果是已选座位点击后变未选
					if (seatValue === 1) {
						newArray[row][col].type = 0
						this.SelectNum--
						this.getOptArr(newArray[row][col], 0)
					} else if (seatValue === 0) {
						newArray[row][col].type = 1
						this.SelectNum++
						this.getOptArr(newArray[row][col], 1)
					}
					//必须整体更新二维数组，Vue无法检测到数组某一项更新,必须slice复制一个数组才行
					this.seatArray = newArray.slice();
				} else {
					this.contentTips = "最多选择四个座位!"
					this.cancelFlag = true;
				}
			},

			//处理已选座位数组
			getOptArr: function(item, type) {
				let optArr = this.optArr
				if (type === 1) {
					optArr.push(item)
				} else if (type === 0) {
					let arr = []
					optArr.forEach(v => {
						if (v.seatNo !== item.seatNo) {
							arr.push(v)
						}
					})
					optArr = arr
				}

				this.optArr = optArr.slice()
			},

			//推荐选座,参数是推荐座位数目，
			smartChoose: function(num) {
				// 先重置
				this.resetSeat()
				//找到影院座位水平垂直中间位置的后一排
				let rowStart = parseInt((this.seatRow - 1) / 2, 10) + 1;
				//先从中间排往后排搜索
				let backResult = this.searchSeatByDirection(rowStart, this.seatRow - 1, num);
				if (backResult.length > 0) {
					this.chooseSeat(backResult);
					this.SelectNum += num
					return
				}
				//再从中间排往前排搜索
				let forwardResult = this.searchSeatByDirection(rowStart - 1, 0, num);
				if (forwardResult.length > 0) {
					this.chooseSeat(forwardResult);
					this.SelectNum += num
					return
				}
				//提示用户无合法位置可选
				alert('无合法位置可选!')

			},

			//搜索函数,参数:fromRow起始行，toRow终止行,num推荐座位数
			searchSeatByDirection: function(fromRow, toRow, num) {
				/*
				 * 推荐座位规则
				 * (1)初始状态从座位行数的一半处的后一排的中间开始向左右分别搜索，取离中间最近的，如果满足条件，
				 *    记录下该结果离座位中轴线的距离，后排搜索完成后取距离最小的那个结果座位最终结果，优先向后排进行搜索，
				 *    后排都没有才往前排搜，前排逻辑同上
				 *
				 * (2)只考虑并排且连续的座位，不能不在一排或者一排中间有分隔
				 *
				 * */

				/*
				 * 保存当前方向搜索结果的数组,元素是对象,result是结果数组，offset代表与中轴线的偏移距离
				 * {
				 *   result:Array([x,y])
				 *   offset:Number
				 * }
				 *
				 */
				let currentDirectionSearchResult = [];

				let largeRow = fromRow > toRow ? fromRow : toRow,
					smallRow = fromRow > toRow ? toRow : fromRow;

				for (let i = smallRow; i <= largeRow; i++) {
					//每一排的搜索,找出该排里中轴线最近的一组座位
					let tempRowResult = [],
						minDistanceToMidLine = Infinity;
					for (let j = 0; j <= this.seatCol - num; j++) {
						//如果有合法位置
						if (this.checkRowSeatContinusAndEmpty(i, j, j + num - 1)) {
							//计算该组位置距离中轴线的距离:该组位置的中间位置到中轴线的距离
							let resultMidPos = parseInt((j + num / 2), 10);
							let distance = Math.abs(parseInt(this.seatCol / 2) - resultMidPos);
							//如果距离较短则更新
							if (distance < minDistanceToMidLine) {
								minDistanceToMidLine = distance;
								//该行的最终结果
								tempRowResult = this.generateRowResult(i, j, j + num - 1)
							}
						}
					}
					//保存该行的最终结果
					currentDirectionSearchResult.push({
						result: tempRowResult,
						offset: minDistanceToMidLine
					})
				}

				//处理后排的搜索结果:找到距离中轴线最短的一个
				//注意这里的逻辑需要区分前后排，对于后排是从前往后，前排则是从后往前找
				let isBackDir = fromRow < toRow;
				let finalReuslt = [],
					minDistanceToMid = Infinity;
				if (isBackDir) {
					//后排情况,从前往后
					currentDirectionSearchResult.forEach((item) => {
						if (item.offset < minDistanceToMid) {
							finalReuslt = item.result;
							minDistanceToMid = item.offset;
						}
					});
				} else {
					//前排情况，从后往前找
					currentDirectionSearchResult.reverse().forEach((item) => {
						if (item.offset < minDistanceToMid) {
							finalReuslt = item.result;
							minDistanceToMid = item.offset;
						}
					})
				}

				//直接返回结果
				return finalReuslt
			},

			/*辅助函数，判断每一行座位从i列到j列是否全部空余且连续
			 *
			 */
			checkRowSeatContinusAndEmpty: function(rowNo, startPos, endPos) {
				let isValid = true;
				for (let i = startPos; i <= endPos; i++) {
					if (this.seatArray[rowNo][i].type !== 0) {
						isValid = false;
						break;
					}
				}
				return isValid
			},
			//辅助函数：返回每一行的某个合理位置的座位数组
			generateRowResult: function(row, startPos, endPos) {
				let result = [];
				for (let i = startPos; i <= endPos; i++) {
					result.push([row, i])
				}
				return result
			},
			//辅助函数:智能推荐的选座操作
			chooseSeat: function(result) {
				let opt = this.optArr
				let oldArray = this.seatArray.slice();
				for (let i = 0; i < result.length; i++) {
					//选定座位
					oldArray[result[i][0]][result[i][1]].type = 1
					this.optArr.push(oldArray[result[i][0]][result[i][1]])
				}
				this.seatArray = oldArray;
			},
			// 删除座位tag
			deleteSeat(optItem) {
				let index = this.optArr.findIndex(item => item.seatId == optItem.seatId)
				this.optArr.splice(index, 1)
				this.SelectNum--
				for (let i = 0; i < this.seatArray.length; i++) {
					for (let j = 0; j < this.seatArray[i].length; j++) {
						if (this.seatArray[i][j].seatId == optItem.seatId) {
							this.seatArray[i][j].type = 0;
						}
					}
				}
			},

			// 同意自动选票
			agreen() {
				this.showFlag = false;
				this.autoSeatFlag = true; // 调座开关打开
				this.smartChoose(1); // 自动选座
			}
		}
	}
</script>

<style lang="scss" scoped>
	.film-header {
		width: 100%;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;

		.film-title {
			display: flex;
			align-items: center;

			.title {
				font-size: 40rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 56rpx;
				padding-right: 10rpx;
				margin-right: 10rpx;
			}

			.type {
				display: block;
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 28rpx;
				border: 1rpx solid #999999;
				padding: 6rpx;
			}
		}

		.film-time {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 34rpx;
		}
	}

	.seat-selected {
		display: flex;
		justify-content: center;
		padding: 10rpx 24rpx;

		.seat-selected-item {
			height: 60rpx;
			border-radius: 30rpx;
			border: 2rpx solid #DEDEDE;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			color: #333333;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			margin-left: 32rpx;

			text {
				display: inline-block;
				font-size: 28rpx;
				color: #E55757;
				padding-left: 8rpx;
			}
		}

		.seat-selected-item:nth-child(1) {
			margin-left: 0rpx;
		}
	}

	.screen-bg {
		width: 100%;
		height: 480rpx;
		position: fixed;
		top: -10rpx;

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

	.auto-seat {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 700rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 0rpx auto;

		.auto-left {
			.auto-title {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}

			.auto-desc {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #EB2727;
			}
		}
	}

	.btn-wrap {
		width: 100%;
		display: flex;
		justify-content: center;

		.btn-seat {
			width: 700rpx;
			height: 84rpx;
			background: linear-gradient(132deg, #FC5159 0%, #FF7700 100%);
			border-radius: 40rpx;
			line-height: 84rpx;
			text-align: center;
			color: #FFFFFF;
			margin: 20rpx 0rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
		}
	}

	// 就餐方式弹框

	.tipModel {
		/deep/ .u-modal__button-group--confirm-button {
			padding: 0rpx !important;
		}

		/deep/ .u-modal__content {
			padding: 34rpx !important;
			border-bottom: 2rpx solid #EDEDED;
		}

		/deep/ .u-modal__title {
			display: none !important;
		}
	}

	.slot-content-Tips {
		font-size: 30rpx;
		line-height: 40rpx;

		.text1 {
			color: #DB9F5E;
		}
	}

	.slot-content-Tips2 {
		width: 100%;
		background-color: #FFF9F3;
		margin-top: 20rpx;
		color: #FF7910;
		font-size: 26rpx;
		line-height: 49rpx;
		padding: 15rpx 32rpx;
	}

	.confirmButton {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 86rpx;
		display: flex;
		align-items: center;

		.replace {
			width: 50%;
			height: 86rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 86rpx;
			border-right: 2rpx solid #EDEDED;

		}

		.confirm {
			width: 50%;
			height: 86rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 86rpx;
		}

		.btn-one {
			width: 100% !important;
		}
	}

	.RX-slot-content {
		.text {
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 40rpx;
		}

		/deep/ .u-modal__button-group--confirm-button {
			border: 2rpx solid #EDEDED;
		}
	}

	.mrg-0 {
		width: 100%;
	}

	.p-all-10 {
		padding: 10rpx;
	}

	.ml-10 {
		margin-left: 10rpx;
	}

	.m-0-10 {
		margin: 0 10rpx;
	}

	.bg-unbtn {
		background-color: #f9abb3;
	}

	.bg-red-1 {
		background-color: #F45664;
	}

	.br-10 {
		border-radius: 10rpx;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.mb-20 {
		margin-bottom: 20rpx;
	}

	.p-all-32 {
		padding: 32rpx;
	}

	.fd-cr {
		flex-direction: column-reverse;
		/* 主轴方向从下到上,默认从左到右 */
	}

	.bottom-bar {
		bottom: var(--window-bottom);
	}

	.color-fff {
		color: #000
	}

	.br-15 {
		border-radius: 15rpx;
	}

	.over-h {
		overflow: hidden;
	}

	.dp-ib {
		display: inline-block;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.pa-v-2 {
		/* 定位垂直对齐 */
		left: 50%;
		transform: translateX(-50%)
	}

	.b-d-1 {
		border: 1px dashed #e5e5e5;
	}

	.w-100 {
		width: 100%;
	}

	.h-100 {
		height: 100%;
	}

	.bg-f1 {
		background-color: #f1f1f1;
	}

	.h-100vh {
		height: 100vh;
	}

	.pt-f {
		position: fixed;
	}

	.seat-wrap {
		margin-top: 20rpx;
	}

	.left-0 {
		left: 0;
	}

	.p-0-32 {
		padding: 0 32rpx;
	}

	.pt-20 {
		padding-top: 20rpx;
	}

	.bg-white {
		background-color: #fff;
	}

	.z1000 {
		z-index: 1000;
	}

	.fz-34 {
		font-size: 34rpx;
	}

	.fw-b {
		font-weight: bold;
	}

	.mt-10 {
		margin-top: 10rpx;
	}

	.fz-28 {
		font-size: 28rpx;
	}

	.color-666 {
		color: #666666
	}

	.dp-f {
		display: flex;
		margin: 12rpx auto;
	}

	.jc-c {
		justify-content: center;
	}

	.ai-c {
		align-items: center;
	}

	.fz-22 {
		font-size: 22rpx;
	}

	.color-333 {
		color: #333333
	}

	.m-0-a {
		margin: 0 auto;
	}

	.mt-48 {
		margin-top: 48rpx;
	}

	.fz-20 {
		font-size: 20rpx;
	}

	.color-999 {
		color: #999999
	}

	.b-1 {
		border: 1px solid #CCCCCC;
	}

	.br-5 {
		border-radius: 5rpx;
	}

	.Stage {
		background-color: #dddddd;
		width: 380rpx;
		height: 34rpx;
		transform: perspective(34rpx) rotateX(-10deg);
		margin: 0 auto;
	}
</style>

