<template>
	<page-layout :is-platform="ctx.isPlatform" title="确认结算" :show-back="true">
		<view class="page">
			<view class="preview-card">
				<text>共 {{ recordCount }} 条明细</text>
				<text class="amount">结算金额 ¥{{ amount }}</text>
			</view>

			<proof-image-uploader v-model="proofImages" />

			<view class="field">
				<text class="label">备注</text>
				<input class="input" v-model="remark" placeholder="选填" />
			</view>

			<view class="submit-btn" @click="confirm">确认结算</view>
		</view>
	</page-layout>
</template>

<script>
import PageLayout from '../components/PageLayout.vue';
import ProofImageUploader from '../components/ProofImageUploader.vue';
import { getSalespersonManageContext, resolveManageMode } from '../common/context.js';

export default {
	components: { PageLayout, ProofImageUploader },
	data() {
		return {
			ctx: getSalespersonManageContext('clinic'),
			salespersonId: 0,
			storeId: 0,
			settlementType: 1,
			periodStart: 0,
			periodEnd: 0,
			orderIds: [],
			amount: '0.00',
			recordCount: 0,
			proofImages: [],
			remark: '',
		};
	},
	onLoad(options) {
		this.ctx = getSalespersonManageContext(resolveManageMode(options));
		this.salespersonId = Number(options.salesperson_id || 0);
		this.storeId = Number(options.store_id || 0);
		this.settlementType = Number(options.settlement_type || 1);
		this.periodStart = Number(options.period_start || 0);
		this.periodEnd = Number(options.period_end || 0);
		this.amount = decodeURIComponent(options.amount || '0.00');
		this.recordCount = Number(options.record_count || 0);
		if (options.order_ids) {
			this.orderIds = String(options.order_ids).split(',').map(Number).filter(Boolean);
		}
		if (!this.recordCount || !this.amount || this.amount === '0.00') {
			this.loadPreview();
		}
	},
	methods: {
		buildParams() {
			const params = {
				salesperson_id: this.salespersonId,
				settlement_type: this.settlementType,
			};
			if (this.storeId > 0) params.store_id = this.storeId;
			if (this.settlementType === 1) {
				params.period_start = this.periodStart;
				params.period_end = this.periodEnd;
			} else {
				params.order_ids = this.orderIds.join(',');
			}
			return params;
		},
		async loadPreview() {
			const wrap = await this.ctx.api.getSettlementPreview(this.buildParams());
			if (wrap && wrap.ok && wrap.data) {
				this.amount = wrap.data.amount || '0.00';
				this.recordCount = wrap.data.record_count || 0;
			}
		},
		async confirm() {
			if (!this.proofImages.length) {
				uni.showToast({ title: '请上传至少1张结算凭证', icon: 'none' });
				return;
			}
			uni.showLoading({ title: '结算中' });
			try {
				const wrap = await this.ctx.api.confirmSettlement({
					...this.buildParams(),
					proof_images: this.proofImages,
					remark: this.remark.trim(),
				});
				if (wrap && wrap.ok) {
					uni.showToast({ title: '结算成功', icon: 'success' });
					setTimeout(() => uni.navigateBack({ delta: 2 }), 500);
				}
			} finally {
				uni.hideLoading();
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.page { padding: 24rpx; }
.preview-card {
	background: #FFF7ED; border-radius: 16rpx; padding: 28rpx; margin-bottom: 24rpx;
	font-size: 26rpx;
}
.amount { display: block; font-size: 36rpx; font-weight: 700; color: #F97316; margin-top: 12rpx; }
.field {
	display: flex; align-items: center; background: #fff; border-radius: 16rpx;
	padding: 24rpx; margin-top: 24rpx;
}
.label { width: 100rpx; font-size: 28rpx; }
.input { flex: 1; font-size: 28rpx; text-align: right; }
.submit-btn {
	margin-top: 48rpx; background: linear-gradient(90deg, #00BFA6, #6ACDBB); color: #fff;
	text-align: center; padding: 24rpx; border-radius: 16rpx; font-size: 30rpx;
}
</style>
