<template>
	<store-page-layout title="药品价格" :show-back="true">
		<view class="page">
			<view class="toolbar">
				<picker :range="typeLabels" :value="typeIndex" @change="onTypeChange">
					<view class="type-picker">{{ typeLabels[typeIndex] }}</view>
				</picker>
				<view class="save-btn" @click="save">保存</view>
			</view>

			<view v-if="!list.length && !loading" class="empty">暂无药品</view>
			<view v-for="item in list" :key="item.id" class="row">
				<view class="drug-info">
					<text class="drug-name">{{ item.drug_name || item.name }}</text>
					<text class="spec">{{ item.drug_spec || item.spec || '' }}</text>
				</view>
				<view v-if="dirtyMap[item.id]" class="price-inputs">
					<input class="price-input" v-model="dirtyMap[item.id].price" type="digit" placeholder="售价" />
					<input class="price-input" v-model="dirtyMap[item.id].buy_price" type="digit" placeholder="供货价" />
				</view>
			</view>
		</view>
	</store-page-layout>
</template>

<script>
import StorePageLayout from '@/subPackages/sub_platform_admin/components/store-page-layout.vue';
import { DRUG_TYPE_OPTIONS, getStoreDrugsByType, updateStoreDrugPrices } from '@/api/platformStore.js';

export default {
	components: { StorePageLayout },
	data() {
		return {
			storeId: 0,
			typeIndex: 1,
			typeLabels: DRUG_TYPE_OPTIONS.map((o) => o.label),
			list: [],
			dirtyMap: {},
			loading: false,
		};
	},
	onLoad(options) {
		this.storeId = Number(options.id || 0);
		this.reload();
	},
	methods: {
		onTypeChange(e) {
			this.typeIndex = Number(e.detail.value);
			this.reload();
		},
		async reload() {
			if (!this.storeId) return;
			this.loading = true;
			try {
				const type = DRUG_TYPE_OPTIONS[this.typeIndex].value;
				const wrap = await getStoreDrugsByType(this.storeId, type);
				const items = (wrap && wrap.ok && wrap.data) ? (wrap.data.items || wrap.data || []) : [];
				this.list = Array.isArray(items) ? items : [];
				const map = {};
				this.list.forEach((row) => {
					map[row.id] = {
						price: row.price != null ? String(row.price) : '',
						buy_price: row.buy_price != null ? String(row.buy_price) : '',
					};
				});
				this.dirtyMap = map;
			} finally {
				this.loading = false;
			}
		},
		async save() {
			const drugs = this.list.map((row) => ({
				id: row.id,
				price: Number(this.dirtyMap[row.id].price) || 0,
				buy_price: Number(this.dirtyMap[row.id].buy_price) || 0,
			})).filter((d) => d.id > 0);
			if (!drugs.length) {
				uni.showToast({ title: '无数据', icon: 'none' });
				return;
			}
			uni.showLoading({ title: '保存中' });
			try {
				const wrap = await updateStoreDrugPrices({ store_id: this.storeId, drugs });
				if (wrap && wrap.ok) {
					uni.showToast({ title: '保存成功', icon: 'success' });
				}
			} finally {
				uni.hideLoading();
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.page { padding: 24rpx; padding-bottom: 48rpx; }
.toolbar { display: flex; gap: 16rpx; margin-bottom: 20rpx; align-items: center; }
.type-picker { flex: 1; background: #fff; padding: 20rpx; border-radius: 12rpx; font-size: 26rpx; }
.save-btn { background: #6ACDBB; color: #fff; padding: 20rpx 28rpx; border-radius: 12rpx; font-size: 26rpx; }
.row { background: #fff; border-radius: 16rpx; padding: 20rpx; margin-bottom: 12rpx; }
.drug-name { display: block; font-size: 28rpx; font-weight: 600; }
.spec { font-size: 22rpx; color: #999; }
.price-inputs { display: flex; gap: 12rpx; margin-top: 12rpx; }
.price-input { flex: 1; background: #f5f5f5; border-radius: 8rpx; padding: 12rpx; font-size: 26rpx; text-align: center; }
.empty { text-align: center; color: #999; padding: 80rpx 0; }
</style>
