<template>
	<s-layout title="我的账户" class="account-page">
		<view class="page-wrap">
			<!-- 顶部周期选择 -->
			<view class="top-row">
				<view class="period-select" @tap="showPicker = true">
					<text class="period-label">{{ selectedLabel }}</text>
					<up-icon name="arrow-down" color="#333" size="14"></up-icon>
				</view>
			</view>

			<!-- 汇总卡片 -->
			<view class="summary-card">
				<text class="summary-amount">{{ formatSigned(totalAmount) }}</text>
				<text class="summary-sub">预计收入</text>
				<up-divider text=""></up-divider>
				<text class="summary-note">{{ summaryNote }}</text>
			</view>
			
			<!-- 交易列表 -->
			<scroll-view class="list" scroll-y>
				<view class="txn-item" v-for="item in items" :key="item.id">
					<view class="left" style="width:530rpx;">
						<text class="txn-title">{{ item.desc }}</text>
						<text class="txn-sub">{{ item.date }} {{ item.time }}</text>
					</view>
					<view class="right">
						<text class="txn-amount" :class="{ positive: item.amount >= 0 }">
							{{ formatSigned(item.amount) }}
						</text>
						<text class="txn-status">{{ item.statusText }}</text>
					</view>
				</view>

				<view class="no-more">没有更多了~</view>
			</scroll-view>

			<!-- picker -->
			<up-picker
				:show="showPicker"
				:columns="columns"
				@confirm="onConfirm"
				@cancel="showPicker = false"
				@close="showPicker = false"
			></up-picker>
		</view>
	</s-layout>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import PayWalletApi from '@/sheep/api/pay/wallet';

// picker
const showPicker = ref(false);
const selectedLabel = ref('今日账单');
const columns = [
	[
		{ text: '今日账单', value: 'today' },
		{ text: '昨日账单', value: 'yesterday' },
		{ text: '本月账单', value: 'month' },
	],
];

// 数据
const items = ref([]);
const totalAmount = ref(0);
const summaryNote = ref('');

// 本地回退示例（便于开发）
const testList = [
	{ id: 't1', time: '18:02', date: '06-15', desc: '配送收入-#59-林记番薯粥（潮汕白粥，小炒，海鲜鱼）', amount: 6.1, statusText: '未到账' },
	{ id: 't2', time: '17:49', date: '06-15', desc: '配送收入-#57-林记番薯粥（潮汕白粥，小炒，海鲜鱼）', amount: 5.3, statusText: '未到账' },
	{ id: 't3', time: '17:42', date: '06-15', desc: '配送收入-#25-桐坑粿条（原汤猪肠·柠檬粿条）', amount: 4.6, statusText: '未到账' },
	{ id: 't4', time: '17:27', date: '06-15', desc: '配送收入-#110-万辉超市（潮阳店）', amount: 3.6, statusText: '未到账' },
	{ id: 't5', time: '16:56', date: '06-15', desc: '配送收入-#145-仓鼠便利超市（潮阳店）', amount: 3.1, statusText: '未到账' },
];

function formatSigned(val) {
	const n = Number(val) || 0;
	const sign = n > 0 ? '+' : n < 0 ? '' : '+';
	return `${sign}${Math.abs(n).toFixed(2)}`;
}

function toDateParts(t) {
	const d = t ? new Date(t) : null;
	if (!d || isNaN(d.getTime())) return { date: '', time: '' };
	const mm = String(d.getMonth() + 1).padStart(2, '0');
	const dd = String(d.getDate()).padStart(2, '0');
	const hh = String(d.getHours()).padStart(2, '0');
	const mi = String(d.getMinutes()).padStart(2, '0');
	return { date: `${mm}-${dd}`, time: `${hh}:${mi}` };
}

