<template>
	<view class="workbench">
		<!-- 头部：头像、昵称、经营状态 -->
		<view class="section header-section">
			<view class="header-main" @click="goProfile">
				<view class="avatar-wrap">
					<image
						class="avatar"
						:src="merchantInfo.cPortrait ? $globalData.publicUrl + merchantInfo.cPortrait : '/static/common/avatar.png'"
						mode="aspectFill"
					/>
				</view>
				<view class="header-info">
					<view class="nickname">
						{{ merchantInfo.cNickName || merchantInfo.cName || '技师昵称' }}
						<text class="arrow">&gt;</text>
					</view>
				</view>
			</view>
			<view class="status-bar">
				<view class="status-tag rest" v-if="!isWorking">休息时间</view>
				<view class="status-select" @click="openStatusPopup">
					<text>{{ isWorking ? '在线接单' : '下线休息' }}</text>
					<text class="arrow-down">▼</text>
				</view>
			</view>
		</view>

		<!-- 统计 -->
		<view class="section stats-section">
			<view class="stat-item" @click="goTodayOrders">
				<view class="stat-value">{{ todayOrderCount }}<text class="unit">笔</text></view>
				<view class="stat-label">今日订单</view>
			</view>
			<view class="stat-item" @click="goBankList">
				<view class="stat-value">{{ bankCardCount }}<text class="unit">张</text></view>
				<view class="stat-label">银行卡</view>
			</view>
			<view class="stat-item" @click="goReviewList">
				<view class="stat-value">{{ ratingScore }}</view>
				<view class="stat-label">评分</view>
			</view>
			<view class="stat-item">
				<view class="stat-value">{{ onlineHours }}<text class="unit">小时</text></view>
				<view class="stat-label">在线时长</view>
			</view>
		</view>

		<!-- 钱包 -->
		<view class="section wallet-section">
			<view class="balance-row">
				<view class="balance-main" @click="goWithdraw">
					<text class="balance-amount">{{ formatMoney(balance) }}元</text>
					<text class="balance-label">余额</text>
				</view>
				<view class="withdraw-btn" @click.stop="goWithdraw">提现</view>
			</view>
			<view class="wallet-grid">
				<view class="wallet-item" @click="goIncome">
					<view class="wallet-value">{{ formatMoney(myIncome.tAmount) }}<text class="unit">元</text></view>
					<view class="wallet-label">收入</view>
				</view>
				<view class="wallet-item" @click="goIncome">
					<view class="wallet-value">{{ formatMoney(myIncome.wAmount) }}<text class="unit">元</text></view>
					<view class="wallet-label">待结算</view>
				</view>
				<view class="wallet-item" @click="goIncome">
					<view class="wallet-value">{{ formatMoney(myIncome.yAmount) }}<text class="unit">元</text></view>
					<view class="wallet-label">已结算</view>
				</view>
				<view class="wallet-item" @click="goWithdrawRecord">
					<view class="wallet-value">{{ formatMoney(myIncome.gAmount) }}<text class="unit">元</text></view>
					<view class="wallet-label">已提现</view>
				</view>
			</view>
		</view>

		<!-- 新订单 -->
		<view class="section order-section" v-if="pendingOrder">
			<view class="section-title">
				<text class="bell">🔔</text>
				新订单
			</view>
			<view class="order-card">
				<view class="order-title">
					{{ orderTitle }}
					<text class="tag-new" v-if="isNewCustomer">#新客户#</text>
				</view>
				<view class="order-time">{{ orderServiceTime }}</view>
				<view class="order-address">
					<text class="loc-icon">📍</text>
					{{ orderAddress }}
				</view>
				<view class="order-actions">
					<view class="reject-btn" @click="onRejectOrder">拒绝</view>
					<view class="slide-wrap" id="slideWrap">
						<view class="slide-track">
							<text class="slide-hint">滑动接单</text>
							<view
								class="slide-thumb"
								:style="{ transform: `translateX(${slideX}px)` }"
								@touchstart="onSlideStart"
								@touchmove.stop.prevent="onSlideMove"
								@touchend="onSlideEnd"
							>滑动接单</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 我的技能 -->
		<view class="section skills-section">
			<view class="section-header">
				<text class="section-heading">我的技能 ({{ skillList.length }}项)</text>
				<text class="section-link" @click="goSkillManage">管理 &gt;</text>
			</view>
			<scroll-view scroll-x class="skill-scroll" v-if="skillList.length">
				<view class="skill-list">
					<view class="skill-card" v-for="(item, index) in skillList" :key="index">
						<view class="skill-img">
							<image
								v-if="item.cCover"
								:src="$globalData.publicUrl + item.cCover"
								mode="aspectFill"
							/>
						</view>
						<view class="skill-name one-line-text">{{ item.cTitle }}</view>
						<view class="skill-price">¥ {{ item.dPrice }}{{ skillPriceUnit(item) }}</view>
					</view>
				</view>
			</scroll-view>
			<view class="empty-tip" v-else>暂未添加技能</view>
		</view>

		<!-- 我的地址 -->
		<view class="section address-section">
			<view class="section-heading">我的地址</view>
			<view class="address-text">{{ currentAddress || '暂无地址' }}</view>
			<view class="address-actions">
				<view class="addr-btn" @click="goSwitchAddress">切换地址</view>
				<view class="addr-btn primary" @click="goUpdateAddress">更新地址</view>
			</view>
		</view>

		<!-- 更多功能 -->
		<view class="section more-section">
			<view class="section-heading">更多功能</view>
			<view class="more-grid">
				<view
					class="more-item"
					v-for="(item, index) in moreFeatures"
					:key="index"
					@click="onMoreFeature(item)"
				>
					<view class="more-icon">{{ item.icon }}</view>
					<text class="more-label">{{ item.label }}</text>
				</view>
			</view>
		</view>

		<!-- 拒绝接单弹窗 -->
		<view class="popup-mask" v-if="showRejectPopup" @click="closeRejectPopup">
			<view class="popup-box" @click.stop>
				<view class="popup-title">请输入拒绝接单原因</view>
				<input
					class="popup-input"
					v-model="rejectReason"
					maxlength="10"
					placeholder="请输入拒绝原因,最多10个字"
				/>
				<view class="popup-btns">
					<view class="popup-btn" @click="closeRejectPopup">取消</view>
					<view class="popup-btn confirm" @click="submitReject">提交</view>
				</view>
			</view>
		</view>

		<!-- 接单状态底部弹窗 -->
		<view class="popup-mask bottom" v-if="showStatusPopup" @click="showStatusPopup = false">
			<view class="status-panel" @click.stop>
				<view class="panel-title">接单状态</view>
				<view
					class="status-option"
					:class="{ active: statusDraft === 'rest' }"
					@click="statusDraft = 'rest'"
				>
					<view class="option-body">
						<text class="option-name">{{ !isWorking ? '休息中' : '下线休息' }}</text>
						<text class="option-desc">{{ getStatusDesc('rest') }}</text>
					</view>
					<text class="option-check" v-if="statusDraft === 'rest'">✓</text>
				</view>
				<view
					class="status-option"
					:class="{ active: statusDraft === 'working' }"
					@click="statusDraft = 'working'"
				>
					<view class="option-body">
						<text class="option-name">在线接单</text>
						<text class="option-desc">{{ getStatusDesc('working') }}</text>
					</view>
					<text class="option-check" v-if="statusDraft === 'working'">✓</text>
				</view>
				<view class="panel-btns">
					<view class="panel-btn" @click="showStatusPopup = false">取消</view>
					<view class="panel-btn confirm" @click="confirmStatusChange">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	getMerchantData,
	getInfo,
	myIncome,
	getStaffWorkData,
	getWaitOrder,
	myBank,
	getProjectByJsId,
	netStaffWork,
} from '@/api/index'
import { orderDeatails, takeOrder, refuseOrder } from '@/api/order.js'

