<route lang="jsonc" type="page">{
	"layout": "tabbar",
	"style": {
		"navigationStyle": "custom"
	}
}</route>


<template>
	<view class="page-container pb-120rpx">
		<wd-navbar safe-area-inset-top :bordered="false" custom-style="background-color: transparent !important;" fixed>
			<template #left>
				<view class="ml-16rpx flex items-center" />
			</template>
			<template #right>
				<view class="right-slot mr-16rpx flex items-center">
					<!-- 消息图标（带红点） -->
					<view class="nav-icon-item relative mr-30rpx" @click="router.navigateTo('/bundle/notice/notice')">
						<wd-img :src="`${OSS}icon/icon_notify.png`" width="36rpx" height="36rpx"></wd-img>
						<view class="message-dot absolute right-6rpx top-10rpx h-16rpx w-16rpx border-2rpx border-[#fff] rounded-full border-solid bg-[#FF0000]" />
						<text
							class="icon-label text-20rpx text-[#606266] top-20rpx">
							消息
						</text>
					</view>
					<!-- 设置图标 -->
					<view class="nav-icon-item relative mr-24rpx" @click="router.navigateTo('/bundle/store/setting')">
						<wd-img :src="`${OSS}icon/icon_setting.png`" width="36rpx" height="36rpx"></wd-img>
						<text
							class="icon-label text-20rpx text-[#606266] top-20rpx">
							设置
						</text>
					</view>
				</view>
			</template>
		</wd-navbar>

		<!-- 顶部背景区域 -->
		<view class="top-bg fixed left-0 top-0 w-[100%] h-500rpx"
			:style="{ backgroundImage: `url('${OSS}images/chayishi/profile_bg.png')` }">
			
		</view>

		<view class="content-wrapper" :style="{ paddingTop: `${navbarHeight}px` }">
			<!-- 个人资料区域 -->
			<view class="profile-section px-30rpx pb-30rpx pt-40rpx">
				<view class="flex items-center">
					<!-- 头像 -->
					<view class="avatar-wrapper">
						<wd-img width="120rpx" height="120rpx" :src="`${OSS}images/chayishi/avatar.png`"
							mode="aspectFill" round />
					</view>
					<!-- 昵称和账号 -->
					<view class="ml-22rpx flex-1" @click="router.navigateTo('/bundle/profile/profile')">
						<view class="flex items-center">
							<text class="nickname text-36rpx text-[#303133] font-bold leading-50rpx">Jasmine</text>
							<view>
								<wd-icon name="arrow-right" size="24rpx" color="#303133" class="ml-8rpx" />
							</view>
						</view>
						<view class="mt-8rpx text-24rpx text-[#303133] leading-34rpx">
							账号: 152****3412
						</view>
					</view>
				</view>
			</view>

			<!-- 钱包卡片区域 -->
			<view class="wallet-card relative mx-30rpx mt-30rpx overflow-hidden rounded-24rpx px-30rpx py-10rpx"
				:style="{ backgroundImage: `url('${OSS}images/chayishi/withdraw.png')` }">
				<!-- 钱包标题和图标 -->
				<view class="mb-32rpx flex items-center justify-between">
					<view class="flex items-center">
						<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/chayishi/wallet.png`"
							class="mr-12rpx" />
						<text class="text-30rpx text-[#303133] font-bold">我的钱包</text>
					</view>
					<!-- 提现按钮 -->
					<view class="withdraw-btn mt-8rpx rounded-8rpx bg-[#FF0000] px-24rpx py-6rpx"
						@click="router.navigateTo('/bundle/wallet/wallet')">
						<text class="text-24rpx text-[#fff] font-medium">去提现</text>
					</view>
				</view>
				<!-- 金额信息 -->
				<view class="wallet-amounts flex items-center justify-between">
					<!-- 可提现金额 -->
					<view class="flex-1 text-center">
						<view class="">
							<price-format color="#000000" :first-size="32" :second-size="32" :subscript-size="20" :price="23.02"></price-format>
						</view>
						<view class="mt-8rpx text-24rpx text-[#909399] leading-34rpx">
							可提现金额
						</view>
					</view>
					<!-- 不可提现金额 -->
					<view class="flex-1 text-center">
						<view>
							<price-format color="#000000" :first-size="32" :second-size="32" :subscript-size="20" :price="23.02"></price-format>
						</view>
						<view class="mt-8rpx text-24rpx text-[#909399] leading-34rpx">
							不可提现金额
						</view>
					</view>
				</view>
				<!-- 装饰性金币图标（预留位置，右侧散落） -->
				<view class="coin-decoration absolute right-20rpx top-30rpx">
					<wd-img width="120rpx" height="120rpx" :src="`${OSS}images/my/coin_decor.png`" class="opacity-40" />
				</view>
			</view>

			<!-- 上班安排区域 -->
			<view :style="{
				backgroundImage: `url('${OSS}images/chayishi/richeng.png')`,
				backgroundSize: 'contain',
				backgroundRepeat: 'no-repeat',
				backgroundPosition: 'center top',
			}" class="work-schedule-card mx-30rpx mt-30rpx rounded-24rpx bg-white p-30rpx">
				<!-- 标题和免费出行按钮 -->
				<view class="mb-24rpx flex items-center justify-between">
					<view class="flex items-center">
						<wd-img width="32rpx" height="32rpx" :src="`${OSS}images/chayishi/work_task.png`"
							class="mr-12rpx" />
						<text class="text-32rpx text-[#303133] font-bold">上班安排</text>
					</view>
					<view @click="My.handleFreeTravel">
						<wd-img width="180rpx" height="64rpx" :src="`${OSS}images/chayishi/free_go.png`"
							class="mr-12rpx" />
					</view>
				</view>
				<!-- 服务方式 -->
				<view class="schedule-item mb-20rpx flex items-center">
					<text class="label-text w-140rpx text-24rpx text-[#606266] leading-40rpx">服务方式:</text>
					<view class="flex flex-1 items-center">
						<view class="mr-16rpx flex items-center">
							<wd-img width="24rpx" height="24rpx" :src="`${OSS}images/chayishi/right.png`" />
							<text class="text-24rpx leading-34rpx">上门服务</text>
						</view>
						<view class="flex items-center">
							<wd-img width="24rpx" height="24rpx" :src="`${OSS}images/chayishi/right.png`" />
							<text class="text-24rpx leading-34rpx">到店服务</text>
						</view>
					</view>
				</view>
				<!-- 工作日 -->
				<view class="schedule-item mb-20rpx flex items-center">
					<text class="label-text w-140rpx text-24rpx text-[#606266] leading-40rpx">工作日:</text>
					<text class="flex-1 text-24rpx text-[#303133] leading-40rpx">周一,周二,周三,周四,周五,周六</text>
				</view>
				<!-- 工作时间 -->
				<view class="schedule-item mb-20rpx flex items-center">
					<text class="label-text w-140rpx text-24rpx text-[#606266] leading-40rpx">工作时间:</text>
					<text class="flex-1 text-24rpx text-[#303133] leading-40rpx">08:00~20:00</text>
				</view>
				<!-- 住址 -->
				<view class="schedule-item flex items-start">
					<text class="label-text w-140rpx pt-4rpx text-24rpx text-[#606266] leading-40rpx">住址:</text>
					<text class="flex-1 text-24rpx text-[#303133] leading-40rpx">上海浦东新区新金桥路58号新银东大厦15楼F室</text>
				</view>	
				<!-- 上下班状态 -->
				<view class="schedule-item flex items-center mt-20rpx">
					<view class="label-text w-140rpx pt-4rpx text-24rpx text-[#606266] leading-40rpx">上下班:</view>
					<view class="flex items-center">
						<view class="mt-20rpx">
							<wd-switch v-model="isWork" size="32rpx" active-color="#4C9F44"/>
						</view>
						<view class="text-28rpx text-[#606266] mt-6rpx font-bold ml-10rpx">{{ isWork ? '上班中' : '已下班' }}</view>
					</view>

				</view>
			</view>

			<!-- 更多服务区域 -->
			<view class="more-services-section mx-30rpx mt-30rpx rounded-24rpx bg-white p-30rpx">
				<text class="mb-24rpx block text-32rpx text-[#303133] font-bold leading-44rpx">更多服务</text>
				<view class="services-grid grid grid-cols-4 gap-10rpx">
					<!-- 个人介绍 -->
					<view class="service-item flex flex-col items-center" @click="My.handleServiceClick('profile')">
						<view
							class="service-icon-wrapper h-96rpx w-96rpx flex items-center justify-center rounded-16rpx bg-[#FFFFFF]">
							<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/chayishi/person_introduce.png`" />
						</view>
						<text class="text-24rpx text-[#303133] leading-34rpx">个人介绍</text>
					</view>
					<!-- 服务方式 -->
					<view class="service-item flex flex-col items-center" @click="My.handleServiceClick('service')">
						<view
							class="service-icon-wrapper h-96rpx w-96rpx flex items-center justify-center rounded-16rpx bg-[#FFFFFF]">
							<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/chayishi/cooperate.png`" />
						</view>
						<text class="text-24rpx text-[#303133] leading-34rpx">服务方式</text>
					</view>
					<!-- 工作时间 -->
					<view class="service-item flex flex-col items-center" @click="My.handleServiceClick('worktime')">
						<view
							class="service-icon-wrapper h-96rpx w-96rpx flex items-center justify-center rounded-16rpx bg-[#FFFFFF]">
							<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/chayishi/work_time.png`" />
						</view>
						<text class="text-24rpx text-[#303133] leading-34rpx">工作时间</text>
					</view>
					<!-- 位置更新 -->
					<view class="service-item flex flex-col items-center" @click="router.navigateTo('/bundle/address/list')">
						<view
							class="service-icon-wrapper h-96rpx w-96rpx flex items-center justify-center rounded-16rpx bg-[#FFFFFF]">
							<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/chayishi/location_update.png`" />
						</view>
						<text class="text-24rpx text-[#303133] leading-34rpx">位置更新</text>
					</view>
					<!-- 收入统计 -->
					<view class="service-item flex flex-col items-center" @click="router.navigateTo('/bundle/finance/finance')">
						<view
							class="service-icon-wrapper h-96rpx w-96rpx flex items-center justify-center rounded-16rpx bg-[#FFFFFF]">
							<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/chayishi/income.png`" />
						</view>
						<text class="text-24rpx text-[#303133] leading-34rpx">收入统计</text>
					</view>
					<!-- 上传资料 -->
					<view class="service-item flex flex-col items-center" @click="My.handleServiceClick('upload')">
						<view
							class="service-icon-wrapper h-96rpx w-96rpx flex items-center justify-center rounded-16rpx bg-[#FFFFFF]">
							<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/chayishi/data.png`" />
						</view>
						<text class="text-24rpx text-[#303133] leading-34rpx">上传资料</text>
					</view>
					<!-- 行程记录 -->
					<view class="service-item flex flex-col items-center" @click="My.handleServiceClick('record')">
						<view
							class="service-icon-wrapper h-96rpx w-96rpx flex items-center justify-center rounded-16rpx bg-[#FFFFFF]">
							<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/chayishi/path_record.png`" />
						</view>
						<text class="text-24rpx text-[#303133] leading-34rpx">行程记录</text>
					</view>
					<!-- 分销赚钱 -->
					<view class="service-item flex flex-col items-center"
						@click="My.handleServiceClick('distribution')">
						<view
							class="service-icon-wrapper relative h-96rpx w-96rpx flex items-center justify-center rounded-16rpx bg-[#FFFFFF]">
							<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/chayishi/earn_money.png`" />
							<!-- 角标 -->
							<view
								class="distribution-badge absolute right-8rpx top-8rpx flex items-center justify-center rounded-4rpx bg-[#FF0000] px-4rpx py-1rpx">
								<text class="text-16rpx text-[#fff] font-medium leading-18rpx">赚钱</text>
							</view>
						</view>
						<text class="text-24rpx text-[#303133] leading-34rpx">分销赚钱</text>
					</view>
				</view>
			</view>

			<!-- 底部留白 -->
			<view class="pb-40rpx" />
		</view>
	</view>
</template>

<script lang="ts" setup>
import { router } from '@/utils/tools'

const OSS = inject('OSS')
const navbarHeight = inject('navbarHeight')
const rightPadding = inject('capsuleOffset')

// 上下班切换
const isWork = ref<boolean>(true)

// 模拟是否有个人信息（静态页面，后续可以替换为实际的API判断）
const hasProfileInfo = ref(true) // 改为 false 可以测试跳转到填写页面

const My = {
	// 跳转到消息页面
	handleToMessage: () => {
		// TODO: 跳转到消息页面
		console.log('跳转到消息页面')
	},

	// 跳转到设置页面
	handleToSettings: () => {
		// TODO: 跳转到设置页面
		console.log('跳转到设置页面')
	},

	// 跳转到个人信息
	handleToProfile: () => {
		// TODO: 跳转到个人信息页面
		console.log('跳转到个人信息页面')
	},

	// 跳转到提现页面
	handleToWithdraw: () => {
		// TODO: 跳转到提现页面
		console.log('跳转到提现页面')
	},

	// 免费出行
	handleFreeTravel: () => {
		// TODO: 免费出行功能
		console.log('免费出行')
	},

	// 服务点击事件
	handleServiceClick: (type: string) => {
		if (type === 'profile') {
			// 如果有个人信息，跳转到展示页面；否则跳转到填写页面
			if (hasProfileInfo.value) {
				router.navigateTo('/pages/my/profile-display')
			}
			else {
				router.navigateTo('/pages/my/profile-edit')
			}
		}
		else if (type === 'service') {
			// 跳转到服务方式页面
			router.navigateTo('/pages/my/service-method')
		}
		else if (type === 'worktime') {
			// 跳转到工作时间页面
			router.navigateTo('/pages/my/work-time')
		}
		else if (type === 'upload') {
			// 跳转到上传资料页面
			router.navigateTo('/pages/my/upload-data')
		}
		else if (type === 'record') {
			// 跳转到行程记录页面
			router.navigateTo('/pages/my/travel-record')
		}
		else {
			// TODO: 根据类型跳转到对应页面
			console.log('点击服务:', type)
		}
	},
}
</script>


<style lang="scss">
page {
	background: #f5f7fa;
}

.page-container {
	min-height: 100vh;
	background: #f5f7fa;
}

.top-bg {
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: top center;
	min-height: 450rpx;
	z-index: 1;
}

.content-wrapper {
	position: relative;
	z-index: 10;
}

.profile-section {
	position: relative;
	z-index: 10;
}

.right-slot {
	padding-right: v-bind(rightPadding);

	.nav-icon-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 60rpx;

		.icon-label {
			position: absolute;
			bottom: -32rpx;
			left: 50%;
			transform: translateX(-50%);
			white-space: nowrap;
		}
	}
}

.wallet-card {
	background-color: #ffb347;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	min-height: 240rpx;
	position: relative;

	.withdraw-btn {
		box-shadow: 0 4rpx 8rpx rgba(255, 0, 0, 0.2);
	}

	.wallet-amounts {
		position: relative;
		z-index: 2;
		margin-top: 50rpx;
	}

	.coin-decoration {
		pointer-events: none;
		z-index: 1;
	}
}

.work-schedule-card {
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

	.free-travel-btn {
		box-shadow: 0 4rpx 8rpx rgba(7, 193, 96, 0.2);
	}

	.schedule-item {
		.service-tag {
			border: 1rpx solid #07c160;
		}
	}
}

.more-services-section {
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

	.services-grid {
		.service-item {
			cursor: pointer;

			.service-icon-wrapper {
				transition: all 0.3s;

				&:active {
					transform: scale(0.95);
					background-color: #e5e7eb;
				}
			}
		}
	}
}
</style>