// 根据 picker value 计算时间范围（返回 start/end Date）
function rangeFor(value) {
	const now = new Date();
	if (value === 'today') {
		const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
		const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
		return [start, end];
	}
	if (value === 'yesterday') {
		const y = new Date(now);
		y.setDate(now.getDate() - 1);
		const start = new Date(y.getFullYear(), y.getMonth(), y.getDate(), 0, 0, 0);
		const end = new Date(y.getFullYear(), y.getMonth(), y.getDate(), 23, 59, 59);
		return [start, end];
	}
	// month
	const start = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
	const end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
	return [start, end];
}

// 加载并过滤流水
async function load() {
	try {
		const res = await PayWalletApi.getWalletTransactionPage({ page: 1, size: 200 });
		let records = [];
		if (res && res.code === 0) {
			if (Array.isArray(res.data)) {
				records = res.data;
			} else if (res.data && Array.isArray(res.data.records)) {
				records = res.data.records;
			}
		}

		const pickerValue = columns[0].find((c) => c.text === selectedLabel.value)?.value ?? 'today';
		const [start, end] = rangeFor(pickerValue);

		let filtered = [];
		if (records && records.length) {
			filtered = records.filter((r) => {
				const t = r.createTime ?? r.createdAt ?? r.time ?? r.create_date ?? r.date;
				if (!t) return false;
				const d = new Date(t);
				if (isNaN(d.getTime())) return false;
				return d >= start && d <= end;
			});
		}

		if (!filtered.length) {
			// 使用本地回退示例
			items.value = testList;
		} else {
			items.value = filtered.map((r, idx) => {
				const t = r.createTime ?? r.createdAt ?? r.time ?? r.create_date ?? r.date;
				const parts = toDateParts(t);
				return {
					id: r.id ?? `r-${idx}`,
					date: parts.date,
					time: parts.time,
					desc: r.remark ?? r.note ?? r.title ?? r.typeName ?? r.description ?? '',
					amount: Number(r.amount ?? r.price ?? r.income ?? r.value ?? r.money ?? 0),
					statusText: r.statusText ?? r.stateText ?? r.payStatus ?? '',
				};
			});
		}
	} catch (e) {
		// 回退示例
		items.value = testList;
	}

	// 计算汇总
	totalAmount.value = items.value.reduce((s, it) => s + (Number(it.amount) || 0), 0);

	// 汇总说明（取前两条简短描述拼接）
	summaryNote.value = items.value.slice(0, 2).map((i) => i.desc).join('  ');
}

function onConfirm(e) {
	const v = e && e.value && e.value[0];
	if (v) {
		selectedLabel.value = v.text || String(v);
	}
	showPicker.value = false;
	load();
}

onShow(() => {
	load();
});
</script>

<style scoped>
.page-wrap {
	padding: 12px;
	background: transparent;
	min-height: 100vh;
}
.top-row {
	margin-bottom: 10px;
	display: flex;
	justify-content: flex-start;
}
.period-select {
	display: flex;
	align-items: center;
	gap: 8px;
}
.period-label {
	font-weight: 700;
}
.summary-card {
	background: #fff;
	padding: 16px;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	margin-bottom: 12px;
}
.summary-amount {
	font-size: 20px;
	font-weight: 700;
	color: #e74c3c;
	display: block;
	margin-bottom: 6px;
}
.summary-sub {
	color: #999;
	margin-bottom: 8px;
	display: block;
}
.summary-note {
	color: #bbb;
	font-size: 13px;
}
.list {
	margin-top: 10px;
}
.txn-item {
	background: #fff;
	padding: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #f0f0f0;
}
.txn-title {
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 6px;
}
.txn-sub {
	color: #999;
	font-size: 13px;
}
.txn-amount {
	font-weight: 700;
	color: #e74c3c;
	text-align: right;
}
.txn-amount.positive {
	color: #e74c3c;
}
.txn-status {
	color: #999;
	font-size: 12px;
	margin-top: 6px;
	display: block;
	text-align: right;
}
.no-more {
	text-align: center;
	color: #bbb;
	padding: 20px 0;
}
</style>