<template>
	<view class="page-container">
		<view class="top-bg-gradient"></view>

		<u-navbar 
			title="技师中心" 
			:placeholder="true" 
			bgColor="transparent" 
			leftIconColor="#000" 
			titleStyle="font-weight:bold;"
		>
			<view slot="right">
				<u-icon name="more-dot-fill" size="24" color="#000"></u-icon>
			</view>
		</u-navbar>

		<view class="header-content">
			<view class="card profile-card">
				<view class="profile-left">
					<u-avatar :src="userInfo.avatar" size="50"></u-avatar>
					<view class="info">
						<view class="name-row">
							<text class="name">{{ userInfo.name }}</text>
							<u-icon name="map-fill" color="#1ecbc3" size="14"></u-icon>
						</view>
						<view class="address">{{ userInfo.address }}</view>
					</view>
				</view>
				<u-button 
					text="更换位置" 
					color="#1ecbc3" 
					shape="circle" 
					size="small" 
					customStyle="height: 28px; font-size: 12px; padding: 0 15px;"
				></u-button>
			</view>

			<view class="card stats-card">
				<view class="stats-row">
					<view class="stat-item">
						<view class="label">本月订单数</view>
						<view class="value-box">
							<text class="value green">{{ stats.orderCount }}</text> <text class="unit">单</text>
						</view>
					</view>
					<view class="stat-item">
						<view class="label">本月在线时长</view>
						<view class="value-box">
							<text class="value green">{{ stats.onlineHours }}</text> <text class="unit">时</text>
						</view>
					</view>
					<view class="stat-item">
						<view class="label">本月营业额</view>
						<view class="value-box">
							<text class="value green">{{ stats.revenue }}</text> <text class="unit">元</text>
						</view>
					</view>
				</view>
				<u-line margin="20rpx 0" dashed color="#eee"></u-line>
				<view class="stats-row bottom-row">
					<view class="stat-item">
						<view class="label">余额</view>
						<view class="value-box">
							<text class="value orange">{{ stats.balance }}</text> <text class="unit">元</text>
						</view>
					</view>
					<view class="stat-item">
						<view class="label">可提现</view>
						<view class="value-box">
							<text class="value orange">{{ stats.withdrawable }}</text> <text class="unit">元</text>
						</view>
					</view>
					<view class="stat-btn">
						<u-button text="申请提现" color="#ff9900" shape="circle" size="small"></u-button>
					</view>
				</view>
			</view>

			<view class="card status-card">
				<view class="status-header">
					<view class="status-text">
						<u-icon name="empty-data" size="20" color="#999"></u-icon>
						<text style="margin-left: 10rpx;">休息中</text>
					</view>
					<u-button text="上线" color="#1ecbc3" shape="circle" size="small" customStyle="width: 80px;"></u-button>
				</view>
				<view style="margin-top: 20rpx;">
					<u-button text="报警/求助" color="#f56c6c" shape="circle"></u-button>
				</view>
			</view>

			<view class="card function-card">
				<u-grid :border="false" col="5">
					<u-grid-item v-for="(item, index) in functionList" :key="index" customStyle="padding: 20rpx 0;">
						<u-icon :name="item.icon" :size="28" color="#333"></u-icon>
						<text class="grid-text">{{ item.title }}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<u-sticky bgColor="#F6F7F9" offset-top="0">
			<view class="tabs-container">
				<u-tabs 
					:list="tabList" 
					:current="currentTab" 
					lineColor="#1ecbc3" 
					activeColor="#1ecbc3"
					:scrollable="false"
					itemStyle="padding-left: 10px; padding-right: 10px; height: 44px;"
					@click="changeTab"
				></u-tabs>
			</view>
		</u-sticky>

		<view class="list-container">
			<z-paging 
				ref="paging" 
				v-model="dataList" 
				@query="queryList" 
                :fixed="false"
				:use-page-scroll="true"
				:refresher-enabled="false" 
			>
				<view class="order-item" v-for="(item, index) in dataList" :key="index">
					<view class="order-header">
						<text class="time">上门时间：{{ item.serviceDate }}</text>
						<text class="status" :class="getStatusClass(item.status)">{{ item.statusText }}</text>
					</view>
					
					<view class="order-content">
						<view class="row">
							<text class="label">客户姓名：</text>
							<text class="val">{{ item.customerName }}</text>
						</view>
						<view class="row">
							<text class="label">项目名称：</text>
							<text class="val">{{ item.projectName }}</text>
						</view>
						<view class="row">
							<text class="label">下单时间：</text>
							<text class="val">{{ item.createTime }}</text>
						</view>
					</view>

					<view class="order-footer">
						<view class="price">¥ {{ item.price }}</view>
						<view class="actions">
							<template v-if="item.status === 1">
								<u-button text="取消订单" size="mini" shape="circle" plain customStyle="margin-right: 10rpx;"></u-button>
								<u-button text="转单" size="mini" shape="circle" color="#f56c6c"></u-button>
							</template>
							<template v-else-if="item.status === 3">
								<u-button text="拒绝退款" size="mini" shape="circle" color="#f56c6c" customStyle="margin-right: 10rpx;"></u-button>
								<u-button text="同意退款" size="mini" shape="circle" color="#1ecbc3"></u-button>
							</template>
						</view>
					</view>
				</view>
				
			</z-paging>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 模拟数据
				userInfo: {
					name: '郭丽丽',
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					address: '山西省太原市古交市东曲街道...'
				},
				stats: {
					orderCount: 12,
					onlineHours: 3.55,
					revenue: '21893.98',
					balance: '3324.9',
					withdrawable: '8127.43'
				},
				functionList: [
					{ title: '订单', icon: 'order' },
					{ title: '设置免车费', icon: 'car' },
					{ title: '编辑资料', icon: 'edit-pen' },
					{ title: '我的分销码', icon: 'scan' },
					{ title: '合同签订', icon: 'file-text' }
				],
				tabList: [
					{ name: '全部' }, { name: '进行中' }, { name: '已完成' }, 
					{ name: '待付款' }, { name: '已取消' }, { name: '售后' }
				],
				currentTab: 0,
				dataList: []
			}
		},
		// 必须监听：页面滚动和触底，传递给 z-paging
		onPageScroll(e) {
			// 如果你的 z-paging 版本较新，且开启了 use-page-scroll，通常它会自动监听
			// 但显式调用更安全，用于处理回到顶部等功能
			this.$refs.paging && this.$refs.paging.updatePageScroll(e);
		},
		onReachBottom() {
			// 页面触底时，通知 z-paging 加载更多
			this.$refs.paging && this.$refs.paging.pageReachBottom();
		},
		methods: {
			changeTab(item) {
				this.currentTab = item.index;
				this.$refs.paging.reload();
			},
			queryList(pageNo, pageSize) {
				// 模拟请求
				setTimeout(() => {
					const list = [];
					for(let i = 0; i < 5; i++) {
						const statusType = (i % 3) + 1;
						list.push({
							id: i,
							serviceDate: '今天10:00-11:00',
							status: statusType,
							statusText: ['待接单', '已接单', '退款申请中'][statusType-1],
							customerName: '陈思成',
							projectName: '泰式 · 王室古法SPA',
							createTime: '2025-09-14 12:08',
							price: '493.4'
						});
					}
					this.$refs.paging.complete(list);
				}, 1000);
			},
			getStatusClass(status) {
				return 'text-blue';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		min-height: 100vh;
		background-color: #F6F7F9;
		position: relative;
		/* 防止外边距塌陷 */
		padding-top: 1rpx; 
		padding-bottom: 40rpx;
	}

	/* 背景渐变 - 固定在最底层 */
	.top-bg-gradient {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 400rpx;
		background: linear-gradient(to bottom, #dffbf9 0%, #F6F7F9 100%);
		z-index: 0;
	}

	/* 头部内容 - 相对定位，层级高于背景 */
	.header-content {
		position: relative;
		z-index: 1;
		padding: 0 20rpx;
	}

	.card {
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.02);
		padding: 30rpx;
	}

	/* 个人信息 */
	.profile-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
		.profile-left {
			display: flex;
			align-items: center;
			.info {
				margin-left: 20rpx;
				.name { font-size: 32rpx; font-weight: bold; margin-right: 10rpx; }
				.address { font-size: 24rpx; color: #999; }
			}
		}
	}

	/* 数据统计 */
	.stats-card {
		padding: 30rpx 20rpx;
		.stats-row {
			display: flex;
			justify-content: space-between;
			.stat-item {
				flex: 1;
				text-align: center;
				.label { font-size: 24rpx; color: #666; margin-bottom: 8rpx; }
				.value { font-size: 32rpx; font-weight: bold; }
				.unit { font-size: 22rpx; color: #999; margin-left: 4rpx; }
				.green { color: #1ecbc3; }
				.orange { color: #ff9900; }
			}
		}
		.bottom-row {
			align-items: center;
			.stat-btn { flex: 1; display: flex; justify-content: flex-end; }
		}
	}

	/* 状态栏 */
	.status-card {
		.status-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #999;
		}
	}

	/* 功能宫格 */
	.function-card {
		padding: 10rpx 0;
		.grid-text { font-size: 24rpx; color: #666; margin-top: 14rpx; }
	}

	/* Tabs */
	.tabs-container {
		background-color: #F6F7F9;
		padding-bottom: 10rpx;
		z-index: 99; /* 保证吸顶时在列表上方 */
	}

	/* 列表区域 */
	.list-container {
		position: relative;
		z-index: 1;
		padding: 0 20rpx;
	}

	.order-item {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.order-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			font-size: 30rpx;
			font-weight: bold;
			.text-blue { color: #5ac8fa; font-weight: normal; font-size: 28rpx;}
		}
		.order-content {
			margin-bottom: 20rpx;
			.row {
				display: flex;
				margin-bottom: 10rpx;
				font-size: 26rpx;
				.label { color: #999; width: 150rpx; }
				.val { color: #666; }
			}
		}
		.order-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1rpx solid #f5f5f5;
			padding-top: 20rpx;
			.price { color: #fa3534; font-size: 36rpx; font-weight: bold; }
			.actions { display: flex; }
		}
	}
</style>