<template>
	<el-container>
		<el-header>
			<div class="right-panel">
				<el-input v-model="query.batch"
				placeholder="大批号"
				clearable
				style="width: 180px;"
				></el-input>
				<el-input v-model="query.sub_batch"
				placeholder="子批号"
				clearable
				style="width: 180px; margin: 5px"
				></el-input>
				<el-select
					v-model="query.kind"
					placeholder="白料口径"
					style="width: 130px;"
					:clearable="true"
				>
					<el-option label="黑化领用" value="黑化领用"></el-option>
					<el-option label="入库数量" value="入库数量"></el-option>
					<el-option label="谱系兜底" value="谱系兜底"></el-option>
				</el-select>
				<el-date-picker
					v-model="query.time_start"
					type="date"
					placeholder="最后操作开始日期"
					value-format="YYYY-MM-DD"
					clearable
					style="width: 150px; margin: 5px"
				></el-date-picker>
				<el-date-picker
					v-model="query.time_end"
					type="date"
					placeholder="最后操作结束日期"
					value-format="YYYY-MM-DD"
					clearable
					style="width: 150px; margin:0"
				></el-date-picker>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
				<el-button
					@click="handleExport"
					class="tables"
					type="primary"
				>导出</el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<el-table
				ref="table"
				:data="tableData"
				id="exportDiv"
				stripe
				class="totalFooterTable"
				style="height: 100%;"
				:summary-method="getSummaries"
				show-summary
			>
				<el-table-column type="expand">
					<template #default="scope">
						<el-descriptions :column="4" size="small" border style="margin: 0 20px;">
							<el-descriptions-item v-for="(v, k) in displayData(scope.row.data)" :key="k" :label="k">{{ v }}</el-descriptions-item>
						</el-descriptions>
					</template>
				</el-table-column>
				<el-table-column label="大批号" prop="batch" min-width="200" fixed="left">
					<template #default="scope"><span>{{ scope.row.batch }}</span></template>
				</el-table-column>
				<el-table-column label="物料" min-width="140">
					<template #default="scope"><span>{{ scope.row.material_start_name }}</span></template>
				</el-table-column>
				<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>{{ scope.row.data.直通_总合格数 }}</span></template>
				</el-table-column>
				<el-table-column label="直通良率(%)" class-name="colorheader5">
					<template #default="scope"><span>{{ scope.row.data.直通_良率 }}</span></template>
				</el-table-column>
				<el-table-column label="白料口径" width="120">
					<template #default="scope"><span>{{ scope.row.data.直通_口径 }}</span></template>
				</el-table-column>
				<el-table-column label="子批数" width="70">
					<template #default="scope"><span>{{ subCount(scope.row) }}</span></template>
				</el-table-column>
				<el-table-column label="子批次" min-width="260" show-overflow-tooltip>
					<template #default="scope"><span>{{ scope.row.data.直通_子批次 }}</span></template>
				</el-table-column>
				<el-table-column label="首次操作" width="100">
					<template #default="scope"><span>{{ (scope.row.first_time || '').slice(0, 10) }}</span></template>
				</el-table-column>
				<el-table-column label="最后操作" width="100">
					<template #default="scope"><span>{{ (scope.row.last_time || '').slice(0, 10) }}</span></template>
				</el-table-column>
			</el-table>
		</el-main>
		<el-footer>
			<el-pagination
					background
					:small="true"
					:total="dataTotal"
					layout="total, sizes, prev, pager, next, jumper"
					:page-size="params.page_size"
					:page-sizes="[20, 50, 100, 200]"
					:current-page="params.page"
					@current-change="getList"
					@update:page-size="getList2"
				></el-pagination>
		</el-footer>
	</el-container>
</template>

<script>
export default {
	name: "zt_batch_gx",
	data() {
		return {
			query: {
				batch: '',
				sub_batch: '',
				kind: '',
				time_start: '',
				time_end: '',
			},
			params: {
				page: 1,
				page_size: 20,
				ordering: "-last_time",
				querys: [
					[{field: "data__has_key", compare: "", value: "直通_白料数"}]
				],
			},
			dataTotal: 0,
			tableData: [],
		};
	},
	mounted() {
		this.getList();
	},
	methods: {
		subCount(row) {
			let s = row.data.直通_子批次;
			return s ? s.split(";").length : 0;
		},
		displayData(data) {
			// count_* 字段后缀翻译为中文展示(注意 _count_ok_full 须在 _count_ok 之前替换)
			const map = [
				["_count_ok_full", "_完全合格数"],
				["_count_notok", "_不合格数"],
				["_count_ok", "_合格数"],
				["_count_use", "_领用数"],
				["_count_real", "_生产数"],
				["_count_pn_jgqbl", "_加工前不良"],
			];
			const out = {};
			for (const k in data) {
				let nk = k;
				for (const [en, cn] of map) {
					if (nk.includes(en)) {
						nk = nk.replace(en, cn);
						break;
					}
				}
				out[nk] = data[k];
			}
			return out;
		},
		getList(val) {
			let that = this;
			that.params.page = val ? val : 1;
			that.$API.wpm.batchstquery.req(that.params).then((res) => {
				if (res.count > 0) {
					that.tableData = res.results;
					that.dataTotal = res.count;
				} else {
					that.tableData = [];
					that.dataTotal = 0;
				}
			});
		},
		getList2(val) {
			let that = this;
			that.params.page = 1;
			that.params.page_size = val;
			that.getList(1);
		},
		handleQuery() {
			let that = this;
			that.params.page = 1;
			let arr = [{field: "data__has_key", compare: "", value: "直通_白料数"}];
			for (let key in that.query) {
				if (that.query[key] != "" && that.query[key] != null && that.query[key] != undefined) {
					let obj = {};
					obj.value = that.query[key];
					if (key == 'batch') {
						obj.field = "batch";
						obj.compare = "contains";
					} else if (key == 'sub_batch') {
						// JSONField 键上 contains 是 JSON 包含语义, 子串匹配须用 icontains
						obj.field = "data__直通_子批次";
						obj.compare = "icontains";
					} else if (key == 'kind') {
						obj.field = "data__直通_口径";
						obj.compare = "icontains";
					} else if (key == 'time_start') {
						obj.compare = "gte";
						obj.field = "last_time";
					} else if (key == 'time_end') {
						obj.compare = "lte";
						obj.field = "last_time";
						obj.value = that.query[key] + " 23:59:59";
					}
					arr.push(obj);
				}
			}
			that.params.querys = [arr];
			this.getList();
		},
		getSummaries({ columns, data }) {
			const sums = [];
			let whiteSum = 0, okSum = 0;
			data.forEach((r) => {
				whiteSum += Number(r.data.直通_白料数) || 0;
				okSum += Number(r.data.直通_总合格数) || 0;
			});
			columns.forEach((column, index) => {
				if (index === 1) {
					sums[index] = "合计";
					return;
				}
				if (column.label == "白料数") {
					sums[index] = whiteSum ? Number(whiteSum.toFixed(1)) : "";
				} else if (column.label == "直通总合格数") {
					sums[index] = okSum || "";
				} else if (column.label == "直通良率(%)") {
					sums[index] = whiteSum ? ((okSum / whiteSum) * 100).toFixed(2) : "";
				} else {
					sums[index] = "";
				}
			});
			return sums;
		},
		handleExport() {
			this.$XLSX("#exportDiv", "大批直通良率统计");
		},
	},
};
</script>

<style scoped>
</style>
