<template>
	<view class="container">
		<NavBar title="修改机票信息" bgColor="#F5F5F5" isRightButton @right-click="handleRightButtonClick"></NavBar>

		<scroll-view scroll-y class="form-content">
			<!-- 订单信息 -->
			<view class="section-container">
				<view class="section-header" @click="toggleSection('orderInfo')">
					<text class="section-title">订单信息</text>
					<uni-icons :type="collapsed.orderInfo ? 'bottom' : 'top'" size="16" color="#666"></uni-icons>
				</view>
				<view class="card" v-show="!collapsed.orderInfo">
					<view class="form-item">
						<text class="label">订单价格</text>
						<input class="input" v-model="ticketsInfo.orderInfo.price" />
					</view>
					<!-- 全局票号 -->
					<view class="form-item">
						<text class="label">联系电话</text>
						<input class="input" v-model="ticketsInfo.ticketNumber" placeholder="用于掩码显示" />
					</view>
					<view class="form-item">
						<text class="label">订单号</text>
						<input class="input" v-model="ticketsInfo.orderInfo.orderNo" />
					</view>
					<uni-datetime-picker type="datetime" v-model="ticketsInfo.orderInfo.orderTime" :border="false">
						<view class="form-item">
							<text class="label">下单时间</text>
							<view class="input">{{ ticketsInfo.orderInfo.orderTime }}</view>
						</view>
					</uni-datetime-picker>

				</view>
			</view>

			<!-- 航班信息 -->
			<view class="section-container">
				<view class="section-header" @click="toggleSection('flightInfo')">
					<text class="section-title">航班信息</text>
					<uni-icons :type="collapsed.flightInfo ? 'bottom' : 'top'" size="16" color="#666"></uni-icons>
				</view>
				<view class="card" v-show="!collapsed.flightInfo">
					<picker mode="selector" :range="airLineList" range-key="name" @change="onAirlineChange">
						<view class="form-item">
							<text class="label">航空公司</text>
							<view class="input">{{ ticketsInfo.flightInfo.airline }}</view>
						</view>
					</picker>
					<view class="form-item">
						<text class="label">航班号</text>
						<input class="input" v-model="ticketsInfo.flightInfo.flightNumber" />
					</view>
					<picker mode="date" fields="day" :value="ticketsInfo.flightInfo.date" @change="onFlightDateChange">
						<view class="form-item">
							<text class="label">日期</text>
							<view class="input">{{ ticketsInfo.flightInfo.date }}</view>
						</view>
					</picker>
					<picker mode="multiSelector" :range="timeRange"
						:value="getTimeIndex(ticketsInfo.flightInfo.startTime)" @change="onStartTimeChange">
						<view class="form-item">
							<text class="label">起飞时间</text>
							<view class="input">{{ ticketsInfo.flightInfo.startTime }}</view>
						</view>
					</picker>
					<picker mode="multiSelector" :range="timeRange"
						:value="getTimeIndex(ticketsInfo.flightInfo.endTime)" @change="onEndTimeChange">
						<view class="form-item">
							<text class="label">到达时间</text>
							<view class="input">{{ ticketsInfo.flightInfo.endTime }}</view>
						</view>
					</picker>
					<view class="form-item">
						<text class="label">出发城市</text>
						<input class="input" v-model="ticketsInfo.flightInfo.startCity" />
					</view>
					<view class="form-item">
						<text class="label">到达城市</text>
						<input class="input" v-model="ticketsInfo.flightInfo.endCity" />
					</view>
					<view class="form-item">
						<text class="label">出发机场</text>
						<input class="input" v-model="ticketsInfo.flightInfo.startAirport" />
					</view>
					<view class="form-item">
						<text class="label">到达机场</text>
						<input class="input" v-model="ticketsInfo.flightInfo.endAirport" />
					</view>
					<!-- <view class="form-item">
						<text class="label">时长</text>
						<input class="input" v-model="ticketsInfo.flightInfo.duration" placeholder="例: 2时5分" />
					</view> -->
					<view class="form-item">
						<text class="label">机型</text>
						<input class="input" v-model="ticketsInfo.flightInfo.aircraftType" />
					</view>
					<view class="form-item">
						<text class="label">舱位</text>
						<input class="input" v-model="ticketsInfo.flightInfo.seatCategory" />
					</view>
					<view class="form-item">
						<text class="label">准点率</text>
						<input class="input" v-model="ticketsInfo.flightInfo.onTimeRate" />
					</view>
					<view class="form-item">
						<text class="label">餐食</text>
						<input class="input" v-model="ticketsInfo.flightInfo.meal" />
					</view>
					<view class="form-item">
						<text class="label">行李额</text>
						<input class="input" v-model="ticketsInfo.flightInfo.luggageCheckInQuota" />
					</view>
				</view>
			</view>

			<!-- 乘客信息 -->
			<view class="section-container">
				<view class="section-header" @click="toggleSection('passengersInfo')">
					<text class="section-title">乘客信息 ({{ ticketsInfo.passengersInfo.length }}人)</text>
					<uni-icons :type="collapsed.passengersInfo ? 'bottom' : 'top'" size="16" color="#666"></uni-icons>
				</view>

				<view v-show="!collapsed.passengersInfo">
					<view class="card" v-for="(passenger, index) in ticketsInfo.passengersInfo" :key="index">
						<view class="card-header-row">
							<text class="card-header">乘客 {{ index + 1 }}</text>
							<text class="delete-btn" @click="removePassenger(index)">删除</text>
						</view>
						<view class="form-item">
							<text class="label">姓名</text>
							<input class="input" v-model="passenger.name" />
						</view>
						<view class="form-item">
							<text class="label">证件类型</text>
							<input class="input" v-model="passenger.idType" />
						</view>
						<view class="form-item">
							<text class="label">身份证号</text>
							<input class="input" v-model="passenger.idNumber" />
						</view>
						<view class="form-item">
							<text class="label">票号</text>
							<input class="input" v-model="passenger.ticketNo" />
						</view>
					</view>

					<view class="add-btn-box" @click="addPassenger">
						<uni-icons type="plusempty" size="20" color="#1677FF"></uni-icons>
						<text class="add-text">添加乘客</text>
					</view>
				</view>
			</view>

			<!-- 飞猪其他信息 -->
			<view class="section-container" v-if="data.storageKey === 'fliggyAirTicketsInfo'">
				<view class="section-header" @click="toggleSection('fligggyOrderInfo')">
					<text class="section-title">飞猪订单信息</text>
					<uni-icons :type="collapsed.fligggyOrderInfo ? 'bottom' : 'top'" size="16" color="#666"></uni-icons>
				</view>

				<view v-show="!collapsed.fligggyOrderInfo">
					<view class="card">
						<view class="form-item">
							<text class="label">服务方</text>
							<input class="input" v-model="ticketsInfo.fligggyOrderInfo.serviceProvider" />
						</view>
						<view class="form-item">
							<text class="label">飞猪里程</text>
							<input class="input" v-model="ticketsInfo.fligggyOrderInfo.flyingPigMileage" />
						</view>
						<view class="form-item">
							<text class="label">交易流水号</text>
							<input class="input" v-model="ticketsInfo.fligggyOrderInfo.transactionSerialNumber" />
						</view>
						<view class="tips-container">
							<view class="tips-header">
								<text class="label">订单提示</text>
								<view class="add-tip-btn" @click="addFliggyTip">
									<uni-icons type="plusempty" size="16" color="#1677FF"></uni-icons>
									<text style="color: #1677FF; font-size: 26rpx; margin-left: 4rpx;">添加</text>
								</view>
							</view>
							<view class="tip-list">
								<view v-for="(tip, index) in ticketsInfo.fligggyOrderInfo.tips" :key="tip.id"
									class="tip-item"
									:class="{ 'sort-active': dragInfo.listType === 'fliggy' && dragInfo.index === index }"
									:style="{ transform: dragInfo.listType === 'fliggy' && dragInfo.index === index ? `translateY(${dragInfo.offsetY}px)` : '', zIndex: dragInfo.listType === 'fliggy' && dragInfo.index === index ? 99 : 1 }">
									<input class="tip-input" v-model="tip.content" placeholder="请输入提示内容" />
									<view class="tip-actions">
										<uni-icons class="drag-handle" type="bars" size="20" color="#999"
											@touchstart.stop="onDragStart($event, index, 'fliggy')"
											@touchmove.stop.prevent="onDragMove" @touchend.stop="onDragEnd"></uni-icons>
										<uni-icons type="trash" size="18" color="#FF4D4F"
											@click="removeFliggyTip(index)"></uni-icons>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 携程其他信息 -->
			<view class="section-container" v-if="data.storageKey === 'ctripAirTicketsInfo'">
				<view class="section-header" @click="toggleSection('ctripOrderInfo')">
					<text class="section-title">携程订单信息</text>
					<uni-icons :type="collapsed.ctripOrderInfo ? 'bottom' : 'top'" size="16" color="#666"></uni-icons>
				</view>

				<view v-show="!collapsed.ctripOrderInfo">
					<view class="card">
						<view class="form-item">
							<text class="label">订单积分</text>
							<input class="input" v-model="ticketsInfo.ctripOrderInfo.points" />
						</view>
						<picker mode="selector" :range="ctripLevelList" range-key="label" @change="onLevelChange">
							<view class="form-item">
								<text class="label">等级</text>
								<view class="input"
									:style="{ color: !ticketsInfo.ctripOrderInfo.level ? '#999' : '#333' }">
									{{ getLevelLabel(ticketsInfo.ctripOrderInfo.level) || '请选择等级' }}</view>
							</view>
						</picker>
						<view class="tips-container">
							<view class="tips-header">
								<text class="label">订单提示</text>
								<view class="add-tip-btn" @click="addTip">
									<uni-icons type="plusempty" size="16" color="#1677FF"></uni-icons>
									<text style="color: #1677FF; font-size: 26rpx; margin-left: 4rpx;">添加</text>
								</view>
							</view>
							<view class="tip-list">
								<view v-for="(tip, index) in ticketsInfo.ctripOrderInfo.tips" :key="tip.id"
									class="tip-item"
									:class="{ 'sort-active': dragInfo.listType === 'ctrip' && dragInfo.index === index }"
									:style="{ transform: dragInfo.listType === 'ctrip' && dragInfo.index === index ? `translateY(${dragInfo.offsetY}px)` : '', zIndex: dragInfo.listType === 'ctrip' && dragInfo.index === index ? 99 : 1 }">
									<input class="tip-input" v-model="tip.content" placeholder="请输入提示内容" />
									<view class="tip-actions">
										<uni-icons class="drag-handle" type="bars" size="20" color="#999"
											@touchstart.stop="onDragStart($event, index, 'ctrip')"
											@touchmove.stop.prevent="onDragMove" @touchend.stop="onDragEnd"></uni-icons>
										<uni-icons type="trash" size="18" color="#FF4D4F"
											@click="removeTip(index)"></uni-icons>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="placeholder"></view>
		</scroll-view>
	</view>
