<template>
	<view class="fe-page job-offer-page">
		<FeMpNavBar title="用工邀请" @back="goBack" />

		<scroll-view scroll-y class="page-scroll" :show-scrollbar="false">
			<view class="page-body">
				<view v-if="loading" class="offer-status">
					<text class="offer-status__text">正在加载用工信息...</text>
				</view>
				<template v-else>
					<view class="offer-hero">
						<text class="offer-hero__eyebrow">扫码登记</text>
						<text class="offer-hero__title">{{ offer.title }}</text>
						<text v-if="offer.enterpriseName" class="offer-hero__corp">{{ offer.enterpriseName }}</text>
						<text v-if="offer.batchId" class="offer-hero__batch">批次 {{ offer.batchId }}</text>
					</view>

					<view class="offer-section">
						<view class="offer-section__title">用工信息</view>
						<view class="offer-row">
							<text class="offer-row__label">岗位类型</text>
							<text class="offer-row__value">{{ offer.workType }}</text>
						</view>
						<view class="offer-row">
							<text class="offer-row__label">工作地点</text>
							<text class="offer-row__value">{{ offer.workLocation }}</text>
						</view>
						<view class="offer-row">
							<text class="offer-row__label">工作天数</text>
							<text class="offer-row__value">{{ workDaysText }}</text>
						</view>
						<view class="offer-row">
							<text class="offer-row__label">计划人数</text>
							<text class="offer-row__value">{{ workerCountText }}</text>
						</view>
						<view class="offer-row">
							<text class="offer-row__label">日薪标准</text>
							<text class="offer-row__value">{{ dailyWageText }}</text>
						</view>
						<view class="offer-row">
							<text class="offer-row__label">结算方式</text>
							<text class="offer-row__value">{{ offer.settlementModeLabel || '待确认' }}</text>
						</view>
					</view>

					<view class="offer-pay">
						<text class="offer-pay__label">预估到手</text>
						<text class="offer-pay__amount">{{ offer.netPayText || '—' }}</text>
						<text class="offer-pay__hint">{{ offer.hint }}</text>
						<text v-if="offer.schemeTitle" class="offer-pay__scheme">结算方案：{{ offer.schemeTitle }}</text>
					</view>

					<view class="offer-tips">
						<text class="offer-tips__title">申请说明</text>
						<text class="offer-tips__item">1. 点击下方「申请加入」填写实名与银行卡信息</text>
						<text class="offer-tips__item">2. 企业确认后即可参与本次用工</text>
						<text class="offer-tips__item">3. 请确保本人信息真实有效，便于结算到账</text>
					</view>
				</template>
			</view>
		</scroll-view>

		<view class="offer-footer">
			<view
				class="fe-btn fe-btn--primary fe-btn--lg fe-btn--full"
				:class="{ 'fe-btn--disabled': applying || loading }"
				@tap="onApply"
			>{{ applying ? '处理中...' : '申请加入' }}</view>
		</view>
	</view>
</template>

<script>
import FeMpNavBar from '@/components/FeMpNavBar.vue'
import store from '@/common/store.js'
import { showToast } from '@/common/chat-data.js'
import { getDraftDetail } from '@/api/draft.js'
import {
	loadJobOffer,
	parseJobOfferQuery,
	mergeJobOffer,
	getDemoJobOffer,
	saveJobOffer,
	resolveDraftIdFromQuery,
	buildJobOfferFromDraftDetail,
	buildJobOfferShareMessage
} from '@/utils/job-offer.js'

