<template>
	<view class="record-page">
		<!-- 月份筛选 -->
		<view class="filter-row" @click="showMonthPicker = true">
			<text>{{ dateRangeText }}</text>
			<text class="arrow">▼</text>
		</view>

		<view class="record-list" v-if="displayList.length">
			<view
				class="record-card"
				v-for="item in displayList"
				:key="item.id"
				@click="goDetail(item)"
			>
				<view class="card-left">
					<view class="bank-icon"></view>
					<view class="card-info">
						<text class="title">提现到银行卡</text>
						<text class="bank">{{ item.bankName }} ({{ item.bankTail }})</text>
					</view>
				</view>
				<view class="card-right">
					<text class="amount">{{ formatAmount(item.amount) }}</text>
					<text class="time">{{ formatListTime(item.createTime) }}</text>
				</view>
			</view>
		</view>
		<view class="empty" v-else>暂无提现记录</view>

		<u-datetime-picker
			:show="showMonthPicker"
			v-model="monthPickerValue"
			mode="year-month"
			@confirm="onMonthConfirm"
			@cancel="showMonthPicker = false"
		></u-datetime-picker>
	</view>
</template>

<script>
import {
	MOCK_WITHDRAW_LIST,
	formatAmount,
	formatListTime,
	getMockMonthRange,
	getMonthRange,
	parseTimeStr,
} from './mock.js'

export default {
	data() {
		const range = getMockMonthRange()
		return {
			allList: [...MOCK_WITHDRAW_LIST],
			dateStart: range.start,
			dateEnd: range.end,
			dateStartTs: range.startTs,
			dateEndTs: range.endTs,
			showMonthPicker: false,
			monthPickerValue: new Date('2025/11/01').getTime(),
		}
	},
	computed: {
		dateRangeText() {
			return `${this.dateStart} 至 ${this.dateEnd}`
		},
		displayList() {
			return this.allList
				.filter(item => {
					const ts = parseTimeStr(item.createTime)
					return ts >= this.dateStartTs && ts <= this.dateEndTs
				})
				.sort((a, b) => parseTimeStr(b.createTime) - parseTimeStr(a.createTime))
		},
	},
	methods: {
		formatAmount,
		formatListTime,
		onMonthConfirm(e) {
			const d = new Date(e.value)
			const range = getMonthRange(d.getFullYear(), d.getMonth() + 1)
			this.dateStart = range.start
			this.dateEnd = range.end
			this.dateStartTs = range.startTs
			this.dateEndTs = range.endTs
			this.showMonthPicker = false
		},
		goDetail(item) {
			uni.navigateTo({ url: `/workbench/withdraw/detail?id=${item.id}` })
		},
	},
}
</script>

<style lang="scss" scoped>
.record-page {
	min-height: 100vh;
	background: #f5f5f5;
}

.filter-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 32rpx;
	background: #fff;
	border-bottom: 1rpx solid #eee;
	font-size: 26rpx;
	color: #333;
}

.arrow {
	font-size: 20rpx;
	color: #999;
	margin-left: 8rpx;
}

.record-list {
	padding: 16rpx 0;
}

.record-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	padding: 28rpx 32rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.card-left {
	display: flex;
	align-items: center;
	flex: 1;
	overflow: hidden;
}

.bank-icon {
	width: 72rpx;
	height: 72rpx;
	background: #eee;
	border-radius: 8rpx;
	flex-shrink: 0;
	margin-right: 20rpx;
}

.title {
	display: block;
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

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

.card-right {
	text-align: right;
	flex-shrink: 0;
	margin-left: 16rpx;
}

.amount {
	display: block;
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
}

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

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