<template>
	<view class="page">
		<!-- header -->
		<view class="header-wrap" :style="headerStyle">
			<view class="header-bg"></view>
			<view class="header-inner">
				<image class="avatar" :src="userInfo.avatar || defautAvatar" @tap="sheep.$router.go('/pages/user/info')"></image>
				<view class="user-meta" v-if="userInfo.nickname">
					<!-- <view class="user-name">{{ userInfo.nickname + `(${userInfo.mobile})` }}</view> -->
					<view class="user-name">{{ userInfo.nickname }}</view>
					<view class="user-status" @click="handleStatusToggle">
						<text>
							{{ userInfo.onlineStatus == 0 ? '离线' : (userInfo.onlineStatus ==  1 ? '在线' : '待审核') }}
						</text>
						<uni-icons style="margin-left:10rpx;" type="right" size="13" color="#fff"></uni-icons>
					</view>
				</view>
				<view class="user-meta" v-else>
					<view class="user-name" @tap="login">请登录</view>
				</view>
			</view>
		</view>

		<!-- stats card -->
		<view class="stats-card">
			<view class="stats-row">
				<view class="stats-item">
					<text class="stats-title">今日预计收入（元）</text>
					<text class="stats-value"> {{ formatMoney(todayIncome) }} </text>
					<view class="stats-link" @tap="sheep.$router.go('/pages/user/account/index')">
						我的账户 <uni-icons type="right" size="13"></uni-icons>
					</view>
				</view>
				<view class="stats-item">
					<text class="stats-title">今日完成单量（单）</text>
					<text class="stats-value"> {{ formatMoney(todayOrders) }} </text>
					<view class="stats-link" @tap="sheep.$router.go('/pages/user/order/orderRecord')">
						订单统计 <uni-icons type="right" size="13"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- shortcuts -->
		<view class="shortcuts">
			<view class="shortcut" @tap="sheep.$router.go('/pages/user/attendance/index')">
				<image class="shortcut-icon" src="/static/img/order1.png" mode="aspectFit" />
				<text class="shortcut-text">考勤排班</text>
			</view>
			<view class="shortcut" @tap="sheep.$router.go('/pages/user/salary/salaryManage')">
				<image class="shortcut-icon" src="/static/img/order2.png" mode="aspectFit" />
				<text class="shortcut-text">薪资助手</text>
			</view>
			<view class="shortcut" @tap="sheep.$router.go('/pages/public/setting')">
				<!-- <image class="shortcut-icon" src="/static/img/edit.png" mode="aspectFit" /> -->
				<view class="shortcut-icon">
					<uni-icons type="gear" size="43"></uni-icons>
				</view>
				<text class="shortcut-text">设置</text>
			</view>
		</view>
	</view>

	<s-auth-modal />
	
	<su-popup type="center" :show="showStatusPopup" round="14" :showClose="false">
		<view class="modal-box">
			<view class="modal-body">
				<text class="modal-title">{{ modalTitle }}</text>
				<text v-if="modalMsg" class="modal-msg">{{ modalMsg }}</text>
			</view>
			<view class="modal-footer">
				<view class="modal-btn cancel" @click="cancelConfirm">取消</view>
				<view class="modal-btn confirm" @click="confirmAction">确认</view>
			</view>
		</view>
	</su-popup>
</template>

