<template>
	<view class="fe-bottom-sheet" :class="{ 'fe-bottom-sheet--active': active }">
		<view class="fe-sheet-handle" />
		<view class="fe-sheet-header">
			<view class="fe-sheet-title">💳 结算确认单 <text class="fe-sheet-badge fe-sheet-badge--danger">待支付</text></view>
		</view>
		<view class="fe-sheet-source">浦东仓库搬运 BATCH-001</view>
		<scroll-view scroll-y class="fe-sheet-body" :show-scrollbar="false">
			<view class="fe-sheet-body__inner">
				<view class="fe-stat-grid fe-stat-grid--3">
					<view class="fe-stat-box">
						<view class="fe-stat-box__num fe-stat-box__num--lg fe-stat-box__num--primary">¥50,400</view>
						<view class="fe-stat-box__label">实发总额</view>
					</view>
					<view class="fe-stat-box fe-stat-box--danger">
						<view class="fe-stat-box__num fe-stat-box__num--lg fe-stat-box__num--danger">-¥2,400</view>
						<view class="fe-stat-box__label">扣款/个税</view>
					</view>
					<view class="fe-stat-box">
						<view class="fe-stat-box__num fe-stat-box__num--lg fe-stat-box__num--primary">¥52,800</view>
						<view class="fe-stat-box__label">应发总额</view>
					</view>
				</view>
				<view class="fe-settlement-row"><text class="fe-info-row__label">劳务费合计</text><text class="fe-info-row__value">¥48,000</text></view>
				<view class="fe-settlement-row"><text class="fe-info-row__label">平台服务费</text><text class="fe-info-row__value">¥3,840</text></view>
				<view class="fe-settlement-row"><text class="fe-info-row__label">保险费用</text><text class="fe-info-row__value">¥960</text></view>
				<view class="fe-settlement-row fe-settlement-row--total">
					<text>应付总额</text>
					<text class="fe-settlement-row__val--primary">¥52,800</text>
				</view>
			</view>
		</scroll-view>
		<view class="fe-sheet-footer">
			<view class="fe-btn fe-btn--secondary fe-btn--lg" @tap="toast('已导出明细')">导出明细</view>
			<view class="fe-btn fe-btn--primary fe-btn--lg" @tap="$emit('pay')">确认支付</view>
		</view>
	</view>
</template>

<script>
import { showToast } from '@/common/chat-data.js'

export default {
	name: 'FeSettlementSheet',
	props: {
		active: { type: Boolean, default: false }
	},
	methods: {
		toast: showToast
	}
}
</script>

<style lang="scss" scoped>
.fe-sheet-badge--danger {
	background: #EF4444;
}

.fe-stat-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.fe-stat-box--danger {
	background: #FEE2E2;
}

.fe-stat-box__num--lg {
	font-size: 36rpx;
}

.fe-stat-box__num--primary {
	color: #7C3AED;
}

.fe-stat-box__num--danger {
	color: #EF4444;
}
</style>
