<template>
	<view class="bill-detail-page">
		<view class="navbox">
			<view class="status_bar"></view>
			<uni-nav-bar
				left-icon="left"
				title="详情"
				@clickLeft="goBack"
				color="#8B2316"
				:border="false"
				backgroundColor="#eeeeee"
			></uni-nav-bar>
		</view>

		<view class="detail-content">
			<view class="detail-row">
				<text class="label">交易号：</text>
				<text class="value">{{ detail.tradeNo || '-' }}</text>
			</view>
			<view class="detail-row">
				<text class="label">类型：</text>
				<text class="value">{{ detail.typeName || '-' }}</text>
			</view>
			<view class="detail-row">
				<text class="label">金额：</text>
				<text class="value amount" :class="amountClass">{{ detail.accountStr || '-' }}元</text>
			</view>
			<view class="detail-row">
				<text class="label">用户：</text>
				<text class="value">{{ detail.userName || '-' }}</text>
			</view>
			<view class="detail-row">
				<text class="label">时间：</text>
				<text class="value">{{ formatDateTime(detail.createTime) }}</text>
			</view>
			<view class="detail-row">
				<text class="label">备注：</text>
				<text class="value">{{ detail.remark || '' }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const detail = ref({})
const from = ref('')

onLoad((options) => {
	if (options.from) {
		from.value = decodeURIComponent(options.from)
	}
})

const amountClass = computed(() => {
	const amount = Number(detail.value?.accountStr || 0)
	return amount < 0 ? 'negative' : 'positive'
})

const formatDateTime = (value) => {
	if (!value) return '-'
	const text = String(value).trim()
	const date = new Date(text)
	if (Number.isNaN(date.getTime())) return text
	const y = date.getFullYear()
	const m = String(date.getMonth() + 1).padStart(2, '0')
	const d = String(date.getDate()).padStart(2, '0')
	const hh = String(date.getHours()).padStart(2, '0')
	const mm = String(date.getMinutes()).padStart(2, '0')
	const ss = String(date.getSeconds()).padStart(2, '0')
	return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}

const goBack = () => {
	if (from.value === 'billDetails') {
		uni.navigateBack()
		return
	}
	uni.redirectTo({
		url: '/pages_app/myAccount/billDetails?from=myAccount'
	})
}

onMounted(() => {
	const cache = uni.getStorageSync('billDetailItem')
	detail.value = cache || {}
})
</script>

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

.detail-content {
	position: fixed;
	left: 0;
	right: 0;
	top: calc(var(--status-bar-height) + 44px);
	bottom: 0;
	overflow-y: auto;
	box-sizing: border-box;
	background: #ffffff;
	padding: 0 24rpx;
}

.detail-row {
	min-height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1rpx solid #efefef;
}

.label {
	font-size: 30rpx;
	color: #2c2c2c;
}

.value {
	flex: 1;
	text-align: right;
	font-size: 30rpx;
	color: #666666;
	margin-left: 20rpx;
	word-break: break-all;
}

.amount {
	&.positive {
		color: #8B2316;
	}

	&.negative {
		color: #3f3f3f;
	}
}
</style>
