<template>
	<view>
		<view class="fabric-out-sectionTitle">{{ title }}</view>
		<slot name="before-list" />
		<view class="fabric-out-detailList">
			<dataNull
				v-if="!groups.length"
				src="/src/static/img/chahua/gjNull.png"
				title="暂无出仓明细"
				title1="扫码后将在此展示"
			/>
			<view
				v-for="product in groups"
				:key="product.group_key"
				class="fabric-out-detailCard process-in-productCard"
			>
				<view class="process-in-productHead">
					<text class="process-in-productTitle">
						{{ product.product_code || '-' }}
						<text v-if="product.product_name" class="process-in-subText"> {{ product.product_name }}</text>
					</text>
					<text class="process-in-productSum">
						匹数 {{ product.out_roll }} / 数量 {{ product.out_weight }}
					</text>
				</view>

				<view
					v-for="color in product.colors"
					:key="color.group_key"
					class="process-in-colorBlock"
				>
					<view class="process-in-colorHead">
						<text class="process-in-colorTitle">
							色号 {{ color.product_color_code || '-' }}
							<text v-if="color.product_color_name" class="process-in-subText">
								{{ color.product_color_name }}
							</text>
						</text>
						<text class="process-in-colorSum">
							匹数 {{ color.out_roll }} / 数量 {{ color.out_weight }}
						</text>
					</view>
					<view class="process-in-colorMeta">
						<text>染整单：{{ color.quote_order_no || '-' }}</text>
						<text>缸号：{{ color.dye_factory_dyelot_number || '-' }}</text>
					</view>

					<view class="process-in-fcTitle">细码（{{ color.fine_codes.length }}）</view>
					<view v-if="!color.fine_codes.length" class="process-in-fcEmpty">暂无细码</view>
					<scroll-view v-else scroll-x class="process-in-fcScroll">
						<view class="process-in-fcTable" :style="{ width: fineTableWidth }">
							<view class="process-in-fcRow process-in-fcHead">
								<view
									v-for="col in fineColumns"
									:key="col.key"
									class="process-in-fcCell"
									:style="cellStyle(col)"
								>{{ col.label }}</view>
							</view>
							<view
								v-for="(fc, fcIndex) in color.fine_codes"
								:key="fc.id || fcIndex"
								class="process-in-fcRow"
							>
								<view
									v-for="col in fineColumns"
									:key="col.key"
									class="process-in-fcCell"
									:class="{ 'process-in-fcAction': col.key === 'action' }"
									:style="cellStyle(col)"
									@click="onCellTap(col.key, fc)"
								>{{ formatFineCell(fc, col.key) }}</view>
							</view>
						</view>
					</scroll-view>
					<view v-if="deletable && color.fine_codes.length" class="process-in-fcTip">
						勾选上方「删除」后扫码，或点击「删除」列移除细码
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { buildItemGroups } from '@/common/storeGoodsProcessOut';

const FINE_COLUMNS = [
	{ label: '卷号', key: 'volume_number', width: 90 },
	{ label: '匹数', key: 'roll', width: 90 },
	{ label: '数量', key: 'weight', width: 110 },
	{ label: '条码', key: 'bar_code', width: 220 },
	{ label: '仓位', key: 'warehouse_bin_name', width: 120 },
	{ label: '缸号', key: 'dye_factory_dyelot_number', width: 140 },
];

export default {
	props: {
		list: { type: Array, default: () => [] },
		title: { type: String, default: '出仓明细' },
		deletable: { type: Boolean, default: false },
	},
	computed: {
		groups() {
			return buildItemGroups(this.list);
		},
		fineColumns() {
			if (!this.deletable) return FINE_COLUMNS;
			return [...FINE_COLUMNS, { label: '操作', key: 'action', width: 90 }];
		},
		fineTableWidth() {
			const total = this.fineColumns.reduce((sum, col) => sum + (col.width || 100), 0);
			return `${total}rpx`;
		},
	},
	methods: {
		cellStyle(col) {
			return {
				width: `${col.width}rpx`,
				minWidth: `${col.width}rpx`,
				maxWidth: `${col.width}rpx`,
			};
		},
		formatFineCell(fc, key) {
			if (key === 'action') return '删除';
			const val = fc[key];
			if (val === 0) return '0';
			return val != null && val !== '' ? val : '-';
		},
		onCellTap(key, fc) {
			if (!this.deletable || key !== 'action') return;
			this.$emit('delete', fc);
		},
	},
};
</script>

<style scoped lang="scss">
@import '@/pages/storefabric/storeFabricBusinessOutPage.scss';

.process-in-productCard {
	padding: 0;
	overflow: hidden;
}
.process-in-productHead {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	background: #f0f7ff;
	border-bottom: 1rpx solid #e6f0ff;
}
.process-in-productTitle {
	font-size: 28rpx;
	font-weight: bold;
	color: #1a1a1a;
	flex: 1;
	padding-right: 16rpx;
}
.process-in-productSum,
.process-in-colorSum {
	font-size: 24rpx;
	color: #666;
	flex-shrink: 0;
}
.process-in-subText {
	font-weight: normal;
	color: #666;
	font-size: 24rpx;
}
.process-in-colorBlock {
	padding: 16rpx 20rpx 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}
.process-in-colorBlock:last-child {
	border-bottom: none;
}
.process-in-colorHead {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8rpx;
}
.process-in-colorTitle {
	font-size: 26rpx;
	font-weight: bold;
	color: #333;
	flex: 1;
	padding-right: 12rpx;
}
.process-in-colorMeta {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx 24rpx;
	font-size: 24rpx;
	color: #888;
	margin-bottom: 12rpx;
}
.process-in-fcTitle {
	font-size: 24rpx;
	color: #2979ff;
	margin-bottom: 8rpx;
}
.process-in-fcEmpty {
	font-size: 24rpx;
	color: #bbb;
	padding: 8rpx 0;
}
.process-in-fcScroll {
	width: 100%;
}
.process-in-fcTable {
	border: 1rpx solid #eee;
	border-radius: 8rpx;
	overflow: hidden;
}
.process-in-fcRow {
	display: flex;
	align-items: stretch;
	border-bottom: 1rpx solid #f0f0f0;
}
.process-in-fcRow:last-child {
	border-bottom: none;
}
.process-in-fcHead {
	background: #fafafa;
}
.process-in-fcCell {
	box-sizing: border-box;
	padding: 10rpx 8rpx;
	font-size: 22rpx;
	color: #333;
	border-right: 1rpx solid #f0f0f0;
	word-break: break-all;
}
.process-in-fcHead .process-in-fcCell {
	font-weight: bold;
	color: #666;
}
.process-in-fcCell:last-child {
	border-right: none;
}
.process-in-fcAction {
	color: #f5222d;
}
.process-in-fcTip {
	margin-top: 8rpx;
	font-size: 22rpx;
	color: #999;
}
</style>
