<template>
	<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">📈 进度管理</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 fe-section-heading--solo">办理流程</text>
				<view
					v-for="step in detail.steps"
					:key="step.key"
					class="fe-timeline-item"
					:class="'fe-timeline-item--' + step.status"
				>
					<view class="fe-timeline-dot" :class="'fe-timeline-dot--' + step.status">
						<text v-if="step.status === 'done'">✓</text>
						<text v-else-if="step.status === 'active'">⏱</text>
					</view>
					<view>
						<view class="fe-timeline-title" :class="{ 'fe-timeline-title--pending': step.status === 'pending' }">
							{{ step.title }}
							<text v-if="step.highlight" class="fe-timeline-highlight">{{ step.highlight }}</text>
						</view>
						<view v-if="step.time" class="fe-timeline-time">{{ step.time }}</view>
					</view>
				</view>
				<view class="fe-section-heading-row">
					<text class="fe-section-heading">人员列表</text>
					<view class="fe-section-refresh" @tap="loadDetail">
						<text class="fe-section-refresh__icon">↻</text>
						<text>刷新</text>
					</view>
				</view>
				<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="p in detail.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>
		</scroll-view>

		<view class="fe-sheet-footer">
			<view class="fe-btn fe-btn--secondary fe-btn--lg" @tap="toast('已查看全部')">查看全部</view>
			<view class="fe-btn fe-btn--primary fe-btn--lg" @tap="toast('已发送催办')">催办未登记</view>
		</view>
	</view>
</template>

<script>
import { showToast } from '@/common/chat-data.js'
import { getRegistrationBatchDetail } from '@/api/registration-batch.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 }
	},
	data() {
		return {
			loading: false,
			loadError: '',
			detail: null
		}
	},
	watch: {
		active(val) {
			if (val) this.loadDetail()
		},
		draftId() {
			if (this.active) this.loadDetail()
		}
	},
	methods: {
		toast: showToast,
		async loadDetail() {
			if (this.draftId == null || this.draftId === '') {
				this.detail = null
				this.loadError = '缺少草稿信息'
				return
			}
			this.loading = true
			this.loadError = ''
			try {
				const raw = await getRegistrationBatchDetail(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--solo {
	display: block;
	margin: 32rpx 0 20rpx;
}

.fe-section-heading-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 32rpx 0 20rpx;
}

.fe-section-heading {
	font-size: 28rpx;
	font-weight: 700;
}

.fe-section-refresh {
	display: inline-flex;
	align-items: center;
	gap: 6rpx;
	font-size: 26rpx;
	font-weight: 600;
	color: $fe-primary;
}

.fe-section-refresh__icon {
	font-size: 32rpx;
	line-height: 1;
}

.fe-timeline-title { font-weight: 600; }
.fe-timeline-time { font-size: 24rpx; color: #94A3B8; }
.fe-timeline-highlight { color: #7C3AED; }

.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;
}
</style>