export default {
	data() {
		return {
			merchantInfo: {},
			cJsId: '',
			isWorking: false,
			todayOrderCount: 0,
			bankCardCount: 0,
			ratingScore: '0.0',
			onlineHours: '0',
			workStartTime: null,
			restStartTime: null,
			balance: 0,
			myIncome: {
				tAmount: 0,
				wAmount: 0,
				yAmount: 0,
				gAmount: 0,
				kAmount: 0,
				deductAmount: 0,
			},
			pendingOrder: true,
			skillList: [],
			currentAddress: '',
			showRejectPopup: false,
			rejectReason: '',
			showStatusPopup: false,
			statusDraft: 'working',
			slideX: 0,
			slideStartX: 0,
			slideMax: 0,
			isSliding: false,
			moreFeatures: [
				{ label: '免车费', icon: '免', path: '/workbench/fare/index' },
				{ label: '开通新技能', icon: '技', path: '/workbench/skill/add' },
				{ label: '我的合同', icon: '合', path: '/workbench/contract/index' },
				{ label: '我的资料', icon: '资', path: '/pages/my/indent?title=编辑资料' },
				{ label: '城市管理', icon: '城', path: '/workbench/city/index' },
			],
		}
	},
	computed: {
		orderTitle() {
			if (!this.pendingOrder) return ''
			const goods = this.pendingOrder.cGoods || []
			return goods[0]?.cTitle || '服务项目'
		},
		orderServiceTime() {
			if (!this.pendingOrder) return ''
			return this.formatOrderTime(
				this.pendingOrder.reachTime || this.pendingOrder.dtCreateTime || ''
			)
		},
		deductionAmount() {
			return (
				this.myIncome.kAmount ??
				this.myIncome.deductAmount ??
				this.myIncome.dAmount ??
				0
			)
		},
		orderAddress() {
			if (!this.pendingOrder) return ''
			return this.pendingOrder.address || this.pendingOrder.atlasAdd || ''
		},
		isNewCustomer() {
			return this.pendingOrder?.nB2 == 1
		},
	},
	onShow() {
		this.loadPageData()
	},
	methods: {
		loadPageData() {
			this.fetchMerchantInfo()
			this.fetchWalletInfo()
			this.fetchIncome()
			this.fetchWorkData()
			this.fetchBankCards()
		},
		fetchMerchantInfo() {
			const params = { cOpenId: uni.getStorageSync('wx_copenid') }
			getMerchantData(params).then(res => {
				if (res.data.code != 200 || !res.data.data) return
				const data = res.data.data
				this.merchantInfo = data
				this.cJsId = data.id
				this.isWorking = data.nStatus2 == '0'
				this.ratingScore = data.nStar != null ? Number(data.nStar).toFixed(1) : '0.0'
				this.workStartTime = data.dtWorkStart || data.dtOnlineStart || null
				this.restStartTime = data.dtRestStart || data.restStartTime || null
				this.currentAddress = data.address || data.name || ''
				this.fetchTodayOrders()
				this.fetchPendingOrder()
				this.fetchSkills()
			})
		},
		fetchWalletInfo() {
			getInfo().then(res => {
				if (res.data.code == 200 && res.data.data) {
					this.balance = res.data.data.getAmount ?? res.data.data.dBalance ?? 0
				}
			})
		},
		fetchIncome() {
			myIncome().then(res => {
				if (res.data.code == 200 && res.data.data) {
					this.myIncome = res.data.data
				}
			})
		},
		fetchWorkData() {
			getStaffWorkData({ openId: uni.getStorageSync('wx_copenid') }).then(res => {
				if (res.data.code == 200 && res.data.data) {
					const minutes = res.data.data.onLine || 0
					this.onlineHours = (minutes / 60).toFixed(1).replace(/\.0$/, '')
				}
			})
		},
		fetchBankCards() {
			myBank().then(res => {
				if (res.data.code == 200 && Array.isArray(res.data.data)) {
					this.bankCardCount = res.data.data.length
				}
			})
		},
		fetchTodayOrders() {
			if (!this.cJsId) return
			getWaitOrder({ cJsId: this.cJsId }).then(res => {
				if (res.data.code == 200) {
					this.todayOrderCount = res.data.data || 0
				}
			})
		},
		fetchSkills() {
			const openId = uni.getStorageSync('wx_copenid')
			if (!openId) return
			getProjectByJsId({ openId }).then(res => {
				if (res.data.code == 200 && Array.isArray(res.data.data)) {
					this.skillList = res.data.data
				}
			})
		},
		fetchPendingOrder() {
			if (!this.cJsId) return
			orderDeatails({
				cJsId: this.cJsId,
				nStatus: 0,
				current: 1,
				size: 1,
			}).then(res => {
				if (res.data.code == 200 && res.data.data?.records?.length) {
					this.pendingOrder = res.data.data.records[0]
				} else {
					this.pendingOrder = null
				}
			})
		},
		formatMoney(amount) {
			const num = parseFloat(amount)
			if (isNaN(num)) return '0.00'
			return num.toFixed(2)
		},
		skillPriceUnit(item) {
			if (item.cUnit) return `/${item.cUnit}`
			if (item.nMinute) return '/小时'
			return ''
		},
		formatOrderTime(timeStr) {
			if (!timeStr) return ''
			const str = String(timeStr)
			const d = new Date(str.replace(/-/g, '/'))
			if (Number.isNaN(d.getTime())) return str
			const m = d.getMonth() + 1
			const day = d.getDate()
			const hh = String(d.getHours()).padStart(2, '0')
			const mm = String(d.getMinutes()).padStart(2, '0')
			if (str.includes('-') && str.length > 16) {
				const end = str.slice(11, 16)
				if (end && end !== `${hh}:${mm}`) {
					return `${m}月${day}日 ${hh}:${mm}-${end}`
				}
			}
			return `${m}月${day}日 ${hh}:${mm}`
		},
		getStatusDurationHours(type) {
			const since =
				type === 'working'
					? this.workStartTime
					: this.restStartTime
			if (!since) return 0
			const start = new Date(String(since).replace(/-/g, '/')).getTime()
			if (Number.isNaN(start)) return 0
			return Math.max(0, Math.floor((Date.now() - start) / 3600000))
		},
		getStatusDesc(type) {
			const isCurrent =
				type === 'working' ? this.isWorking : !this.isWorking
			if (isCurrent) {
				const hours = this.getStatusDurationHours(type)
				if (type === 'working') {
					return `已连续辛勤工作${hours}个小时`
				}
				return `已休息${hours}个小时`
			}
			if (type === 'working') {
				return '早起的人已经接单，勤奋的人账户常满'
			}
			return '今日辛苦啦，早点下线休息，注意劳逸结合！'
		},
		openStatusPopup() {
			this.statusDraft = this.isWorking ? 'working' : 'rest'
			this.showStatusPopup = true
		},
		confirmStatusChange() {
			const wantWorking = this.statusDraft === 'working'
			this.showStatusPopup = false
			if (wantWorking === this.isWorking) return
			this.updateWorkStatus(wantWorking)
		},
		updateWorkStatus(working) {
			if (!this.cJsId) {
				uni.showToast({ title: '请先登录', icon: 'none' })
				return
			}
			netStaffWork({
				id: this.cJsId,
				nStatus2: working ? '0' : '-1',
			}).then(res => {
				if (res.data.code == 200) {
					this.isWorking = working
					const now = new Date().toISOString()
					if (working) {
						this.workStartTime = now
					} else {
						this.restStartTime = now
					}
					uni.showToast({ title: working ? '已上线' : '已下线', icon: 'none' })
				} else {
					uni.showToast({ title: res.data.msg || '设置失败', icon: 'none' })
				}
			})
		},
		onRejectOrder() {
			this.showRejectPopup = true
			this.rejectReason = ''
		},
		closeRejectPopup() {
			this.showRejectPopup = false
			this.rejectReason = ''
		},
		submitReject() {
			const reason = this.rejectReason.trim()
			if (!reason) {
				uni.showToast({ title: '拒绝原因不能为空', icon: 'none' })
				return
			}
			refuseOrder({
				cId: this.pendingOrder.cId,
				reasonRefusal: reason,
			}).then(res => {
				if (res.data.code == 200) {
					uni.showToast({ title: '已拒绝', icon: 'none' })
					this.closeRejectPopup()
					this.pendingOrder = null
					this.fetchTodayOrders()
				} else {
					uni.showToast({ title: res.data.msg || '操作失败', icon: 'none' })
				}
			})
		},
		onSlideStart(e) {
			this.isSliding = true
			this.slideStartX = e.touches[0].clientX - this.slideX
			const query = uni.createSelectorQuery().in(this)
			query.select('.slide-track').boundingClientRect(rect => {
				if (rect) {
					this.slideMax = rect.width * 0.65
				}
			}).exec()
		},
		onSlideMove(e) {
			if (!this.isSliding) return
			let x = e.touches[0].clientX - this.slideStartX
			if (x < 0) x = 0
			if (x > this.slideMax) x = this.slideMax
			this.slideX = x
		},
		onSlideEnd() {
			if (!this.isSliding) return
			this.isSliding = false
			if (this.slideX >= this.slideMax * 0.85) {
				this.acceptOrder()
			}
			this.slideX = 0
		},
		acceptOrder() {
			if (!this.pendingOrder) return
			uni.showToast({ title: '接单失败', icon: 'none' })
			return;
			takeOrder({ cId: this.pendingOrder.cId }).then(res => {
				if (res.data.code == 200) {
					uni.showToast({ title: '已接单', icon: 'none' })
					this.pendingOrder = null
					this.fetchTodayOrders()
				} else {
					uni.showToast({ title: res.data.msg || '接单失败', icon: 'none' })
				}
			})
		},
		goProfile() {
			uni.navigateTo({ url: '/pages/my/indent?title=编辑资料' })
		},
		goTodayOrders() {
			uni.navigateTo({ url: '/pages/my/js_order' })
		},
		goBankList() {
			uni.navigateTo({ url: '/workbench/bank/index' })
		},
		goReviewList() {
			uni.navigateTo({ url: '/workbench/rating/index' })
		},
		goWithdraw() {
			uni.navigateTo({ url: '/workbench/withdraw/apply' })
		},
		goIncome() {
			uni.navigateTo({ url: '/workbench/income/index' })
		},
		goWithdrawRecord() {
			uni.navigateTo({ url: '/workbench/withdraw/record' })
		},
		goSkillManage() {
			uni.navigateTo({ url: '/workbench/skill/index' })
		},
		goSwitchAddress() {
			if (!this.cJsId) return
			const str = uni.$u.queryParams({
				id: this.cJsId,
				name: this.merchantInfo.cNickName,
				phone: this.merchantInfo.cPhone,
			})
			uni.navigateTo({ url: `/pages/address/virtual${str}` })
		},
		goUpdateAddress() {
			this.goSwitchAddress()
		},
		onMoreFeature(item) {
			if (!item.path) {
				uni.showToast({ title: '功能开发中', icon: 'none' })
				return
			}
			uni.navigateTo({ url: item.path })
		},
	},
}
</script>