</template>

<script setup>
import NavBar from '@/components/nav-bar/nav-bar.vue'
import { reactive, toRefs, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import defualtData from '@/pages/other/air-tickets/commom/defualt.json';
import airlineJson from '@/static/json/air-line.json';

const airLineList = airlineJson.airLine;

const data = reactive({
	ticketsInfo: JSON.parse(JSON.stringify(defualtData)),
	collapsed: {
		orderInfo: false,
		flightInfo: false,
		passengersInfo: false
	},
	storageKey: 'airTicketsInfo',
	dragInfo: {
		index: -1,
		listType: '', // 'ctrip' or 'fliggy'
		startY: 0,
		offsetY: 0,
		itemHeight: 0
	}
})

const { ticketsInfo, collapsed, dragInfo } = toRefs(data)

const onAirlineChange = (e) => {
	const index = e.detail.value;
	const selected = airLineList[index];
	if (selected) {
		data.ticketsInfo.flightInfo.airline = selected.name;
		data.ticketsInfo.flightInfo.airlineCode = selected.code;
	}
}

//携程会员等级
const ctripLevelList = [
	{
		label: "白银",
		value: 1
	},
	{
		label: "黄金",
		value: 2
	},
	{
		label: "铂金",
		value: 3
	},
	{
		label: "钻石",
		value: 4
	}
]

const onLevelChange = (e) => {
	const index = e.detail.value;
	ticketsInfo.value.ctripOrderInfo.level = ctripLevelList[index].value;
}

const getLevelLabel = (value) => {
	const item = ctripLevelList.find(i => i.value == value);
	return item ? item.label : '';
}



const addTip = () => {
	if (!ticketsInfo.value.ctripOrderInfo.tips) {
		ticketsInfo.value.ctripOrderInfo.tips = []
	}
	ticketsInfo.value.ctripOrderInfo.tips.push({
		id: Date.now().toString(),
		content: ''
	})
}

const removeTip = (index) => {
	ticketsInfo.value.ctripOrderInfo.tips.splice(index, 1)
}

const addFliggyTip = () => {
	if (!ticketsInfo.value.fligggyOrderInfo.tips) {
		ticketsInfo.value.fligggyOrderInfo.tips = []
	}
	ticketsInfo.value.fligggyOrderInfo.tips.push({
		id: Date.now().toString(),
		content: ''
	})
}

const removeFliggyTip = (index) => {
	ticketsInfo.value.fligggyOrderInfo.tips.splice(index, 1)
}


// Drag Sorting Logic
let dragTimer = null
const onDragStart = (e, index, type) => {
	const touch = e.touches[0]
	// Get item height first - assuming fixed height or query first item
	// Better to query the specific item height
	// For simplicity, let's assume item height is consistent or query dynamically
	const query = uni.createSelectorQuery().in(this)
	query.selectAll('.tip-item').boundingClientRect(data => {
		if (data && data.length > 0) {
			const itemRect = data[index]
			dragInfo.value.itemHeight = itemRect.height
			dragInfo.value.index = index
			dragInfo.value.listType = type
			dragInfo.value.startY = touch.clientY
			dragInfo.value.offsetY = 0
		}
	}).exec()
}

const onDragMove = (e) => {
	if (dragInfo.value.index === -1) return
	const touch = e.touches[0]
	const deltaY = touch.clientY - dragInfo.value.startY
	dragInfo.value.offsetY = deltaY

	// Calculate if we moved enough to swap
	const itemHeight = dragInfo.value.itemHeight || 50 // fallback height
	const moveSteps = Math.round(deltaY / itemHeight)

	if (moveSteps !== 0) {
		const newIndex = dragInfo.value.index + moveSteps
		let tips = []
		if (dragInfo.value.listType === 'ctrip') {
			tips = ticketsInfo.value.ctripOrderInfo.tips
		} else if (dragInfo.value.listType === 'fliggy') {
			tips = ticketsInfo.value.fligggyOrderInfo.tips
		}

		if (newIndex >= 0 && newIndex < tips.length) {
			// Debounce swap or swap immediately if safe?
			// Immediate swap might feel jittery if not careful
			// Let's swap data and update startY to reflect new position
			// Logic: Swap data, reset offset (because the item moved in DOM)

			// Simple swap
			const temp = tips[dragInfo.value.index]
			tips[dragInfo.value.index] = tips[newIndex]
			tips[newIndex] = temp

			// Update current index to new index
			dragInfo.value.index = newIndex
			// Reset startY to current touch position relative to new item position
			dragInfo.value.startY = touch.clientY
			dragInfo.value.offsetY = 0
		}
	}
}

const onDragEnd = () => {
	dragInfo.value.index = -1
	dragInfo.value.listType = ''
	dragInfo.value.offsetY = 0
}

// 深度合并函数
const deepMerge = (target, source) => {
	for (const key in source) {
		if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
			if (!target[key] || typeof target[key] !== 'object') {
				target[key] = {};
			}
			deepMerge(target[key], source[key]);
		} else {
			target[key] = source[key];
		}
	}
	return target;
};