<script setup>
	import {
		computed,
		ref,
		watch
	} from 'vue';
	import {
		onShow,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import {
	  showAuthModal,
	} from '@/sheep/hooks/useModal';
	import DeliveryApi from '@/sheep/api/member/delivery';

	// 现有 store / 模板数据
	const template = computed(() => sheep.$store('app').template.user);
	const isLogin = computed(() => sheep.$store('user').isLogin);
	const userInfo = computed(() => sheep.$store('user').userInfo);
	
	const showBind = ref(false);
	// 动态 header 内联样式，用于兼容不同平台的状态栏高度
	const headerStyle = ref({});
	const defautAvatar =
		'https://huichibao.oss-cn-guangzhou.aliyuncs.com/1/material/348b8223-8d03-46aa-8836-6757e8beebd2.png';

	// 格式化金额显示
	function formatMoney(val) {
		if (val == null) return '0';
		return (Number(val) || 0).toFixed(1);
	}

	// 微信小程序的“手机号快速验证”
	const getPhoneNumber = async (e) => {
		if (e.detail.errMsg !== 'getPhoneNumber:ok') {
			sheep.$helper.toast('快捷登录失败');
			return;
		}
		let result = await sheep.$platform.useProvider().mobileLogin(e.detail);
		if (result) {
			showBind.value = false;
		}
	};

	// 页面显示时拉取用户信息并填充统计数据（从 store 获取或使用占位）
	onShow(async () => {
		const data = userInfo.value;
		if (data) {
			if (data?.status == 1) {
				console.log("清空缓存");
				uni.clearStorageSync();
			}
		}
		// 兼容处理：读取原生状态栏高度并设置 header 的 padding-top（px）与 CSS 变量 --statusbar（rpx）
		try {
			const sys = uni.getSystemInfoSync();
			const statusBarHeightPx = sys?.statusBarHeight || 0;
			const windowWidth = sys?.windowWidth || 375;
			// 将 px 转为 rpx： rpx = px / windowWidth * 750
			const statusBarHeightRpx = Math.round((statusBarHeightPx / windowWidth) * 750);
			headerStyle.value = {
				paddingTop: statusBarHeightPx + 'px',
				'--statusbar': statusBarHeightRpx + 'rpx'
			};
		} catch (e) {
			// ignore
		}
	});
	// 确认弹框状态（上线/下线/禁止）
	const showStatusPopup = ref(false);
	const confirmType = ref(''); // 'online' | 'offline' | 'forbidden'
	const modalTitle = ref('');
	const modalMsg = ref('');

	// 判断用户是否被禁止接单（兼容多种字段）
	function isUserForbidden() {
		const u = userInfo.value || {};
		return !!(u.forbidden || u.isForbidden || u.forbid || u.forbidReceive || u.disableReceive || u.receive === false);
	}

	// 点击状态：根据当前状态弹不同的确认框
	function handleStatusToggle() {
		const status = userInfo.value.onlineStatus;

		// 在线状态(1) -> 申请离线
		if (status === 1) {
			confirmType.value = 'offline';
			modalTitle.value = '确认申请离线?';
			modalMsg.value = '离线需平台进行核准\n此时无法接单，请留意核准信息';
			showStatusPopup.value = true;
			return;
		}

		// 待审核状态(2) -> 提示等待
		if (status === 2) {
			confirmType.value = 'pending';
			modalTitle.value = '等待平台审核';
			modalMsg.value = '您的申请正在审核中\n请留意审核结果';
			showStatusPopup.value = true;
			return;
		}

		// 离线状态(0) -> 申请上线
		confirmType.value = 'online';
		modalTitle.value = '确认上线?';
		modalMsg.value = '上线后即可开始接单';
		showStatusPopup.value = true;
	}

	function cancelConfirm() {
		showStatusPopup.value = false;
	}

	async function confirmAction() {
		const type = confirmType.value;
		showStatusPopup.value = false;

		try {
			if (type === 'online') {
				// 调用后端接口变更上线状态
				const res = await DeliveryApi.postOnline();
				if (res.code === 0) {
					userInfo.value.onlineStatus = 2; // 变为待审核状态
					sheep.$helper.toast('已提交上线申请，请等待平台核准');
				} else {
					sheep.$helper.toast(res.msg || '上线申请失败');
				}
			} else if (type === 'offline') {
				// 调用后端接口申请离线
				const res = await DeliveryApi.offlineApply();
				if (res.code === 0) {
					userInfo.value.onlineStatus = 0; // 变为离线状态
					sheep.$helper.toast('已提交离线申请，请等待平台核准');
				} else {
					sheep.$helper.toast(res.msg || '离线申请失败');
				}
			} else if (type === 'pending') {
				// 待审核状态，仅提示
				sheep.$helper.toast('请等待平台审核');
			}
		} catch (error) {
			console.error('上下线操作异常:', error);
			sheep.$helper.toast('操作异常，请重试');
		}
	}

	onPullDownRefresh(() => {
		sheep.$store('user').updateUserData();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800);
	});

	onPageScroll(() => {});

	function goBack() {
		uni.navigateBack();
	}

	function login() {
		showAuthModal();
	}
	