<style lang="scss" scoped>
.workbench {
	min-height: 100vh;
	padding: 24rpx 24rpx 40rpx;
	background: #f5f5f5;
	box-sizing: border-box;
}

.section {
	background: #fff;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	margin-bottom: 20rpx;
	padding: 24rpx;
	box-sizing: border-box;
}

/* 头部 */
.header-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header-main {
	display: flex;
	align-items: center;
	flex: 1;
}

.avatar-wrap {
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
	border: 1rpx solid #ccc;
	overflow: hidden;
	background: #eee;
	flex-shrink: 0;
}

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

.header-info {
	margin-left: 20rpx;
}

.nickname {
	font-size: 30rpx;
	color: #333;
	font-weight: 500;
}

.arrow {
	margin-left: 8rpx;
	color: #999;
	font-size: 24rpx;
}

.status-bar {
	display: flex;
	align-items: center;
	gap: 12rpx;
	flex-shrink: 0;
}

.status-tag {
	padding: 8rpx 16rpx;
	font-size: 22rpx;
	border: 1rpx solid #ccc;
	border-radius: 6rpx;
	color: #999;

	&.rest {
		border-color: #ddd;
		color: #666;
		background: #f7f7f7;
	}
}

.status-select {
	display: flex;
	align-items: center;
	padding: 8rpx 16rpx;
	font-size: 22rpx;
	border: 1rpx solid #ccc;
	border-radius: 6rpx;
	color: #666;
}