onLoad((options) => {
	console.log('options', options)
	if (options.storageKey) {
		data.storageKey = options.storageKey
	}
	const stored = uni.getStorageSync(data.storageKey)
	if (stored) {
		// 使用默认数据作为基础，将存储的数据合并进去
		// 这样可以确保新增的默认字段不会被旧的存储数据覆盖丢失
		// 注意：这里 data.ticketsInfo 已经是 reactive 的 defualtData 的副本
		// 但为了保险，我们重新基于 defaultData 做合并，或者直接对 ticketsInfo 做深度合并
		// 鉴于 ticketsInfo 已经在 setup 中被初始化为 defaultData 的深拷贝
		// 我们直接将 stored merge 进 ticketsInfo 即可，但要用 deepMerge

		// 重新从 defaultData 获取一份纯净的基础数据，以防万一
		const baseData = JSON.parse(JSON.stringify(defualtData));
		const mergedData = deepMerge(baseData, stored);

		// 将合并后的数据赋值给 reactive 对象
		//由于 ticketsInfo 是 reactive 的属性，我们可以直接 Object.assign 或逐个属性赋值
		Object.assign(data.ticketsInfo, mergedData)

		// 再次检查 tips 是否存在，如果不存在（比如 stored 是旧数据且 defaultData 也没这个字段 - 虽然 defaultData 应该有），初始化为空数组
		if (data.storageKey === 'fliggyAirTicketsInfo' && !data.ticketsInfo.fligggyOrderInfo.tips) {
			data.ticketsInfo.fligggyOrderInfo.tips = []
		}
		if (data.storageKey === 'ctripAirTicketsInfo' && !data.ticketsInfo.ctripOrderInfo.tips) {
			data.ticketsInfo.ctripOrderInfo.tips = []
		}
	}
})

