<template>
	<view class="warehouse-page">
		<view class="filterBar">
			<u-search
				v-model="filters.grey_fabric_code"
				placeholder="坯布编号"
				shape="square"
				:show-action="false"
				height="64"
				@search="loadList"
				@custom="loadList"
			/>
			<u-search
				v-model="filters.grey_fabric_name"
				placeholder="坯布名称"
				shape="square"
				:show-action="false"
				height="64"
				@search="loadList"
				@custom="loadList"
			/>
		</view>

		<view class="summaryBar">
			<text>合计：{{ totals.roll }} 匹 / {{ totals.weight }} KG（{{ totals.count }} 条）</text>
		</view>

		<scroll-view
			scroll-y
			:style="{ height: scrollHeight }"
			refresher-enabled
			:refresher-triggered="triggered"
			@refresherrefresh="onRefresh"
		>
			<dataNull
				v-if="!loading && tableContents.length === 0"
				src="/src/static/img/chahua/gjNull.png"
				title="暂无库存汇总"
				title1="请输入坯布编号或名称查询"
			/>
			<view v-else-if="tableContents.length" class="tableBox">
				<WarehouseDataTable
					:headers="tableHeaders"
					:contents="tableContents"
					:height="tableHeight"
					@row-click="goStockList"
				/>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import WarehouseDataTable from '@/components/storefabric/WarehouseDataTable.vue';
import {
	GROUP_TABLE_COLUMNS,
	buildGroupListQuery,
	buildStockListNavigateQuery,
	calcTableHeight,
	fetchAllWarehouseList,
	mapGroupTableRow,
	sumStockTotals,
	toQueryString,
} from '@/common/storeFabricWarehouse';

export default {
	components: { WarehouseDataTable },
	data() {
		return {
			list: [],
			scrollHeight: '667px',
			triggered: false,
			loading: false,
			tableHeaders: GROUP_TABLE_COLUMNS,
			filters: {
				grey_fabric_code: '',
				grey_fabric_name: '',
			},
		};
	},
	computed: {
		tableContents() {
			return this.list.map(mapGroupTableRow);
		},
		totals() {
			return sumStockTotals(this.list);
		},
		tableHeight() {
			return calcTableHeight(this.tableContents.length);
		},
	},
	onLoad() {
		uni.setNavigationBarTitle({ title: '坯布库存' });
		uni.getSystemInfo({
			success: (res) => {
				this.scrollHeight = `${res.windowHeight - 108}px`;
			},
		});
		this.loadList();
	},
	methods: {
		loadList() {
			if (this.loading) return;
			this.loading = true;
			const params = buildGroupListQuery(this.filters);
			fetchAllWarehouseList((p) => this.$u.api.gfmWarehouse.groupSummaryList(p), params)
				.then((rows) => {
					this.triggered = false;
					this.list = rows || [];
				})
				.catch((err) => {
					this.triggered = false;
					this.list = [];
					uni.showToast({ title: err.message || '加载失败', icon: 'none' });
				})
				.finally(() => {
					this.loading = false;
				});
		},
		onRefresh() {
			this.triggered = true;
			this.loadList();
		},
		goStockList(row) {
			const query = buildStockListNavigateQuery(row);
			uni.navigateTo({
				url: `./storeFabricWarehouseStockList?${toQueryString(query)}`,
			});
		},
	},
};
</script>

<style>
page { background-color: #F8F8F8; }
.warehouse-page { min-height: 100%; }
.filterBar {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
	padding: 12rpx 20rpx;
	background: #fff;
}
.summaryBar {
	padding: 10rpx 24rpx;
	font-size: 24rpx;
	color: #666;
	background: #fff;
	border-top: 1rpx solid #f0f0f0;
}
.tableBox {
	padding: 12rpx;
}
</style>
