<template>
	<view class="contracts-page">
		<view v-if="loading" class="contracts-empty">
			<text class="contracts-empty__text">加载合同中...</text>
		</view>
		<view v-else-if="loadError" class="contracts-empty">
			<text class="contracts-empty__text">{{ loadError }}</text>
			<view class="fe-btn fe-btn--primary fe-btn--sm contracts-empty__btn" @tap="loadList">重新加载</view>
		</view>
		<view v-else-if="!items.length" class="contracts-empty">
			<text class="contracts-empty__text">暂无电子合同</text>
			<text class="contracts-empty__sub">企业审核通过后，待签合同将显示在这里</text>
		</view>
		<scroll-view v-else scroll-y class="contracts-scroll" :show-scrollbar="false">
			<view class="contracts-list">
				<view
					v-for="(item, idx) in items"
					:key="item.msgKey"
					class="contracts-card"
					@tap="openDetailByIndex(idx)"
				>
					<view class="contracts-card__icon">📄</view>
					<view class="contracts-card__main">
						<view class="contracts-card__title">{{ item.contractTitle }}</view>
						<view class="contracts-card__desc">{{ item.subtitle || item.contractNo || '—' }}</view>
						<view v-if="item.createTimeText" class="contracts-card__time">{{ item.createTimeText }}</view>
					</view>
					<text
						class="fe-person-status"
						:class="'fe-person-status--' + item.signStatusClass"
					>{{ item.signStatusText }}</text>
					<text class="contracts-card__arrow">›</text>
				</view>
			</view>
		</scroll-view>

		<!-- 合同详情弹框 -->
		<view
			class="fe-modal-overlay"
			:class="{ 'fe-modal-overlay--active': detailActive }"
			@tap="closeDetail"
		/>
		<view class="fe-modal contracts-detail-modal" :class="{ 'fe-modal--active': detailActive }">
			<view class="contracts-detail">
				<view class="contracts-detail__title">合同详情</view>
				<view v-if="detailLoading" class="contracts-detail__loading">加载中...</view>
				<view v-else-if="detail">
					<view class="contracts-detail__rows">
						<view class="contracts-detail__row">
							<text class="contracts-detail__label">合同名称</text>
							<text class="contracts-detail__value" user-select>{{ detail.contractTitle }}</text>
						</view>
						<view class="contracts-detail__row">
							<text class="contracts-detail__label">合同编号</text>
							<text class="contracts-detail__value" user-select>{{ detail.contractNo || '—' }}</text>
						</view>
						<view class="contracts-detail__row">
							<text class="contracts-detail__label">企业</text>
							<text class="contracts-detail__value">{{ detail.enterpriseName || '—' }}</text>
						</view>
						<view class="contracts-detail__row">
							<text class="contracts-detail__label">关联订单</text>
							<text class="contracts-detail__value">{{ detail.orderTitle || '—' }}</text>
						</view>
						<view class="contracts-detail__row">
							<text class="contracts-detail__label">签署状态</text>
							<text
								class="fe-person-status"
								:class="'fe-person-status--' + detail.signStatusClass"
							>{{ detail.signStatusText }}</text>
						</view>
						<view v-if="detail.signedAtText" class="contracts-detail__row">
							<text class="contracts-detail__label">签署时间</text>
							<text class="contracts-detail__value">{{ detail.signedAtText }}</text>
						</view>
						<view v-if="detail.createTimeText" class="contracts-detail__row">
							<text class="contracts-detail__label">创建时间</text>
							<text class="contracts-detail__value">{{ detail.createTimeText }}</text>
						</view>
					</view>

					<view v-if="detail.canSign" class="contracts-detail__actions">
						<view
							class="fe-btn fe-btn--secondary fe-btn--lg contracts-detail__btn"
							:class="{ 'contracts-detail__btn--disabled': signing }"
							@tap="closeDetail"
						>取消</view>
						<view
							class="fe-btn fe-btn--primary fe-btn--lg contracts-detail__btn"
							:class="{ 'contracts-detail__btn--disabled': signing }"
							@tap="onConfirmSign"
						>{{ signing ? '签署中...' : '确认签署完成' }}</view>
					</view>
					<view v-else class="contracts-detail__actions">
						<view class="fe-btn fe-btn--secondary fe-btn--lg contracts-detail__btn" @tap="closeDetail">关闭</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { showToast } from '@/common/chat-data.js'
import { listMyContracts, getContractDetail, confirmContractSign } from '@/api/contract.js'
import { mapContractList, mapContractItem } from '@/utils/contract.js'
import store from '@/common/store.js'