.arrow-down {
	font-size: 18rpx;
	margin-left: 6rpx;
	color: #999;
}

/* 统计栏 */
.stats-section {
	display: flex;
	justify-content: space-between;
}

.stat-item {
	flex: 1;
	text-align: center;
}

.stat-value {
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
	line-height: 1.4;
}

.stat-label {
	font-size: 22rpx;
	color: #999;
	margin-top: 8rpx;
}

.unit {
	font-size: 22rpx;
	font-weight: 400;
	margin-left: 2rpx;
}

/* 钱包 */
.balance-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 24rpx;
	border-bottom: 1rpx solid #eee;
	margin-bottom: 24rpx;
}

.balance-main {
	display: flex;
	flex-direction: column;
}

.balance-amount {
	font-size: 48rpx;
	font-weight: 700;
	color: #333;
	line-height: 1.3;
}

.balance-label {
	font-size: 24rpx;
	color: #999;
	margin-top: 8rpx;
}

.withdraw-btn {
	padding: 14rpx 40rpx;
	background: #f0f0f0;
	border-radius: 40rpx;
	font-size: 26rpx;
	color: #333;
	flex-shrink: 0;
}

.wallet-grid {
	display: flex;
	justify-content: space-between;
}

.wallet-item {
	flex: 1;
	text-align: center;
}

