<template>
	<el-container>
		<el-header>
			<div class="right-panel">
				<el-date-picker
					v-model="query.last_time__gte"
					type="date"
					value-format="YYYY-MM-DD"
					placeholder="开始时间"
					style="width: 150px"
				/>
				<el-date-picker
					v-model="query.last_time__lte"
					type="date"
					value-format="YYYY-MM-DD"
					placeholder="结束时间"
					style="margin-left: 2px; width: 150px"
				/>
				<el-input v-model="query.name__contains" 
					placeholder="产品名称" 
					clearable 
					style="width: 200px;"
				></el-input>
				<el-input v-model="query.batch__contains" 
					placeholder="批次号" 
					clearable 
					style="width: 200px;"
				></el-input>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="apiObj"
				:params="params"
				:query="params"
				id="exportDiv"
				row-key="id"
				:summary-method="getSummaries"
				show-summary
				stripe
			>
				<el-table-column type="index" width="50"  fixed="left"/>
				<el-table-column label="产品名称" prop="material_start_name" fixed="left" min-width="100">
				</el-table-column>
				<el-table-column label="批次编号" fixed="left" prop="batch">
				</el-table-column>
				<el-table-column label="版型" prop="material_start_model" fixed="left">
				</el-table-column>
				<el-table-column label="检测日期" fixed="left" prop="batch" width="90">
					<template #default="scope">
						{{ scope.row.data.中检一_日期 }}
					</template>
				</el-table-column>
				<el-table-column label="中检数" fixed="left">
					<template #default="scope">
						<span>{{ scope.row.data.中检一_count_use }}</span>
					</template>
				</el-table-column>
				<el-table-column label="合格数" fixed="left">
					<template #default="scope">
						<span>{{ scope.row.data.中检一_count_ok }}</span>
					</template>
				</el-table-column>
				<el-table-column label="炸" align="center" class-name="colorheader1">
					<el-table-column label="数量" class-name="colorheader1">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_含缺陷_炸}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader1">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_含缺陷_炸_比例">{{scope.row.data.中检一_含缺陷_炸_比例 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="偏" align="center" class-name="colorheader2">
					<el-table-column label="数量" class-name="colorheader2">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_含缺陷_偏}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader2">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_含缺陷_偏_比例">{{scope.row.data.中检一_含缺陷_偏_比例 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="掉头" align="center" class-name="colorheader3">
					<el-table-column label="数量" class-name="colorheader3">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_含缺陷_掉头}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader3">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_含缺陷_掉头_比例">{{scope.row.data.中检一_含缺陷_掉头_比例 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="台阶划伤" align="center" class-name="colorheader4">
					<el-table-column label="数量" class-name="colorheader4">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_含缺陷_台阶划伤}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader4">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_含缺陷_台阶划伤_比例">{{scope.row.data.中检一_含缺陷_台阶划伤_比例 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="柱面划伤" align="center" class-name="colorheader5">
					<el-table-column label="数量" class-name="colorheader5">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_含缺陷_柱面划伤}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader5">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_含缺陷_柱面划伤_比例">{{scope.row.data.中检一_含缺陷_柱面划伤_比例 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="台棱" align="center" class-name="colorheader6">
					<el-table-column label="数量" class-name="colorheader6">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_含缺陷_台棱}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader6">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_含缺陷_台棱_比例">{{scope.row.data.中检一_含缺陷_台棱_比例 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="台糙" align="center" class-name="colorheader7">
					<el-table-column label="数量" class-name="colorheader7">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_含缺陷_台糙}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader7">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_含缺陷_台糙_比例">{{scope.row.data.中检一_含缺陷_台糙_比例 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="尺寸大/小" align="center" class-name="colorheader1">
					<el-table-column label="数量" class-name="colorheader1">
						<template #default="scope">
							<span>{{ scope.row.data['中检一_含缺陷_尺寸大/小']}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader1">
						<template #default="scope">
							<span v-if="scope.row.data['中检一_含缺陷_尺寸大/小_比例']">{{scope.row.data['中检一_含缺陷_尺寸大/小_比例'] }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="崩" align="center" class-name="colorheader2">
					<el-table-column label="数量" class-name="colorheader2">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_含缺陷_崩}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader2">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_含缺陷_崩_比例">{{scope.row.data.中检一_含缺陷_崩_比例 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="修崩/炸" align="center" class-name="colorheader3">
					<el-table-column label="数量" class-name="colorheader3">
						<template #default="scope">
							<span>{{ scope.row.data['中检一_含缺陷_修崩/炸']}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader3">
						<template #default="scope">
							<span v-if="scope.row.data['中检一_含缺陷_修崩/炸_比例']">{{scope.row.data['中检一_含缺陷_修崩/炸_比例'] }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="拆头" align="center" class-name="colorheader4">
					<el-table-column label="数量" class-name="colorheader4">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_含缺陷_拆头}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader4">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_含缺陷_拆头_比例">{{scope.row.data.中检一_含缺陷_拆头_比例 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="外黑" align="center" class-name="colorheader5">
					<el-table-column label="数量" class-name="colorheader5">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_含缺陷_外黑}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader5">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_含缺陷_外黑_比例">{{scope.row.data.中检一_含缺陷_外黑_比例 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="外磕" align="center" class-name="colorheader6">
					<el-table-column label="数量" class-name="colorheader6">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_含缺陷_外磕}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader6">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_含缺陷_外磕_比例">{{scope.row.data.中检一_含缺陷_外磕_比例 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="打毛/打台" align="center" class-name="colorheader7">
					<el-table-column label="数量" class-name="colorheader7">
						<template #default="scope">
							<span>{{ scope.row.data['中检一_含缺陷_打毛/打台']}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader7">
						<template #default="scope">
							<span v-if="scope.row.data['中检一_含缺陷_打毛/打台_比例']">{{scope.row.data['中检一_含缺陷_打毛/打台_比例'] }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="喷码" align="center" class-name="colorheader1">
					<el-table-column label="数量" class-name="colorheader1">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_含缺陷_喷码}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader1">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_含缺陷_喷码_比例">{{scope.row.data.中检一_含缺陷_喷码_比例 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="掉皮" align="center" class-name="colorheader2">
					<el-table-column label="数量" class-name="colorheader2">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_含缺陷_掉皮}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader2">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_含缺陷_掉皮_比例">{{scope.row.data.中检一_含缺陷_掉皮_比例 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="量崩" align="center" class-name="colorheader3">
					<el-table-column label="数量" class-name="colorheader3">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_含缺陷_量崩}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader3">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_含缺陷_量崩_比例">{{scope.row.data.中检一_含缺陷_量崩_比例 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="坑" align="center" class-name="colorheader4">
					<el-table-column label="数量" class-name="colorheader4">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_含缺陷_坑}}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader4">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_含缺陷_坑_比例">{{scope.row.data.中检一_含缺陷_坑_比例 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="合格"  class-name="colorheader5">
					<el-table-column label="数量" class-name="colorheader5">
						<template #default="scope">
							<span>{{ scope.row.data.中检一_count_ok }}</span>
						</template>
					</el-table-column>
					<el-table-column label="比例" class-name="colorheader5">
						<template #default="scope">
							<span v-if="scope.row.data.中检一_合格率">{{scope.row.data.中检一_合格率 }}%</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="备注" align="center" class-name="colorheader6">
					<template #default="scope">
						<span>{{ scope.row.data.中检一_缺陷_备注 }}</span>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "statistics_guan",
	data() {
		return {
			params: {
				ordering:'-data__中检一_小日期',
				querys:[[{field:"data__has_key",compare:"",value:"中检一_日期"}]],
			},
			query:{
				name__contains:'',
				batch__contains:'',
				last_time__gte:'',
				last_time__lte:'',
			},
			apiObj: this.$API.wpm.batchstquery,
			options:[],
			tableData:[],
		};
	},
	methods: {
		handleQuery(){
			let that = this;
			let querys = [[{field:"data__has_key",compare:"",value:"中检一_日期"}]];
			let obj = {},obj1 = {},obj2 = {},obj3 = {};
			obj.field = 'data__中检一_批次号';
			obj.value = that.query.batch__contains;
			obj.compare = '';

			obj1.field = 'data__中检一_日期';
			obj1.value = that.query.last_time__gte;
			obj1.compare = 'gte';

			obj2.field = 'data__中检一_日期';
			obj2.value = that.query.last_time__lte;
			obj2.compare = 'lte';

			obj3.field = 'material_start__name';
			obj3.value = that.query.name__contains;
			obj3.compare = 'contains';

			if(that.query.batch__contains!==''&&that.query.batch__contains!==null){
				querys[0].push(obj);
			}
			if(that.query.last_time__gte!==''&&that.query.last_time__gte!==null){
				querys[0].push(obj1);
			}
			if(that.query.last_time__lte!==''&&that.query.last_time__lte!==null){
				querys[0].push(obj2);
			}
			if(that.query.name__contains!==''&&that.query.name__contains!==null){
				querys[0].push(obj3);
			}
			that.params.querys = querys;
			this.$refs.table.queryData(that.params);
		},
		getCountQt(data,type){
			let count_qt = 0,count = 0;
		},
		getSummaries({ columns, data }) {
			const sums = [];

			// 总中检数（作为比率分母）
			const totalCount = data.reduce((s, item) =>
				s + Number(item.data['中检一_count_use'] || 0), 0);

			// 数量列：列索引 → data 字段名
			const countFieldMap = {
				5:  '中检一_count_use',
				6:  '中检一_count_ok',
				7:  '中检一_含缺陷_炸',
				9:  '中检一_含缺陷_偏',
				11: '中检一_含缺陷_掉头',
				13: '中检一_含缺陷_台阶划伤',
				15: '中检一_含缺陷_柱面划伤',
				17: '中检一_含缺陷_台棱',
				19: '中检一_含缺陷_台糙',
				21: '中检一_含缺陷_尺寸大/小',
				23: '中检一_含缺陷_崩',
				25: '中检一_含缺陷_修崩/炸',
				27: '中检一_含缺陷_拆头',
				29: '中检一_含缺陷_外黑',
				31: '中检一_含缺陷_外磕',
				33: '中检一_含缺陷_打毛/打台',
				35: '中检一_含缺陷_喷码',
				37: '中检一_含缺陷_掉皮',
				39: '中检一_含缺陷_量崩',
				41: '中检一_含缺陷_坑',
				43: '中检一_count_ok',
			};

			// 预先求和
			const sumCache = {};
			Object.entries(countFieldMap).forEach(([idx, field]) => {
				sumCache[idx] = data.reduce((s, item) =>
					s + Number(item.data[field] || 0), 0);
			});

			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = <p class="count_row">合计<br /><br />比率<br /></p>;
					return;
				}
				if (countFieldMap[index] !== undefined) {
					const sum = sumCache[index];
					if (index === 5 || index === 6) {
						// 中检数/合格数：只显示合计
						sums[index] = <p class="count_row"><div ref="borrowAmount1">{sum}</div><br /><div ref="borrowAmount2">-</div></p>;
					} else {
						const ratio = totalCount > 0
							? Number(sum / totalCount * 100).toFixed(2)
							: '0.00';
						sums[index] = <p class="count_row"><div ref="borrowAmount1">{sum}</div><br /><div ref="borrowAmount2">{ratio}%</div></p>;
					}
				}
				// 比例子列留空，避免重复
			});
			return sums;
		},
	},
};
</script>

<style scoped>
</style>
