<template>
	<page-layout :is-platform="ctx.isPlatform" title="按时间段结算" :show-back="true">
		<view class="page">
			<view class="field">
				<text class="label">开始日期</text>
				<picker mode="date" :value="dateStart" @change="onStart">
					<view class="picker-val">{{ dateStart || '请选择' }}</view>
				</picker>
			</view>
			<view class="field">
				<text class="label">结束日期</text>
				<picker mode="date" :value="dateEnd" @change="onEnd">
					<view class="picker-val">{{ dateEnd || '请选择' }}</view>
				</picker>
			</view>

			<view v-if="preview" class="preview-card">
				<text>共 {{ preview.record_count }} 条明细</text>
				<text v-if="preview.order_count">涉及 {{ preview.order_count }} 个订单</text>
				<text class="amount">结算金额 ¥{{ preview.amount }}</text>
			</view>

			<view class="submit-btn" @click="goConfirm">下一步：上传凭证</view>
		</view>
	</page-layout>
</template>

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

const ROOT = '/subPackages/sub_salesperson_manage';

export default {
	components: { PageLayout },
	data() {
		return {
			ctx: getSalespersonManageContext('clinic'),
			salespersonId: 0,
			storeId: 0,
			dateStart: '',
			dateEnd: '',
			preview: null,
		};
	},
	onLoad(options) {
		this.ctx = getSalespersonManageContext(resolveManageMode(options));
		this.salespersonId = Number(options.salesperson_id || 0);
		this.storeId = Number(options.store_id || 0);
	},
	methods: {
		onStart(e) { this.dateStart = e.detail.value; },
		onEnd(e) { this.dateEnd = e.detail.value; },
		toUnixStart(dateStr) {
			return Math.floor(new Date(`${dateStr} 00:00:00`).getTime() / 1000);
		},
		toUnixEnd(dateStr) {
			return Math.floor(new Date(`${dateStr} 23:59:59`).getTime() / 1000);
		},
		async goConfirm() {
			if (!this.dateStart || !this.dateEnd) {
				uni.showToast({ title: '请选择时间段', icon: 'none' });
				return;
			}
			const params = {
				salesperson_id: this.salespersonId,
				settlement_type: 1,
				period_start: this.toUnixStart(this.dateStart),
				period_end: this.toUnixEnd(this.dateEnd),
			};
			if (this.storeId > 0) params.store_id = this.storeId;

			uni.showLoading({ title: '预览中' });
			try {
				const wrap = await this.ctx.api.getSettlementPreview(params);
				if (!wrap || !wrap.ok) return;
				this.preview = wrap.data;
				const q = [
					`mode=${this.ctx.mode}`,
					`salesperson_id=${this.salespersonId}`,
					`store_id=${this.storeId}`,
					'settlement_type=1',
					`period_start=${params.period_start}`,
					`period_end=${params.period_end}`,
					`amount=${encodeURIComponent(this.preview.amount || '')}`,
					`record_count=${this.preview.record_count || 0}`,
				].join('&');
				uni.navigateTo({ url: `${ROOT}/settlement/confirm?${q}` });
			} finally {
				uni.hideLoading();
			}
		},
	},
};
</script>

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