const toggleSection = (key) => {
	data.collapsed[key] = !data.collapsed[key]
}

const handleRightButtonClick = () => {
	const orderInfo = data.ticketsInfo.orderInfo;
	const flightInfo = data.ticketsInfo.flightInfo;

	if (orderInfo.orderTime && flightInfo.date && flightInfo.startTime) {
		const orderDate = new Date(orderInfo.orderTime.replace(/-/g, '/'));
		const flightDate = new Date((flightInfo.date + ' ' + flightInfo.startTime).replace(/-/g, '/'));

		if (orderDate > flightDate) {
			uni.showToast({
				title: '下单时间不能晚于起飞时间',
				icon: 'none'
			});
			return;
		}
	}
	if (data.storageKey === 'ctripAirTicketsInfo') {
		delete data.ticketsInfo.fligggyOrderInfo
	} else if (data.storageKey === 'fliggyAirTicketsInfo') {
		delete data.ticketsInfo.ctripOrderInfo
	} else {
		delete data.ticketsInfo.fligggyOrderInfo
		delete data.ticketsInfo.ctripOrderInfo
	}
	console.log('data.ticketsInfo', data.ticketsInfo)
	uni.setStorageSync(data.storageKey, data.ticketsInfo)
	uni.showToast({
		title: '保存成功',
		icon: 'success'
	})
	uni.navigateBack()
}

