<template>
	<!-- 商家账单详情 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					账单详情
				</view>
			</view>
		</view>

		<view class="content">
			<view class="summary-card">
				<view class="summary-date">{{query.billTime || '-'}}</view>
				<view class="summary-row">
					<view>
						<text>结算金额</text>
						<view>￥{{formatMoney(query.totalSettlementAmount)}}</view>
					</view>
					<view>
						<text>记录数</text>
						<view>{{query.recordCount || 0}} 笔</view>
					</view>
				</view>
				<view class="summary-mini">
					<view>结算基数：￥{{formatMoney(query.totalBaseAmount)}}</view>
					<view>平台服务费：￥{{formatMoney(query.totalCommissionAmount)}}</view>
				</view>
			</view>

			<view class="record-list">
				<view class="record-card" v-for="item in detailList" :key="item.id" @tap="goOrderDetail(item)">
					<view class="record-head">
						<view>
							<view class="record-title">{{item.type == 2 ? '退款/售后扣款' : '正常结算'}}</view>
							<view class="record-sub">订单号：{{item.orderNumber || item.orderId || '-'}}</view>
						</view>
						<view class="record-amount" :class="{'negative': item.type == 2}">
							{{item.type == 2 ? '-' : ''}}￥{{formatMoney(absAmount(item.settlementAmount))}}
						</view>
					</view>
					<view class="record-grid">
						<view>
							<text>结算基数</text>
							<view>￥{{formatMoney(item.baseAmount)}}</view>
						</view>
						<view>
							<text>平台抽佣</text>
							<view>￥{{formatMoney(item.commissionAmount)}}</view>
						</view>
						<view>
							<text>抽佣比例</text>
							<view>{{formatMoney(item.commissionRate)}}%</view>
						</view>
						<view>
							<text>生成时间</text>
							<view>{{formatDateTime(item.createTime)}}</view>
						</view>
					</view>
					<view class="record-footer">
						<text>查看订单详情</text>
						<uni-icons type="right" size="15" color="#9aa6a2"></uni-icons>
					</view>
				</view>
			</view>

			<view class="empty-state" v-if="!loading && detailList.length === 0">暂无账单明细</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
				loading: false,
				query: {
					shopId: '',
					regionId: '',
					billTime: '',
					status: 0,
					recordCount: 0,
					totalSettlementAmount: 0,
					totalBaseAmount: 0,
					totalCommissionAmount: 0
				},
				detailList: []
			}
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		onLoad(option) {
			this.query = {
				shopId: option.shopId || uni.getStorageSync('shopId') || '',
				regionId: option.regionId || this.getRegionId(),
				billTime: option.billTime || '',
				status: Number(option.status || 0),
				recordCount: Number(option.recordCount || 0),
				totalSettlementAmount: option.totalSettlementAmount || 0,
				totalBaseAmount: option.totalBaseAmount || 0,
				totalCommissionAmount: option.totalCommissionAmount || 0
			}
			this.getDetailList()
		},
		methods: {
			getRegionId() {
				const area = uni.getStorageSync('area')
				if (!area) return ''
				if (typeof area === 'object') return area.id || ''
				try {
					return JSON.parse(area).id || ''
				} catch (e) {
					return ''
				}
			},
			getDetailList() {
				if (!this.query.shopId || !this.query.billTime) return
				this.loading = true
				this.tui.request('/mall/admin/settlement/detailList', 'POST', {
					regionId: this.query.regionId,
					shopId: this.query.shopId,
					settlementDate: this.query.billTime,
					status: this.query.status
				}, false, false).then((res) => {
					this.loading = false
					if (res.code == 200) {
						this.detailList = Array.isArray(res.result) ? res.result : []
					} else {
						this.tui.toast(res.message || '获取账单明细失败')
					}
				}).catch(() => {
					this.loading = false
				})
			},
			toAmount(value) {
				const amount = parseFloat(value)
				return isNaN(amount) ? 0 : amount
			},
			absAmount(value) {
				return Math.abs(this.toAmount(value))
			},
			formatMoney(value) {
				return this.toAmount(value).toFixed(2)
			},
			formatDateTime(value) {
				if (!value) return '-'
				const date = new Date(value)
				if (isNaN(date.getTime())) return value
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				return `${year}-${month}-${day} ${hours}:${minutes}`
			},
			goOrderDetail(item) {
				if (!item || !item.orderId) {
					this.tui.toast('未找到订单信息')
					return
				}
				uni.navigateTo({
					url: '/package2/shop/orderDetail?id=' + item.orderId
				})
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		min-height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		min-height: 100%;
		font-size: 24rpx;
		position: relative;
		padding-bottom: 40rpx;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 300rpx;
		background-size: 100% 100%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.title-name {
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}

	.content {
		width: 92%;
		margin: -90rpx auto 0;
		position: relative;
		z-index: 2;
	}

	.summary-card,
	.record-card {
		background: #fff;
		border-radius: 28rpx;
		box-shadow: 0 14rpx 34rpx rgba(0, 35, 28, 0.08);
	}

	.summary-card {
		padding: 28rpx;
		margin-bottom: 22rpx;
		background: linear-gradient(135deg, #00231C 0%, #14564a 100%);
		color: #fff;
	}

	.summary-date {
		font-size: 34rpx;
		font-weight: 900;
	}

	.summary-row {
		display: flex;
		margin-top: 24rpx;
	}

	.summary-row > view {
		flex: 1;
	}

	.summary-row text {
		color: rgba(255,255,255,0.72);
		font-size: 23rpx;
	}

	.summary-row view view {
		margin-top: 8rpx;
		color: #e3ff96;
		font-size: 40rpx;
		font-weight: 900;
	}

	.summary-mini {
		margin-top: 20rpx;
		color: rgba(255,255,255,0.76);
		line-height: 40rpx;
	}

	.record-card {
		padding: 24rpx;
		margin-bottom: 20rpx;
	}

	.record-head,
	.record-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.record-title {
		font-size: 30rpx;
		font-weight: 900;
	}

	.record-sub {
		margin-top: 8rpx;
		color: #7a8582;
		font-size: 23rpx;
		max-width: 420rpx;
		word-break: break-all;
	}

	.record-amount {
		color: #0b9b73;
		font-size: 32rpx;
		font-weight: 900;
	}

	.record-amount.negative {
		color: #f0441f;
	}

	.record-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16rpx;
		margin-top: 20rpx;
		padding: 18rpx;
		border-radius: 22rpx;
		background: #f7faf8;
	}

	.record-grid text {
		color: #7a8582;
		font-size: 22rpx;
	}

	.record-grid view view {
		margin-top: 6rpx;
		font-weight: 800;
		word-break: break-all;
	}

	.record-footer {
		margin-top: 18rpx;
		padding-top: 18rpx;
		border-top: 1rpx solid #eef2ef;
		color: #0b9b73;
		font-weight: 900;
	}

	.empty-state {
		padding: 80rpx 0;
		text-align: center;
		color: #9aa6a2;
	}
</style>
