<template>
	<page-layout :is-platform="ctx.isPlatform" title="结算详情" :show-back="true">
		<view class="page" v-if="detail">
			<view class="card">
				<text class="no">{{ detail.settlement_no }}</text>
				<view class="row"><text>结算方式</text><text>{{ detail.settlement_type_text }}</text></view>
				<view class="row"><text>结算金额</text><text class="amount">¥{{ detail.amount }}</text></view>
				<view class="row"><text>明细数</text><text>{{ detail.record_count }}</text></view>
				<view class="row"><text>时间</text><text>{{ detail.created_at_text }}</text></view>
				<view v-if="detail.remark" class="row"><text>备注</text><text>{{ detail.remark }}</text></view>
			</view>

			<view v-if="proofImages.length" class="proof-section">
				<text class="section-title">结算凭证</text>
				<view class="proof-list">
					<image
						v-for="(url, idx) in proofImages"
						:key="url"
						class="proof-img"
						:src="url"
						mode="aspectFill"
						@click="previewProof(idx)"
					/>
				</view>
			</view>

			<view v-if="lines.length" class="lines-section">
				<text class="section-title">明细</text>
				<view v-for="(line, idx) in lines" :key="idx" class="line-row">
					<text class="line-order">{{ line.order_no }}</text>
					<text class="line-drug">{{ line.drug_info }}</text>
					<text class="line-amount">¥{{ line.commission_amount }}</text>
				</view>
			</view>
		</view>
	</page-layout>
</template>

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

export default {
	components: { PageLayout },
	data() {
		return {
			ctx: getSalespersonManageContext('clinic'),
			detail: null,
			lines: [],
			proofImages: [],
		};
	},
	onLoad(options) {
		this.ctx = getSalespersonManageContext(resolveManageMode(options));
		this.loadDetail(Number(options.id || 0), Number(options.store_id || 0));
	},
	methods: {
		async loadDetail(id, storeId) {
			if (!id) return;
			const params = { id };
			if (storeId > 0) params.store_id = storeId;
			const wrap = await this.ctx.api.getSettlementDetail(params);
			if (!wrap || !wrap.ok) return;
			this.detail = wrap.data;
			this.lines = (wrap.data && wrap.data.lines) ? wrap.data.lines : (wrap.data.records || []);
			const proofs = wrap.data && wrap.data.proof_images;
			if (Array.isArray(proofs)) {
				this.proofImages = proofs;
			} else if (typeof proofs === 'string' && proofs) {
				try { this.proofImages = JSON.parse(proofs); } catch (e) { this.proofImages = [proofs]; }
			} else {
				this.proofImages = [];
			}
		},
		previewProof(idx) {
			uni.previewImage({ urls: this.proofImages, current: this.proofImages[idx] });
		},
	},
};
</script>

<style lang="scss" scoped>
.page { padding: 24rpx; }
.card { background: #fff; border-radius: 20rpx; padding: 28rpx; margin-bottom: 24rpx; }
.no { display: block; font-size: 32rpx; font-weight: 600; margin-bottom: 20rpx; }
.row { display: flex; justify-content: space-between; font-size: 26rpx; margin-bottom: 12rpx; color: #666; }
.amount { color: #F97316; font-weight: 600; }
.section-title { font-size: 28rpx; font-weight: 600; margin-bottom: 16rpx; display: block; }
.proof-list { display: flex; flex-wrap: wrap; gap: 16rpx; margin-bottom: 24rpx; }
.proof-img { width: 200rpx; height: 200rpx; border-radius: 12rpx; }
.line-row {
	background: #fff; border-radius: 12rpx; padding: 20rpx; margin-bottom: 12rpx;
}
.line-order { display: block; font-size: 26rpx; font-weight: 600; }
.line-drug { font-size: 24rpx; color: #666; display: block; margin: 8rpx 0; }
.line-amount { font-size: 26rpx; color: #F97316; }
</style>