.wallet-value {
	font-size: 26rpx;
	color: #333;
	font-weight: 500;
}

.wallet-label {
	font-size: 22rpx;
	color: #999;
	margin-top: 8rpx;
}

/* 新订单 */
.section-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
}

.bell {
	margin-right: 8rpx;
}

.order-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	line-height: 1.5;
}

.tag-new {
	color: #666;
	font-size: 24rpx;
	margin-left: 8rpx;
}

.order-time {
	font-size: 24rpx;
	color: #666;
	margin-top: 12rpx;
}

.order-address {
	font-size: 24rpx;
	color: #666;
	margin-top: 12rpx;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
}

.loc-icon {
	margin-right: 6rpx;
	flex-shrink: 0;
}

.order-actions {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-top: 24rpx;
}

.reject-btn {
	width: 120rpx;
	height: 72rpx;
	line-height: 72rpx;
	text-align: center;
	border: 1rpx solid #ccc;
	border-radius: 6rpx;
	font-size: 26rpx;
	color: #666;
	flex-shrink: 0;
}

.slide-wrap {
	flex: 1;
}

.slide-track {
	position: relative;
	height: 72rpx;
	background: #eee;
	border: 1rpx solid #ccc;
	border-radius: 6rpx;
	overflow: hidden;
}

