<template>
	<view>
		<view class="fe-bottom-sheet" :class="{ 'fe-bottom-sheet--active': active, 'fe-bottom-sheet--elevated': elevated }">
			<view class="fe-sheet-handle" />
			<view class="fe-sheet-header">
				<view class="fe-sheet-title">{{ title }}</view>
			</view>

			<view v-if="loading" class="fe-progress-empty">
				<text class="fe-progress-empty__text">加载中...</text>
			</view>
			<view v-else-if="!detail" class="fe-progress-empty">
				<text class="fe-progress-empty__text">{{ loadError || '暂无登记数据' }}</text>
			</view>
			<scroll-view v-else scroll-y class="fe-sheet-body" :show-scrollbar="false">
				<view class="fe-sheet-body__inner">
					<view class="fe-sheet-source">{{ detail.subtitle || detail.title }}</view>
					<view class="fe-stat-grid">
						<view class="fe-stat-box">
							<view class="fe-stat-box__num fe-stat-box__num--warning">{{ detail.stats.pending }}</view>
							<view class="fe-stat-box__label">待登记</view>
						</view>
						<view class="fe-stat-box">
							<view class="fe-stat-box__num fe-stat-box__num--info">{{ detail.stats.inProgress }}</view>
							<view class="fe-stat-box__label">登记中</view>
						</view>
						<view class="fe-stat-box">
							<view class="fe-stat-box__num fe-stat-box__num--success">{{ detail.stats.completed }}</view>
							<view class="fe-stat-box__label">已完成</view>
						</view>
						<view class="fe-stat-box fe-stat-box--primary">
							<view class="fe-stat-box__num fe-stat-box__num--primary">{{ detail.stats.expected }}</view>
							<view class="fe-stat-box__label">总计</view>
						</view>
					</view>
					<view class="fe-progress-label">
						<text class="fe-progress-label__text">登记进度</text>
						<text class="fe-progress-label__value">{{ detail.progress.text }}</text>
					</view>
					<view class="fe-progress-track">
						<view class="fe-progress-fill" :style="{ width: detail.progress.percent + '%' }" />
					</view>
					<text class="fe-section-heading">人员列表</text>
					<view v-if="!detail.workers.length" class="fe-progress-empty fe-progress-empty--inline">
						<text class="fe-progress-empty__text">暂无登记人员</text>
					</view>
					<view
						v-for="group in detail.workerGroups"
						:key="group.msgKey"
						class="fe-worker-type-group"
					>
						<view class="fe-worker-type-group__head">
							<text class="fe-worker-type-group__title">{{ group.workType }}</text>
							<text class="fe-worker-type-group__count">{{ group.count }}人</text>
						</view>
						<view
							v-for="p in group.workers"
							:key="p.msgKey"
							class="fe-person-item"
						>
							<view class="fe-person-avatar">{{ p.avatarText }}</view>
							<view class="fe-person-info">
								<view class="fe-person-name">{{ p.name }}</view>
								<view class="fe-person-phone">{{ p.phone }}</view>
							</view>
							<text class="fe-person-status" :class="'fe-person-status--' + p.status">{{ p.statusText }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 底部按钮高度占位（无样式色，仅留空） -->
			<view class="fe-progress-footer-spacer" />
		</view>
	</view>
</template>

<script>
import { showToast } from '@/common/chat-data.js'
import { getDraftWorkflowProgress } from '@/api/draft.js'
import { mapRegistrationBatchDetail } from '@/utils/registration-batch.js'

export default {
	name: 'FeProgressSheet',
	props: {
		active: { type: Boolean, default: false },
		elevated: { type: Boolean, default: false },
		draftId: { type: [Number, String], default: null },
		/** 默认人员登记；查看招聘时传「临时工招聘」，内容不变 */
		title: { type: String, default: '人员登记' }
	},
	data() {
		return {
			loading: false,
			loadError: '',
			detail: null
		}
	},
	watch: {
		active(val) {
			if (val) this.loadDetail()
		},
		draftId() {
			if (this.active) this.loadDetail()
		}
	},
	methods: {
		async loadDetail() {
			if (this.draftId == null || this.draftId === '') {
				this.detail = null
				this.loadError = '缺少草稿信息'
				return
			}
			this.loading = true
			this.loadError = ''
			try {
				const raw = await getDraftWorkflowProgress(this.draftId, { showError: false })
				this.detail = mapRegistrationBatchDetail(Object.assign({}, raw, { draft_id: this.draftId }))
			} catch (e) {
				this.detail = null
				this.loadError = (e && (e.msg || e.message)) || '加载失败'
				showToast(this.loadError)
			} finally {
				this.loading = false
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.fe-stat-box__num--warning { color: #F59E0B; }
.fe-stat-box__num--info { color: #6366F1; }
.fe-stat-box__num--success { color: #10B981; }
.fe-stat-box__num--primary { color: #7C3AED; }

.fe-progress-label {
	display: flex;
	justify-content: space-between;
	margin: 24rpx 0 12rpx;
}

.fe-progress-label__text { color: #64748B; }
.fe-progress-label__value { font-weight: 700; color: #7C3AED; }

.fe-section-heading {
	display: block;
	margin: 32rpx 0 20rpx;
	font-size: 28rpx;
	font-weight: 700;
}

.fe-worker-type-group {
	margin-bottom: 16rpx;
}

.fe-worker-type-group__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16rpx 0 8rpx;
}

.fe-worker-type-group__title {
	font-size: 26rpx;
	font-weight: 700;
	color: #334155;
}

.fe-worker-type-group__count {
	font-size: 24rpx;
	color: #94A3B8;
}

.fe-person-info { flex: 1; min-width: 0; }
.fe-person-name { font-weight: 600; }
.fe-person-phone { font-size: 24rpx; color: #64748B; }

.fe-progress-empty {
	padding: 80rpx 32rpx;
	text-align: center;
}

.fe-progress-empty--inline {
	padding: 24rpx 0 40rpx;
}

.fe-progress-empty__text {
	font-size: 28rpx;
	color: #94A3B8;
}

/* 对齐原底部大按钮高度，透明占位 */
.fe-progress-footer-spacer {
	flex-shrink: 0;
	height: 96rpx;
	margin: 24rpx 40rpx calc(24rpx + env(safe-area-inset-bottom));
	background: transparent;
}
</style>
