<template>
	<view class="warehouse-detail-page">
		<view class="infoCard">
			<view class="infoTitle">坯布资料</view>
			<view class="infoRow">
				<text class="infoLabel">坯布编号</text>
				<text class="infoValue">{{ header.grey_fabric_code || '-' }}</text>
			</view>
			<view class="infoRow">
				<text class="infoLabel">坯布名称</text>
				<text class="infoValue">{{ header.grey_fabric_name || '-' }}</text>
			</view>
			<view class="infoRow">
				<text class="infoLabel">颜　　色</text>
				<text class="infoValue">{{ header.gray_fabric_color_name || '-' }}</text>
			</view>
			<view class="infoRow">
				<text class="infoLabel">织　　厂</text>
				<text class="infoValue">{{ header.supplier_name || '-' }}</text>
			</view>
			<view class="infoRow">
				<text class="infoLabel">机 台 号</text>
				<text class="infoValue">{{ header.machine_number || '-' }}</text>
			</view>
			<view class="infoRow">
				<text class="infoLabel">纱　　批</text>
				<text class="infoValue">{{ header.yarn_batch || '-' }}</text>
			</view>
			<view class="infoRow">
				<text class="infoLabel">仓　　库</text>
				<text class="infoValue">{{ header.warehouse_name || '-' }}</text>
			</view>
			<view class="infoRow">
				<text class="infoLabel">汇总库存</text>
				<text class="infoValue">{{ header.stock_roll || '-' }} 匹 / {{ header.stock_weight || '-' }} KG</text>
			</view>
		</view>

		<view class="summaryBar">
			<text>细码：{{ totals.count }} 条 / {{ totals.roll }} 匹 / {{ totals.weight }} KG</text>
		</view>

		<scroll-view
			scroll-y
			:style="{ height: scrollHeight }"
			refresher-enabled
			:refresher-triggered="triggered"
			@refresherrefresh="onRefresh"
		>
			<dataNull
				v-if="tableRows.length === 0"
				src="/src/static/img/chahua/gjNull.png"
				title="暂无细码明细"
				title1="请返回上一级调整筛选条件"
			/>
			<scroll-view v-else scroll-x class="tableScroll">
				<view class="fineTable" :style="{ width: tableWidth }">
					<view class="tableRow tableHead">
						<view
							v-for="col in columns"
							:key="col.key"
							class="tableCell headCell"
							:style="cellStyle(col)"
						>{{ col.label }}</view>
					</view>
					<view v-for="(row, rowIndex) in tableRows" :key="rowIndex" class="tableRow">
						<view
							v-for="col in columns"
							:key="col.key"
							class="tableCell"
							:style="cellStyle(col)"
						>{{ row[col.key] }}</view>
					</view>
				</view>
			</scroll-view>
		</scroll-view>
	</view>
</template>

<script>
import {
	WAREHOUSE_DETAIL_COLUMNS,
	buildDetailQuery,
	fetchAllWarehouseList,
	getWarehouseDetailTableWidth,
	mapWarehouseDetailRows,
	parsePageQuery,
	sumDetailTotals,
} from '@/common/storeFabricWarehouse';

export default {
	data() {
		return {
			rawList: [],
			scrollHeight: '667px',
			triggered: false,
			columns: WAREHOUSE_DETAIL_COLUMNS,
			header: {
				grey_fabric_id: '',
				grey_fabric_code: '',
				grey_fabric_name: '',
				gray_fabric_color_name: '',
				supplier_name: '',
				machine_number: '',
				yarn_batch: '',
				warehouse_name: '',
				stock_roll: '',
				stock_weight: '',
			},
			queryParams: {},
		};
	},
	computed: {
		tableRows() {
			return mapWarehouseDetailRows(this.rawList);
		},
		tableWidth() {
			return getWarehouseDetailTableWidth(this.columns);
		},
		totals() {
			return sumDetailTotals(this.rawList);
		},
	},
	onLoad(options) {
		const parsed = parsePageQuery(options || {});
		this.header = {
			grey_fabric_id: parsed.grey_fabric_id || '',
			grey_fabric_code: parsed.grey_fabric_code || '',
			grey_fabric_name: parsed.grey_fabric_name || '',
			gray_fabric_color_name: parsed.gray_fabric_color_name || '',
			supplier_name: parsed.supplier_name || '',
			machine_number: parsed.machine_number || '',
			yarn_batch: parsed.yarn_batch || '',
			warehouse_name: parsed.warehouse_name || '',
			stock_roll: parsed.stock_roll || '',
			stock_weight: parsed.stock_weight || '',
		};
		this.queryParams = buildDetailQuery(parsed, parsed);
		uni.setNavigationBarTitle({ title: '细码明细' });
		uni.getSystemInfo({
			success: (res) => {
				this.scrollHeight = `${res.windowHeight - 360}px`;
			},
		});
		if (!this.queryParams.grey_fabric_id) {
			uni.showToast({ title: '缺少坯布参数', icon: 'none' });
			return;
		}
		this.loadList();
	},
	methods: {
		cellStyle(col) {
			return {
				width: `${col.width}rpx`,
				minWidth: `${col.width}rpx`,
				maxWidth: `${col.width}rpx`,
			};
		},
		loadList() {
			fetchAllWarehouseList((p) => this.$u.api.gfmWarehouse.detailList(p), this.queryParams)
				.then((rows) => {
					this.triggered = false;
					this.rawList = rows || [];
				})
				.catch((err) => {
					this.triggered = false;
					this.rawList = [];
					uni.showToast({ title: err.message || '加载失败', icon: 'none' });
				});
		},
		onRefresh() {
			this.triggered = true;
			this.loadList();
		},
	},
};
</script>

<style>
page { background-color: #F8F8F8; }
.warehouse-detail-page { min-height: 100%; padding-bottom: 24rpx; }
.infoCard {
	margin: 20rpx 24rpx 0;
	padding: 20rpx 24rpx;
	background: #fff;
	border-radius: 12rpx;
}
.infoTitle {
	font-size: 30rpx;
	font-weight: bold;
	margin-bottom: 16rpx;
	color: #333;
}
.infoRow {
	display: flex;
	font-size: 26rpx;
	padding: 8rpx 0;
}
.infoLabel {
	width: 160rpx;
	color: #999;
	flex-shrink: 0;
}
.infoValue {
	flex: 1;
	color: #333;
	word-break: break-all;
}
.summaryBar {
	margin: 16rpx 24rpx 0;
	padding: 12rpx 16rpx;
	font-size: 26rpx;
	color: #666;
	background: #fff;
	border-radius: 8rpx;
}
.tableScroll {
	width: 100%;
	margin: 16rpx 24rpx 0;
	background: #fff;
	border-radius: 8rpx;
	box-sizing: border-box;
}
.fineTable {
	display: inline-block;
	vertical-align: top;
	border: 1rpx solid #e1e1e1;
	box-sizing: border-box;
}
.tableRow {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	border-bottom: 1rpx solid #e1e1e1;
}
.tableRow:last-child {
	border-bottom: none;
}
.tableHead {
	background: #f1f1f1;
}
.tableCell {
	flex-shrink: 0;
	padding: 12rpx 8rpx;
	font-size: 22rpx;
	color: #333;
	text-align: center;
	border-right: 1rpx solid #e1e1e1;
	box-sizing: border-box;
	word-break: break-all;
	white-space: normal;
}
.tableCell:last-child {
	border-right: none;
}
.headCell {
	font-weight: bold;
	color: #3e3e3e;
}
</style>