.slide-hint {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	line-height: 72rpx;
	text-align: center;
	font-size: 26rpx;
	color: #999;
}

.slide-thumb {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	min-width: 160rpx;
	padding: 0 24rpx;
	line-height: 72rpx;
	text-align: center;
	background: #ccc;
	border-radius: 6rpx;
	font-size: 26rpx;
	color: #333;
	z-index: 1;
}

/* 技能 */
.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.section-heading {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
}

.section-link {
	font-size: 24rpx;
	color: #666;
}

.skill-scroll {
	white-space: nowrap;
}

.skill-list {
	display: inline-flex;
	gap: 16rpx;
}

.skill-card {
	display: inline-block;
	width: 200rpx;
	border: 1rpx solid #ddd;
	border-radius: 6rpx;
	padding: 12rpx;
	vertical-align: top;
}

.skill-img {
	width: 100%;
	height: 120rpx;
	background: #eee;
	border: 1rpx solid #ddd;
	border-radius: 4rpx;
	overflow: hidden;
	margin-bottom: 12rpx;

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

.skill-name {
	font-size: 24rpx;
	color: #333;
	margin-bottom: 8rpx;
}

.skill-price {
	font-size: 24rpx;
	color: #666;
}

.empty-tip {
	font-size: 26rpx;
	color: #999;
	text-align: center;
	padding: 32rpx 0;
}

/* 地址 */
.address-text {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
	margin: 16rpx 0 24rpx;
}

.address-actions {
	display: flex;
	gap: 16rpx;
}

.addr-btn {
	flex: 1;
	height: 72rpx;
	line-height: 72rpx;
	text-align: center;
	border: 1rpx solid #ccc;
	border-radius: 6rpx;
	font-size: 26rpx;
	color: #666;

	&.primary {
		border-color: #333;
		color: #333;
	}
}

/* 更多功能 */
.more-grid {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20rpx;
}

.more-item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16rpx 0;
}

