<template>
	<view class="detail-page" v-if="detail">
		<view class="main-card">
			<!-- 顶部：银行 & 金额 & 状态 -->
			<view class="head-section">
				<view class="bank-logo"></view>
				<text class="bank-name">{{ detail.bankName }}</text>
				<text class="amount">{{ formatAmount(detail.amount) }}</text>
				<text class="status" :class="detail.status">{{ statusLabel }}</text>
			</view>

			<!-- 详情字段 -->
			<view class="info-list">
				<view class="info-row">
					<text class="label">提现时间</text>
					<text class="value">{{ formatDateTime(detail.createTime) }}</text>
				</view>
				<view class="info-row">
					<text class="label">到账时间</text>
					<text class="value">{{ detail.arriveTime ? formatDateTime(detail.arriveTime) : '--' }}</text>
				</view>
				<view class="info-row">
					<text class="label">提现银行</text>
					<text class="value">{{ accountText }}</text>
				</view>
				<view class="info-row">
					<text class="label">到账金额</text>
					<text class="value">{{ formatAmount(arriveAmount) }}</text>
				</view>
				<view class="info-row">
					<text class="label">手续费</text>
					<text class="value">{{ formatAmount(serviceFee) }}</text>
				</view>
			</view>

			<!-- 处理进度 -->
			<view class="timeline-section">
				<text class="section-title">处理进度</text>
				<view class="timeline">
					<view
						class="timeline-item"
						v-for="(step, index) in timeline"
						:key="index"
					>
						<view class="dot-wrap">
							<view class="dot" :class="step.state">
								<text v-if="step.state === 'fail'">×</text>
								<text v-else-if="step.state === 'done'">✓</text>
							</view>
							<view class="line" v-if="index < timeline.length - 1"></view>
						</view>
						<view class="step-content">
							<text class="step-title" :class="step.state">{{ step.title }}</text>
							<text class="step-time" v-if="step.time">{{ step.time }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="empty" v-else>记录不存在</view>
</template>

<script>
import {
	getWithdrawById,
	formatAmount,
	formatDateTime,
	maskAccount,
	calcArriveAmount,
	SERVICE_FEE,
	STATUS_LABEL,
	getTimeline,
} from './mock.js'

export default {
	data() {
		return {
			detail: null,
		}
	},
	computed: {
		statusLabel() {
			return STATUS_LABEL[this.detail?.status] || '-'
		},
		accountText() {
			if (!this.detail) return '-'
			return maskAccount(this.detail.bankName, this.detail.bankTail, this.detail.accountName)
		},
		serviceFee() {
			return SERVICE_FEE
		},
		arriveAmount() {
			if (!this.detail) return 0
			return calcArriveAmount(this.detail.amount, SERVICE_FEE)
		},
		timeline() {
			return this.detail ? getTimeline(this.detail) : []
		},
	},
	onLoad(query) {
		if (query.id) {
			this.detail = getWithdrawById(query.id)
		}
	},
	methods: {
		formatAmount,
		formatDateTime,
	},
}
</script>

<style lang="scss" scoped>
.detail-page {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 24rpx;
	box-sizing: border-box;
}

.main-card {
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
}

.head-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48rpx 32rpx 32rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.bank-logo {
	width: 80rpx;
	height: 80rpx;
	background: #eee;
	border-radius: 50%;
	margin-bottom: 16rpx;
}

.bank-name {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
}

.amount {
	font-size: 56rpx;
	color: #333;
	font-weight: 700;
	margin-bottom: 12rpx;
}

.status {
	font-size: 26rpx;
	color: #666;

	&.success {
		color: #333;
	}

	&.failed {
		color: #e54d42;
	}
}

.info-list {
	padding: 8rpx 32rpx;
}

.info-row {
	display: flex;
	justify-content: space-between;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
	font-size: 28rpx;

	&:last-child {
		border-bottom: none;
	}
}

.label {
	color: #999;
	flex-shrink: 0;
	margin-right: 24rpx;
}

.value {
	color: #333;
	text-align: right;
	flex: 1;
}

.timeline-section {
	padding: 32rpx;
	border-top: 16rpx solid #f5f5f5;
}

.section-title {
	display: block;
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 32rpx;
}

.timeline-item {
	display: flex;
	min-height: 80rpx;
}

.dot-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 40rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.dot {
	width: 32rpx;
	height: 32rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20rpx;
	color: #fff;
	background: #0879ff;

	&.active {
		background: #fff;
		border: 2rpx solid #0879ff;
		color: #0879ff;
	}

	&.fail {
		background: #e54d42;
	}

	&.done {
		background: #0879ff;
	}
}

.line {
	flex: 1;
	width: 2rpx;
	background: #ddd;
	margin: 8rpx 0;
	min-height: 40rpx;
}

.step-content {
	flex: 1;
	padding-bottom: 32rpx;
}

.step-title {
	display: block;
	font-size: 28rpx;
	color: #333;

	&.fail {
		color: #e54d42;
	}

	&.active {
		color: #0879ff;
	}
}

.step-time {
	display: block;
	font-size: 24rpx;
	color: #999;
	margin-top: 8rpx;
}

.empty {
	text-align: center;
	padding: 120rpx 0;
	font-size: 28rpx;
	color: #999;
}
</style>