</script>

<style scoped>
	.page {
		background: #ffffff;
		min-height: 100vh;
	}

	/* header */
	.header-wrap {
		position: relative;
		/* 适配刘海屏安全区：优先使用 constant/env，兼容小程序与 iOS/Android 安全区 */
		padding-top: constant(safe-area-inset-top);
		padding-top: env(safe-area-inset-top);
	}

	.header-bg {
		/* 背景放置为绝对定位以覆盖安全区（兼容 env/constant 回退与 JS 动态 --statusbar） */
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		/* 背景高度需要包含安全区高度，优先使用 env/constant；最后一行为回退值 */
		height: 250rpx;
		height: calc(250rpx + constant(safe-area-inset-top));
		height: calc(250rpx + env(safe-area-inset-top));
		/* JS 动态变量回退（当 env/constant 不可用时，使用 --statusbar，单位 rpx） */
		height: calc(250rpx + var(--statusbar, 0rpx));
		background: #9ad6f0;
		/* 浅蓝 */
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		z-index: 0;
	}

	.header-inner {
		position: absolute;
		left: 32rpx;
		/* 使用 CSS 变量保证当我们通过 JS 设置 --statusbar 时，内容会相对下移（单位 rpx） */
		top: calc(var(--statusbar, 0rpx) + 40rpx);
		z-index: 1;
		flex-direction: row;
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.6);
	}

	.user-meta {
		margin-left: 20rpx;
	}

	.user-name {
		font-size: 30rpx;
		color: #fff;
		font-weight: 600;
	}

	.user-status {
		margin-top: 8rpx;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);
	}

	.back {
		position: absolute;
		left: 18rpx;
		top: calc(var(--statusbar, 0rpx) + 12rpx);
		z-index: 2;
		color: #fff;
		font-size: 36rpx;
	}

	/* stats card */
	.stats-card {
		padding: 0 24rpx;
		margin-top: 190rpx;
		position: relative;
		z-index: 3;
	}

	.stats-row {
		background: #f6c98b;
		/* 浅橙色 */
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.stats-item {
		width: 48%;
	}

	.stats-title {
		font-size: 24rpx;
		color: #5b4a32;
	}

	.stats-value {
		display: block;
		margin-top: 12rpx;
		font-size: 42rpx;
		color: #222;
		font-weight: 700;
	}

	.stats-link {
		display: block;
		margin-top: 12rpx;
		font-size: 24rpx;
		color: #7a5a3a;
	}

	/* shortcuts */
	.shortcuts {
		margin-top: 30rpx;
		padding: 30rpx 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: relative;
		z-index: 3;
	}

	.shortcut {
		flex: 1;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.shortcut-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 12rpx;
	}

	.shortcut-text {
		font-size: 24rpx;
		color: #333;
	}

	/* popup 原有样式 */
	.popup {
		padding: 80rpx 0 50rpx;
	}

	.tip-text {
		margin-bottom: 30rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 44rpx;
		text-align: center;
	}

	.bind-btn {
		width: 630rpx;
		height: 96rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
		font-style: normal;
		background: #00B85B;
		border-radius: 64rpx 64rpx 64rpx 64rpx;
	}

	/* 确认弹框样式（su-popup 内部内容） */
	.modal-box {
		width: 640rpx;
		background: #fff;
		border-radius: 14rpx;
		overflow: hidden;
	}
	.modal-body {
		padding: 40rpx 30rpx;
		text-align: center;
	}
	.modal-title {
		display: block;
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	.modal-msg {
		display: block;
		font-size: 24rpx;
		color: #999;
		line-height: 34rpx;
		white-space: pre-line;
	}
	.modal-footer {
		display: flex;
		flex-direction: row;
		border-top: 1rpx solid #eee;
	}
	.modal-btn {
		flex: 1;
		padding: 26rpx 0;
		text-align: center;
		font-size: 28rpx;
	}
	.modal-btn.cancel {
		color: #666;
		border-right: 1rpx solid #eee;
	}
	.modal-btn.confirm {
		color: #1e9fff;
	}
</style>