export default {
	components: { FeMpNavBar },
	data() {
		return {
			offer: getDemoJobOffer(),
			loading: false,
			applying: false,
			pageQuery: {}
		}
	},
	computed: {
		workDaysText() {
			return this.offer.workDays != null ? `${this.offer.workDays} 天` : '待确认'
		},
		workerCountText() {
			return this.offer.workerCount != null ? `${this.offer.workerCount} 人` : '待确认'
		},
		dailyWageText() {
			return this.offer.dailyWage != null ? `${this.offer.dailyWage} 元/天` : '待确认'
		}
	},
	onLoad(options) {
		this.pageQuery = options || {}
		this.hydrateOffer(this.pageQuery)
	},
	onShareAppMessage() {
		return buildJobOfferShareMessage(this.offer)
	},
	methods: {
		async hydrateOffer(query) {
			const fromQuery = parseJobOfferQuery(query)
			const draftId = resolveDraftIdFromQuery(query)
			const cached = loadJobOffer(draftId)
			const demo = getDemoJobOffer(draftId)
			this.offer = mergeJobOffer(demo, cached, fromQuery)

			if (draftId == null) {
				saveJobOffer(this.offer)
				return
			}

			this.loading = true
			try {
				const detail = await getDraftDetail(draftId, { showError: false })
				const fromApi = buildJobOfferFromDraftDetail(detail, {
					enterpriseName: (store.getState().enterprise && store.getState().enterprise.name) || ''
				})
				if (fromApi) {
					this.offer = mergeJobOffer(this.offer, fromApi, { draftId })
					saveJobOffer(this.offer)
				}
			} catch (e) {
				showToast((e && (e.msg || e.message)) || '用工信息加载失败')
			} finally {
				this.loading = false
			}
		},
		goBack() {
			const pages = getCurrentPages()
			if (pages.length > 1) {
				uni.navigateBack()
				return
			}
			uni.reLaunch({ url: '/packageA/auth/login?role=worker' })
		},
		buildReturnUrl() {
			const draftId = this.offer.draftId != null ? this.offer.draftId : ''
			return `/pages/worker/job-offer?draftId=${encodeURIComponent(draftId)}`
		},
		goWorkerLogin(returnUrl) {
			uni.navigateTo({
				url: `/packageA/auth/login?role=worker&redirect=${encodeURIComponent(returnUrl)}`
			})
		},
		onApply() {
			if (this.applying || this.loading) return
			this.applying = true
			try {
				saveJobOffer(this.offer)
				const draftId = this.offer.draftId != null ? this.offer.draftId : ''
				uni.setStorageSync('fe_pending_job_offer_id', draftId)
				const returnUrl = this.buildReturnUrl()
				const s = store.getState()

				if (!s.loggedIn || s.role !== 'worker') {
					showToast('请先登录临时工账号')
					setTimeout(() => this.goWorkerLogin(returnUrl), 300)
					return
				}
				if (!store.isWorkerRegistered()) {
					uni.navigateTo({
						url: `/packageA/worker/register?draftId=${encodeURIComponent(draftId)}&redirect=${encodeURIComponent(returnUrl)}`
					})
					return
				}

				showToast('申请已提交，等待企业确认')
				setTimeout(() => {
					uni.reLaunch({ url: store.getHomeUrl() })
				}, 600)
			} finally {
				this.applying = false
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.job-offer-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
	box-sizing: border-box;
	background: $fe-bg;
}

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

.page-body {
	padding: 24rpx 40rpx 40rpx;
	padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}

.offer-status {
	padding: 80rpx 24rpx;
	text-align: center;
}

.offer-status__text {
	font-size: 28rpx;
	color: $fe-muted;
}

.offer-hero {
	padding: 28rpx 8rpx 36rpx;
}

.offer-hero__eyebrow {
	display: block;
	font-size: 24rpx;
	font-weight: 600;
	color: $fe-primary;
	margin-bottom: 12rpx;
}

.offer-hero__title {
	display: block;
	font-size: 44rpx;
	font-weight: 700;
	color: $fe-foreground;
	line-height: 1.35;
	margin-bottom: 12rpx;
}

.offer-hero__corp,
.offer-hero__batch {
	display: block;
	font-size: 26rpx;
	color: $fe-muted;
	line-height: 1.5;
}

.offer-section {
	background: $fe-surface;
	border-radius: $fe-radius-lg;
	padding: 28rpx 32rpx;
	margin-bottom: 24rpx;
	border: 1rpx solid $fe-border-light;
}

.offer-section__title {
	font-size: 30rpx;
	font-weight: 700;
	color: $fe-foreground;
	margin-bottom: 8rpx;
}

.offer-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24rpx;
	padding: 18rpx 0;
	border-bottom: 1rpx solid $fe-border-light;
}

.offer-row:last-child {
	border-bottom: none;
}

.offer-row__label {
	flex-shrink: 0;
	font-size: 26rpx;
	color: $fe-muted;
}

.offer-row__value {
	flex: 1;
	text-align: right;
	font-size: 26rpx;
	font-weight: 600;
	color: $fe-foreground;
	word-break: break-all;
}

.offer-pay {
	background: linear-gradient(145deg, #F5F3FF 0%, #EEF2FF 100%);
	border: 1rpx solid $fe-primary-100;
	border-radius: $fe-radius-lg;
	padding: 36rpx 32rpx;
	margin-bottom: 24rpx;
	text-align: center;
}

.offer-pay__label {
	display: block;
	font-size: 26rpx;
	color: $fe-muted;
	margin-bottom: 8rpx;
}

.offer-pay__amount {
	display: block;
	font-size: 56rpx;
	font-weight: 700;
	color: $fe-primary-dark;
	line-height: 1.2;
	margin-bottom: 12rpx;
}

.offer-pay__hint,
.offer-pay__scheme {
	display: block;
	font-size: 22rpx;
	color: $fe-muted;
	line-height: 1.5;
}

.offer-pay__scheme {
	margin-top: 6rpx;
}

.offer-tips {
	padding: 8rpx 8rpx 24rpx;
}

.offer-tips__title {
	display: block;
	font-size: 26rpx;
	font-weight: 700;
	color: $fe-foreground;
	margin-bottom: 12rpx;
}

.offer-tips__item {
	display: block;
	font-size: 24rpx;
	color: $fe-muted;
	line-height: 1.7;
}

.offer-footer {
	flex-shrink: 0;
	padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom));
	background: $fe-surface;
	border-top: 1rpx solid $fe-border-light;
	box-sizing: border-box;
}
</style>