.more-icon {
	width: 72rpx;
	height: 72rpx;
	line-height: 72rpx;
	text-align: center;
	border: 1rpx solid #ccc;
	border-radius: 8rpx;
	background: #eee;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 12rpx;
}

.more-label {
	font-size: 22rpx;
	color: #666;
	text-align: center;
}

/* 弹窗 */
.popup-mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-box {
	width: 600rpx;
	background: #fff;
	border-radius: 8rpx;
	padding: 32rpx;
}

.popup-title {
	font-size: 28rpx;
	color: #333;
	text-align: center;
	margin-bottom: 24rpx;
}

.popup-input {
	width: 100%;
	height: 72rpx;
	border: 1rpx solid #ddd;
	border-radius: 6rpx;
	padding: 0 20rpx;
	font-size: 26rpx;
	box-sizing: border-box;
}

.popup-btns {
	display: flex;
	gap: 24rpx;
	margin-top: 32rpx;
}

.popup-btn {
	flex: 1;
	height: 72rpx;
	line-height: 72rpx;
	text-align: center;
	border: 1rpx solid #ccc;
	border-radius: 6rpx;
	font-size: 28rpx;
	color: #666;

	&.confirm {
		border-color: #333;
		color: #333;
	}
}

.popup-mask.bottom {
	align-items: flex-end;
}

.status-panel {
	width: 100%;
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 32rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);
	box-sizing: border-box;
}

.panel-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	text-align: center;
	margin-bottom: 32rpx;
}

.status-option {
	display: flex;
	align-items: center;
	padding: 28rpx 0;
	border-bottom: 1rpx solid #f5f5f5;

	&.active .option-name {
		color: #0879ff;
	}
}

.option-body {
	flex: 1;
	min-width: 0;
}

.option-check {
	font-size: 36rpx;
	color: #0879ff;
	font-weight: 600;
	flex-shrink: 0;
	margin-left: 16rpx;
}

.option-name {
	display: block;
	font-size: 30rpx;
	color: #333;
	font-weight: 500;
}

.option-desc {
	display: block;
	font-size: 24rpx;
	color: #999;
	margin-top: 8rpx;
	line-height: 1.5;
}

.panel-btns {
	display: flex;
	gap: 24rpx;
	margin-top: 32rpx;
}

.panel-btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border: 1rpx solid #ccc;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #666;

	&.confirm {
		background: #0879ff;
		border-color: #0879ff;
		color: #fff;
	}
}
</style>