const addPassenger = () => {
	const lastP = data.ticketsInfo.passengersInfo[data.ticketsInfo.passengersInfo.length - 1]
	data.ticketsInfo.passengersInfo.push({
		name: '新乘客',
		idType: lastP ? lastP.idType : '身份证',
		idNumber: lastP ? lastP.idNumber : '123123********6352',
		ticketNo: lastP ? lastP.ticketNo : '12345678901'
	})
}

const removePassenger = (index) => {
	uni.showModal({
		title: '提示',
		content: '确定要删除该乘客吗？',
		success: (res) => {
			if (res.confirm) {
				data.ticketsInfo.passengersInfo.splice(index, 1)
			}
		}
	})
}

// Helper to extract YYYY-MM-DD from YYYY-MM-DD HH:mm or similar
const getDateFromStr = (str) => {
	if (!str) return ''
	// Try to match date pattern
	const dateMatch = str.match(/\d{4}[-.]\d{2}[-.]\d{2}/)
	if (dateMatch) return dateMatch[0].replace(/\./g, '-')
	return ''
}

const onOrderDateChange = (e) => {
	const val = e.detail.value // YYYY-MM-DD
	// orderTime format in default is "YYYY-MM-DD HH:mm"
	// We need to keep the time part if possible, or default to current time
	let oldTime = '00:00'
	if (data.ticketsInfo.orderInfo.orderTime && data.ticketsInfo.orderInfo.orderTime.includes(' ')) {
		oldTime = data.ticketsInfo.orderInfo.orderTime.split(' ')[1]
	}
	data.ticketsInfo.orderInfo.orderTime = val + ' ' + oldTime
}