export default {
	data() {
		return {
			loading: false,
			loadError: '',
			items: [],
			detailActive: false,
			detailLoading: false,
			detail: null,
			signing: false
		}
	},
	onShow() {
		if (!store.getState().loggedIn || store.getState().role !== 'worker') {
			uni.redirectTo({ url: '/packageA/auth/login' })
			return
		}
		this.loadList()
	},
	methods: {
		async loadList() {
			this.loading = true
			this.loadError = ''
			try {
				const list = await listMyContracts({}, { showError: false })
				this.items = mapContractList(list)
			} catch (e) {
				this.items = []
				this.loadError = (e && (e.msg || e.message)) || '合同加载失败'
				showToast(this.loadError)
			} finally {
				this.loading = false
			}
		},
		openDetailByIndex(idx) {
			const item = this.items[idx]
			if (!item || item.contractId == null) {
				showToast('合同信息不完整')
				return
			}
			this.detailActive = true
			this.detail = Object.assign({}, item)
			this.fetchDetail(item.contractId)
		},
		async fetchDetail(contractId) {
			this.detailLoading = true
			try {
				const raw = await getContractDetail(contractId, { showError: false })
				if (raw) this.detail = mapContractItem(raw)
			} catch (e) {
				showToast((e && (e.msg || e.message)) || '详情加载失败')
			} finally {
				this.detailLoading = false
			}
		},
		closeDetail() {
			if (this.signing) return
			this.detailActive = false
		},
		async onConfirmSign() {
			if (this.signing || !this.detail || !this.detail.canSign) return
			const id = this.detail.contractId
			if (id == null) {
				showToast('缺少合同信息')
				return
			}
			this.signing = true
			try {
				const raw = await confirmContractSign(id, { showError: true })
				const mapped = mapContractItem(raw || this.detail)
				this.detail = mapped
				showToast('签署完成')
				await this.loadList()
				this.detailActive = false
			} catch (e) {
				// request 已 toast
			} finally {
				this.signing = false
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.contracts-page {
	min-height: 100vh;
	background: $fe-bg;
	box-sizing: border-box;
}

.contracts-scroll {
	height: 100vh;
}

.contracts-list {
	padding: 24rpx 32rpx 48rpx;
}

.contracts-card {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 28rpx 24rpx;
	margin-bottom: 20rpx;
	background: #fff;
	border-radius: $fe-radius-md;
	border: 1rpx solid $fe-border-light;
}

.contracts-card__icon {
	width: 72rpx;
	height: 72rpx;
	border-radius: 20rpx;
	background: #DBEAFE;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	flex-shrink: 0;
}

.contracts-card__main {
	flex: 1;
	min-width: 0;
}

.contracts-card__title {
	font-size: 28rpx;
	font-weight: 700;
	color: $fe-gray-800;
	line-height: 1.35;
}

.contracts-card__desc {
	margin-top: 6rpx;
	font-size: 24rpx;
	color: $fe-gray-500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.contracts-card__time {
	margin-top: 6rpx;
	font-size: 22rpx;
	color: $fe-gray-400;
}

.contracts-card__arrow {
	color: #CBD5E1;
	font-size: 32rpx;
	flex-shrink: 0;
}

.contracts-empty {
	padding: 160rpx 48rpx;
	text-align: center;
}

.contracts-empty__text {
	display: block;
	font-size: 28rpx;
	color: $fe-gray-500;
	line-height: 1.5;
}

.contracts-empty__sub {
	display: block;
	margin-top: 12rpx;
	font-size: 24rpx;
	color: $fe-gray-400;
}

.contracts-empty__btn {
	margin: 32rpx auto 0;
	display: inline-flex;
}

.contracts-detail {
	padding: 40rpx 36rpx 32rpx;
}

.contracts-detail__title {
	font-size: 34rpx;
	font-weight: 700;
	text-align: center;
	margin-bottom: 28rpx;
}

.contracts-detail__loading {
	padding: 48rpx 0;
	text-align: center;
	color: $fe-gray-500;
	font-size: 28rpx;
}

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

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

.contracts-detail__row:last-child {
	border-bottom: none;
}

.contracts-detail__label {
	flex-shrink: 0;
	font-size: 26rpx;
	color: $fe-gray-500;
}

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

.contracts-detail__actions {
	display: flex;
	gap: 20rpx;
}

.contracts-detail__btn {
	flex: 1;
}

.contracts-detail__btn--disabled {
	opacity: 0.55;
	pointer-events: none;
}

.contracts-detail-modal.fe-modal {
	z-index: 410;
}

/* 盖住页面内容 */
.contracts-page .fe-modal-overlay {
	z-index: 400;
}
</style>
