<template>
	<view class="fe-page fe-page--tab">
		<scroll-view scroll-y class="page-scroll" :show-scrollbar="false">
			<view class="page-body">
			<view class="fe-wallet-header">
				<view class="wallet-header__top">
					<view>
						<view style="font-size:36rpx;font-weight:700;">{{ worker.name }}</view>
						<view style="font-size:26rpx;opacity:0.8;margin-top:4rpx;">{{ worker.phone }}</view>
					</view>
					<view class="wallet-refresh" @tap="onRefresh">↻</view>
				</view>
				<view style="display:inline-flex;align-items:center;gap:8rpx;padding:6rpx 20rpx;border-radius:9999rpx;background:rgba(255,255,255,0.2);font-size:24rpx;font-weight:600;margin-top:16rpx;">✓ 已实名核验</view>
				<view style="margin-top:32rpx;">
					<view style="font-size:26rpx;opacity:0.8;margin-bottom:8rpx;">累计薪资（元）</view>
					<view class="fe-wallet-balance-amount">¥{{ salaryDisplay }}</view>
				</view>
			</view>

			<view class="fe-wallet-section">
				<view style="font-size:28rpx;font-weight:700;padding:28rpx 32rpx 16rpx;">💼 我的钱包</view>
				<view class="fe-wallet-menu-item" @tap="goContracts">
					<view class="fe-profile-menu-icon" style="background:#DBEAFE;">📄</view>
					<view style="flex:1;">
						<view class="fe-profile-menu-title">电子合同</view>
						<view class="fe-profile-menu-desc">{{ contractDesc }}</view>
					</view>
					<text class="wallet-badge">{{ contractBadge }}</text>
					<text style="color:#94A3B8;">›</text>
				</view>
				<view class="fe-wallet-menu-item" @tap="toast('薪资明细详情')">
					<view class="fe-profile-menu-icon" style="background:#D1FAE5;">💰</view>
					<view style="flex:1;"><view class="fe-profile-menu-title">薪资明细</view><view class="fe-profile-menu-desc">累计 ¥3,500</view></view>
					<text style="color:#94A3B8;">›</text>
				</view>
				<view class="fe-wallet-menu-item" @tap="toast('完税证明下载')">
					<view class="fe-profile-menu-icon" style="background:#FEF3C7;">📋</view>
					<view style="flex:1;"><view class="fe-profile-menu-title">完税证明</view><view class="fe-profile-menu-desc">2024年度</view></view>
					<text style="color:#94A3B8;">›</text>
				</view>
			</view>

			<view class="fe-wallet-section">
				<view style="font-size:28rpx;font-weight:700;padding:28rpx 32rpx 16rpx;">📋 我的做工记录</view>
				<view v-for="r in records" :key="r.title" class="fe-wallet-record">
					<view style="width:64rpx;height:64rpx;border-radius:50%;background:#D1FAE5;display:flex;align-items:center;justify-content:center;color:#10B981;">✓</view>
					<view style="flex:1;"><view style="font-weight:600;">{{ r.title }}</view><view style="font-size:24rpx;color:#64748B;">{{ r.meta }}</view></view>
					<view style="font-size:30rpx;font-weight:700;color:#10B981;">{{ r.amount }}</view>
				</view>
			</view>

			<view class="fe-wallet-help">
				<view style="font-size:28rpx;font-weight:700;">💡 有劳资纠纷或疑问？</view>
				<view class="fe-btn fe-btn--primary fe-btn--sm" style="margin-top:16rpx;" @tap="toast('已转接平台客服')">联系平台客服</view>
			</view>
			</view>
		</scroll-view>

		<FeBottomNav current="home" role="worker" />
	</view>
</template>

<script>
import FeBottomNav from '@/packageA/components/FeBottomNav.vue'
import store from '@/common/store.js'
import { WALLET_RECORDS, showToast } from '@/common/chat-data.js'
import { listMyContracts } from '@/api/contract.js'
import { summarizeContracts } from '@/utils/contract.js'

export default {
	name: 'WorkerHome',
	props: {
		active: { type: Boolean, default: true }
	},
	components: { FeBottomNav },
	data() {
		return {
			worker: {},
			records: WALLET_RECORDS,
			salaryDisplay: '0',
			contractTotal: 0,
			contractSigned: 0,
			contractPending: 0,
			contractLoading: false
		}
	},
	computed: {
		contractBadge() {
			if (this.contractLoading) return '...'
			return `${this.contractTotal}份`
		},
		contractDesc() {
			if (this.contractLoading) return '加载中...'
			if (this.contractTotal <= 0) return '暂无合同'
			if (this.contractPending > 0) return `${this.contractPending}份待签署`
			return `${this.contractSigned}份已签署`
		}
	},
	mounted() {
		if (this.active) this.initHome()
	},
	watch: {
		active(val) {
			if (val) this.initHome()
		}
	},
	methods: {
		toast: showToast,
		initHome() {
			this.worker = store.getState().worker
			this.animateSalary()
			this.loadContracts()
		},
		onRefresh() {
			this.loadContracts()
			showToast('已刷新')
		},
		async loadContracts() {
			this.contractLoading = true
			try {
				const list = await listMyContracts({}, { showError: false })
				const summary = summarizeContracts(list)
				this.contractTotal = summary.total
				this.contractSigned = summary.signed
				this.contractPending = summary.pending
			} catch (e) {
				this.contractTotal = 0
				this.contractSigned = 0
				this.contractPending = 0
			} finally {
				this.contractLoading = false
			}
		},
		goContracts() {
			uni.navigateTo({ url: '/packageA/worker/contracts' })
		},
		animateSalary() {
			const target = 3500
			const steps = 30
			let step = 0
			const timer = setInterval(() => {
				step++
				const val = Math.round((step / steps) * target)
				this.salaryDisplay = val.toLocaleString()
				if (step >= steps) clearInterval(timer)
			}, 40)
		}
	}
}
</script>

<style lang="scss" scoped>
.fe-page--tab {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	box-sizing: border-box;
	padding-bottom: calc(#{$fe-h-tabbar} + #{$fe-h-safe-bottom});
}

.page-scroll {
	flex: 1;
	height: 0;
}

.page-body {
	padding: 32rpx;
	padding-bottom: 48rpx;
}

.wallet-header__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24rpx;
}

.wallet-refresh {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36rpx;
	flex-shrink: 0;
}

.wallet-badge {
	font-size: 22rpx;
	font-weight: 700;
	padding: 4rpx 16rpx;
	border-radius: 9999rpx;
	background: #F5F3FF;
	color: #7C3AED;
	flex-shrink: 0;
}
</style>