const onFlightDateChange = (e) => {
	data.ticketsInfo.flightInfo.date = e.detail.value
}

// Custom Time Picker Data
const hours = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0'));
const minutes = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'));
const timeRange = [hours, minutes];

const getTimeIndex = (timeStr) => {
	if (!timeStr) return [0, 0];
	const [h, m] = timeStr.split(':');
	const hIndex = hours.findIndex(item => item === h);
	const mIndex = minutes.findIndex(item => item === m);
	return [hIndex === -1 ? 0 : hIndex, mIndex === -1 ? 0 : mIndex];
};

const onStartTimeChange = (e) => {
	const [hIndex, mIndex] = e.detail.value;
	const time = `${hours[hIndex]}:${minutes[mIndex]}`;
	data.ticketsInfo.flightInfo.startTime = time;
	updateDuration();
}

const onEndTimeChange = (e) => {
	const [hIndex, mIndex] = e.detail.value;
	const time = `${hours[hIndex]}:${minutes[mIndex]}`;
	data.ticketsInfo.flightInfo.endTime = time;
	updateDuration();
}

const updateDuration = () => {
	// Simple calc if same day or we can just leave it to user to input manually (which we support via input)
	// But let's try a best effort calc
	const ft = data.ticketsInfo.flightInfo
	if (ft.startTime && ft.endTime) {
		const [sh, sm] = ft.startTime.split(':').map(Number)
		const [eh, em] = ft.endTime.split(':').map(Number)
		let diffMin = (eh * 60 + em) - (sh * 60 + sm)
		if (diffMin < 0) diffMin += 24 * 60 // Assume next day if cross midnight

		const h = Math.floor(diffMin / 60)
		const m = diffMin % 60
		ft.duration = `${h}时${m}分`
	}
}
</script>

<style>
@import "@/common/main.css";

page {
	background-color: #F8F8F8;
	height: 100vh;
	overflow: hidden;
}
</style>

<style lang="less" scoped>
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.form-content {
	flex: 1;
	height: 0;
	padding: 24rpx;
	box-sizing: border-box;
}

.section-container {
	margin-bottom: 24rpx;
}

.section-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 12rpx 16rpx;
	background-color: transparent;
}

.section-title {
	font-size: 28rpx;
	color: #666;
	font-weight: 500;
}

.card {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 0 24rpx;
	margin-bottom: 24rpx;
	overflow: hidden;

	.card-header-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0 12rpx;
		border-bottom: 1rpx solid #f5f5f5;
		margin-bottom: 12rpx;
	}

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

	.delete-btn {
		font-size: 26rpx;
		color: #FF4D4F;
		padding: 4rpx 12rpx;
	}
}

.form-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #F5F5F5;



	.label {
		font-size: 30rpx;
		color: #333;
		width: 240rpx;
	}

	.input {
		flex: 1;
		font-size: 30rpx;
		color: #333;
		text-align: right;
	}
}

.add-btn-box {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2rpx dashed #1677FF;
	margin-bottom: 24rpx;

	.add-text {
		color: #1677FF;
		font-size: 30rpx;
		margin-left: 8rpx;
	}
}

.placeholder {
	height: 60rpx;
}

.tips-container {
	padding: 24rpx 0;
	border-bottom: 1rpx solid #F5F5F5;

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

	.tip-list {
		.tip-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 16rpx;
			background-color: #F8F8F8;
			padding: 12rpx 16rpx;
			border-radius: 8rpx;

			.tip-input {
				flex: 1;
				font-size: 26rpx;
				color: #333;
				margin-right: 16rpx;
			}

			.tip-actions {
				display: flex;
				align-items: center;
				gap: 16rpx;
			}
		}

		.sort-active {
			background-color: #E6F2FF;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			transition: transform 0.1s;
		}
	}
}
</style>
