<template>
	<view class="fe-bottom-sheet" :class="{ 'fe-bottom-sheet--active': active }">
		<view class="fe-sheet-handle" />
		<view class="fe-sheet-header">
			<view class="fe-sheet-title">
				📈 进度总览
				<text v-if="items.length > 1" class="fe-conv-progress-hint">左右滑动切换</text>
			</view>
		</view>

		<view v-if="loading" class="fe-progress-empty">
			<text class="fe-progress-empty__text">加载会话进度中...</text>
		</view>
		<view v-else-if="loadError" class="fe-progress-empty">
			<text class="fe-progress-empty__text">{{ loadError }}</text>
			<view class="fe-biz-btn fe-biz-btn--primary fe-conv-progress-retry" @tap="loadData">重新加载</view>
		</view>
		<view v-else-if="!items.length" class="fe-progress-empty">
			<text class="fe-progress-empty__text">当前会话暂无登记进度</text>
			<text class="fe-progress-empty__sub">确认方案并生成登记批次后可在此查看</text>
		</view>
		<block v-else>
			<swiper
				class="fe-progress-swiper"
				:style="{ height: swiperHeight + 'px' }"
				:current="currentIndex"
				:indicator-dots="false"
				@change="onSwiperChange"
			>
				<swiper-item v-for="(item, idx) in items" :key="item.msgKey">
					<scroll-view
						scroll-y
						class="fe-progress-swiper__scroll"
						:style="{ height: swiperHeight + 'px' }"
						:show-scrollbar="false"
					>
						<view class="fe-sheet-body__inner">
							<view class="fe-sheet-source">{{ itemSubtitle(item, idx) }}</view>
							<view class="fe-stat-grid">
								<view class="fe-stat-box">
									<view class="fe-stat-box__num fe-stat-box__num--warning">{{ item.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">{{ item.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">{{ item.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">{{ item.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">{{ item.progress.text }}</text>
							</view>
							<view class="fe-progress-track">
								<view class="fe-progress-fill" :style="{ width: item.progress.percent + '%' }" />
							</view>
							<text class="fe-section-heading fe-section-heading--solo">办理流程</text>
							<view
								v-for="step in item.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="refreshByIndex(idx)">
									<text class="fe-section-refresh__icon">↻</text>
									<text>刷新</text>
								</view>
							</view>
							<view v-if="!item.workers.length" class="fe-progress-empty fe-progress-empty--inline">
								<text class="fe-progress-empty__text">暂无登记人员</text>
							</view>
							<view v-for="p in item.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>
				</swiper-item>
			</swiper>
			<view v-if="items.length > 1" class="fe-progress-dots">
				<view
					v-for="(d, di) in items"
					:key="d.msgKey"
					class="fe-progress-dot"
					:class="{ 'fe-progress-dot--active': di === currentIndex }"
				/>
			</view>
		</block>

		<view class="fe-sheet-footer">
			<view class="fe-btn fe-btn--secondary fe-btn--lg" @tap="loadData">查看全部</view>
			<view class="fe-btn fe-btn--primary fe-btn--lg" @tap="onUrge">催办未登记</view>
		</view>
	</view>
</template>

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

export default {
	name: 'FeConversationProgressSheet',
	props: {
		active: { type: Boolean, default: false },
		conversationId: { type: [Number, String], default: null }
	},
	data() {
		return {
			loading: false,
			loadError: '',
			items: [],
			currentIndex: 0,
			// 小程序 swiper 必须给明确 px 高度；复用查看进度内容区约 60vh
			swiperHeight: Math.floor((uni.getSystemInfoSync().windowHeight || 600) * 0.6)
		}
	},
	watch: {
		active(val) {
			if (val) {
				this.syncSwiperHeight()
				this.loadData()
			}
		},
		conversationId() {
			if (this.active) this.loadData()
		}
	},
	methods: {
		syncSwiperHeight() {
			try {
				const h = uni.getSystemInfoSync().windowHeight || 600
				this.swiperHeight = Math.floor(h * 0.6)
			} catch (e) {
				this.swiperHeight = 400
			}
		},
		itemSubtitle(item, idx) {
			const base = (item && (item.subtitle || item.title)) || '用工批次'
			if (this.items.length <= 1) return base
			return `${base}（${idx + 1}/${this.items.length}）`
		},
		async loadData() {
			const conversationId = this.conversationId
			if (conversationId == null || conversationId === '') {
				this.items = []
				this.loadError = '请先开启对话'
				return
			}
			this.loading = true
			this.loadError = ''
			try {
				const list = await listConversationDraftRegistrationProgress(conversationId, { showError: false })
				const arr = Array.isArray(list) ? list : []
				this.items = arr.map((raw, i) => {
					const detail = mapRegistrationBatchDetail(raw)
					const draftId = detail.draftId != null ? detail.draftId : (raw.draft_id != null ? raw.draft_id : i)
					return Object.assign({}, detail, {
						msgKey: draftId,
						draftId
					})
				})
				this.currentIndex = 0
			} catch (e) {
				this.items = []
				this.loadError = (e && (e.msg || e.message)) || '进度加载失败'
				showToast(this.loadError)
			} finally {
				this.loading = false
			}
		},
		onSwiperChange(e) {
			const idx = e && e.detail && e.detail.current != null ? e.detail.current : 0
			this.currentIndex = idx
		},
		refreshByIndex(idx) {
			this.loadData().then(() => {
				const max = Math.max(0, this.items.length - 1)
				this.currentIndex = Math.max(0, Math.min(max, idx))
				showToast('已刷新')
			})
		},
		onUrge() {
			showToast('已发送催办')
		}
	}
}
</script>

<style lang="scss" scoped>
/* swiper 高度由 :style 像素值控制，勿挂 fe-sheet-body（flex:1 会导致高度为 0） */
.fe-progress-swiper {
	width: 100%;
	flex-shrink: 0;
	box-sizing: border-box;
}

.fe-progress-swiper__scroll {
	width: 100%;
	box-sizing: border-box;
}

.fe-conv-progress-hint {
	margin-left: 12rpx;
	font-size: 22rpx;
	color: #94A3B8;
	font-weight: 500;
}

.fe-conv-progress-retry {
	margin: 28rpx auto 0;
	display: inline-flex;
}

.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-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12rpx;
	padding: 8rpx 0 4rpx;
}

.fe-progress-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	background: #E2E8F0;
}

.fe-progress-dot--active {
	width: 28rpx;
	border-radius: 999rpx;
	background: $fe-primary;
}

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

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

.fe-progress-empty__text {
	display: block;
	font-size: 28rpx;
	color: #94A3B8;
	line-height: 1.5;
}

.fe-progress-empty__sub {
	display: block;
	margin-top: 12rpx;
	font-size: 24rpx;
	color: #94A3B8;
}
</style>
