<template>
	<view>
		<view
			class="fe-modal-overlay fe-worker-review-overlay"
			:class="{ 'fe-modal-overlay--active': active }"
			@tap="onClose"
		/>
		<view class="fe-modal fe-worker-review-modal" :class="{ 'fe-modal--active': active }">
			<view class="fe-worker-review-modal__body">
				<view class="fe-worker-review-modal__head">
					<view class="fe-worker-review-modal__avatar">{{ worker.avatarText || '工' }}</view>
					<view class="fe-worker-review-modal__head-text">
						<text class="fe-worker-review-modal__name" user-select>{{ worker.name || '—' }}</text>
						<text
							class="fe-person-status"
							:class="'fe-person-status--' + (worker.status || 'pending')"
						>{{ worker.statusText || '—' }}</text>
					</view>
				</view>

				<view class="fe-worker-review-modal__rows">
					<view class="fe-worker-review-modal__row">
						<text class="fe-worker-review-modal__label">手机号</text>
						<text class="fe-worker-review-modal__value" user-select>{{ worker.phone || '—' }}</text>
					</view>
					<view class="fe-worker-review-modal__row">
						<text class="fe-worker-review-modal__label">工种</text>
						<text class="fe-worker-review-modal__value">{{ worker.workType || '未填写' }}</text>
					</view>
					<view class="fe-worker-review-modal__row">
						<text class="fe-worker-review-modal__label">提交时间</text>
						<text class="fe-worker-review-modal__value">{{ worker.submittedAtText || '—' }}</text>
					</view>
					<view v-if="worker.failReason" class="fe-worker-review-modal__row">
						<text class="fe-worker-review-modal__label">失败原因</text>
						<text class="fe-worker-review-modal__value fe-worker-review-modal__value--danger" user-select>
							{{ worker.failReason }}
						</text>
					</view>
				</view>

				<view v-if="worker.canReview" class="fe-worker-review-modal__reject">
					<text class="fe-worker-review-modal__reject-label">驳回原因（驳回时必填）</text>
					<textarea
						class="fe-worker-review-modal__textarea"
						:value="failReason"
						:disabled="submitting"
						:maxlength="500"
						placeholder="请填写驳回原因"
						@input="onReasonInput"
					/>
				</view>

				<view v-if="worker.canReview" class="fe-worker-review-modal__actions">
					<view
						class="fe-btn fe-btn--secondary fe-btn--lg fe-worker-review-modal__btn"
						:class="{ 'fe-worker-review-modal__btn--disabled': submitting }"
						@tap="onReject"
					>驳回</view>
					<view
						class="fe-btn fe-btn--primary fe-btn--lg fe-worker-review-modal__btn"
						:class="{ 'fe-worker-review-modal__btn--disabled': submitting }"
						@tap="onApprove"
					>审核通过</view>
				</view>
				<view v-else class="fe-worker-review-modal__actions">
					<view class="fe-btn fe-btn--secondary fe-btn--lg fe-worker-review-modal__btn" @tap="onClose">关闭</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { showToast } from '@/common/chat-data.js'
import {
	approveWorkerRegistration,
	rejectWorkerRegistration
} from '@/api/worker-registration.js'

export default {
	name: 'FeWorkerReviewModal',
	props: {
		active: { type: Boolean, default: false },
		worker: {
			type: Object,
			default() {
				return {}
			}
		}
	},
	data() {
		return {
			failReason: '',
			submitting: false
		}
	},
	watch: {
		active(val) {
			if (val) this.failReason = ''
		}
	},
	methods: {
		onClose() {
			if (this.submitting) return
			this.$emit('close')
		},
		onReasonInput(e) {
			this.failReason = (e && e.detail && e.detail.value) || ''
		},
		async onApprove() {
			if (this.submitting) return
			const id = this.worker && this.worker.registrationId
			if (id == null || id === '') {
				showToast('缺少登记信息')
				return
			}
			this.submitting = true
			try {
				const res = await approveWorkerRegistration(id, { showError: true })
				const msg = (res && (res.message || res.msg)) || '审核通过'
				showToast(msg)
				this.$emit('done', { action: 'approve', registrationId: id })
				this.$emit('close')
			} catch (e) {
				// request 已 toast
			} finally {
				this.submitting = false
			}
		},
		async onReject() {
			if (this.submitting) return
			const id = this.worker && this.worker.registrationId
			if (id == null || id === '') {
				showToast('缺少登记信息')
				return
			}
			const reason = String(this.failReason || '').trim()
			if (!reason) {
				showToast('请填写驳回原因')
				return
			}
			this.submitting = true
			try {
				const res = await rejectWorkerRegistration(id, { failReason: reason }, { showError: true })
				const msg = (res && (res.message || res.msg)) || '已驳回'
				showToast(msg)
				this.$emit('done', { action: 'reject', registrationId: id })
				this.$emit('close')
			} catch (e) {
				// request 已 toast
			} finally {
				this.submitting = false
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.fe-worker-review-modal__body {
	padding: 40rpx 36rpx 32rpx;
}

/* 高于 elevated 进度弹层（320），避免审核框被盖住 */
.fe-worker-review-modal.fe-modal {
	z-index: 410;
}

.fe-modal-overlay.fe-worker-review-overlay {
	z-index: 400;
}

.fe-worker-review-modal__head {
	display: flex;
	align-items: center;
	gap: 24rpx;
	margin-bottom: 32rpx;
}

.fe-worker-review-modal__avatar {
	width: 88rpx;
	height: 88rpx;
	border-radius: 50%;
	background: $fe-primary-bg;
	color: $fe-primary;
	font-size: 36rpx;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.fe-worker-review-modal__head-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12rpx;
}

.fe-worker-review-modal__name {
	font-size: 34rpx;
	font-weight: 700;
	color: $fe-gray-800;
	line-height: 1.3;
}

.fe-worker-review-modal__rows {
	background: $fe-gray-50;
	border-radius: 20rpx;
	padding: 8rpx 24rpx;
	margin-bottom: 28rpx;
}

.fe-worker-review-modal__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24rpx;
	padding: 20rpx 0;
	border-bottom: 1rpx solid $fe-border-light;
}

.fe-worker-review-modal__row:last-child {
	border-bottom: none;
}

.fe-worker-review-modal__label {
	flex-shrink: 0;
	font-size: 26rpx;
	color: $fe-gray-500;
}

.fe-worker-review-modal__value {
	flex: 1;
	text-align: right;
	font-size: 26rpx;
	color: $fe-gray-700;
	line-height: 1.4;
	word-break: break-all;
}

.fe-worker-review-modal__value--danger {
	color: #991B1B;
}

.fe-worker-review-modal__reject {
	margin-bottom: 28rpx;
}

.fe-worker-review-modal__reject-label {
	display: block;
	font-size: 26rpx;
	color: $fe-gray-600;
	margin-bottom: 12rpx;
}

.fe-worker-review-modal__textarea {
	width: 100%;
	min-height: 140rpx;
	padding: 20rpx;
	box-sizing: border-box;
	border-radius: 16rpx;
	background: $fe-gray-50;
	border: 1rpx solid $fe-border-light;
	font-size: 26rpx;
	color: $fe-gray-700;
	line-height: 1.5;
}

.fe-worker-review-modal__actions {
	display: flex;
	gap: 20rpx;
}

.fe-worker-review-modal__btn {
	flex: 1;
}

.fe-worker-review-modal__btn--disabled {
	opacity: 0.55;
	pointer-events: none;
}
</style>
