<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
			<el-form-item label="检验节点" prop="checkType">
				<el-select v-model="queryParams.checkType" clearable placeholder="请选择检验节点">
					<el-option
						v-for="dict in checkTypes"
						:key="dict.id"
						:label="dict.checkName"
						:value="dict.id"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="物料编码" prop="materialCode">
				<el-input
					v-model="queryParams.materialCode"
					placeholder="请输入物料编码"
					clearable
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="检验结果" prop="checkResult">
				<el-select
				v-model="queryParams.checkResult"
				placeholder="检验结果"
				clearable
				>
				<el-option
					v-for="dict in dict.type.check_result"
					:key="dict.value"
					:label="dict.label"
					:value="dict.value"
				/>
				</el-select>
			</el-form-item>
			<el-form-item label="检测地点" prop="checkLoc">
				<el-input
					v-model="queryParams.checkLoc"
					placeholder="请输入检测地点"
					clearable
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="检验时间" prop="checkTimeArray">
                <el-date-picker
				v-model="queryParams.checkTimeArray"
				format="yyyy-MM-dd HH:mm:ss"
				type="datetimerange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['quality:qcIncomeReport:export']"
				>导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="incomeList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="recordId" align="center" prop="recordId" v-if="false"/>
			<el-table-column label="任务日期" align="center" prop="createTimeStr" width="100"/>
			<el-table-column label="检验任务编号" align="center" prop="checkNo" width="120"/>
			<el-table-column label="订单号" align="center" prop="orderNo" width="150"/>
			<el-table-column label="物料名称" align="center" prop="materialName" width="150"/>
			<el-table-column label="收货数量" align="center" prop="quality" />
			<el-table-column label="单位" align="center" prop="unit" />
			<el-table-column label="产线名称" align="center" prop="supplierName" width="120"/>
			<el-table-column label="检验时间" align="center" prop="checkTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.checkTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="检验节点" align="center" prop="checkName" width="120"/>
			<el-table-column label="检验结果" align="center" prop="checkResult">
			    <template slot-scope="scope">
					<dict-tag :options="dict.type.check_result" :value="scope.row.checkResult"/>
				</template>
            </el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleLook(scope.row)"
						v-hasPermi="['quality:qcIncomeReport:edit']"
					>查看报告</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total>0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
		/>

		<!-- 产品巡检报告 -->
		<el-dialog :title="title" :visible.sync="open" width="1370px" append-to-body>
			<el-row>
				<el-col :span="20">
					<el-button
						    class="print-btn"
							size="mini"
							type="primary"
							icon="el-icon-edit"
							@click="handlePrint(form)"
						>打印</el-button>
				</el-col>
			</el-row>
			<!-- 打印整个printFrom区域 -->
			<div id="printForm">
				<el-form :ref="formRef" :model="form">
					<!-- 表头-工单信息 -->
					<el-row>
						<el-col :span="7">
							<img src="@/assets/logo/lanjv.png" class="report-logo"/>
						</el-col>
						<el-col :span="10" class="center-text">
							<span style="font-size: 20px;padding: 13px;">中山榄菊日化实业有限公司</span>
						</el-col>
					</el-row>
					<el-row>
						<el-col :offset="8" :span="8" class="center-text">
							<span style="font-size: 18px;padding: 6px;">产品巡检记录表</span>
						</el-col>
					</el-row>
					<!-- 导航栏 -->
					<el-row class="my-print-nav">
						<el-col :span="3">生成车间:{{form.supplierName}}</el-col>
						<el-col :span="3">生成线体:{{form.lineName}}</el-col>
						<el-col :span="3">检查日期:{{form.checkTimeStart}}</el-col>
						<el-col :span="4">产品名称:{{form.materialName}}</el-col>
						<el-col :span="6">批次号:{{form.incomeBatchNo}}</el-col>
						<el-col :span="4">生产类型:
							<el-checkbox-group  v-model="checkList">
								<el-checkbox label="正常"></el-checkbox>
								<el-checkbox label="返修"></el-checkbox>
								<el-checkbox label="试产"></el-checkbox>
							</el-checkbox-group>
						</el-col>
					</el-row>
					<!-- 主数据 -->
					<el-table
						v-if="refreshNewWorkerTable"
						v-loading="newWorkerLoading"
						class="my-print-table"
						:data="form.checkInfos"
						border
						style="width: 100%">
						<el-table-column label="id" align="center" prop="recordId" v-if="false"/>
						<el-table-column label="序号" type="index" align="center" :index="indexMethod"/>
						<el-table-column label="项目名称" width="155" align="left" prop="ruleName" />
						<el-table-column label="上午" align="center" >
							<el-table-column prop="column080090" label="8:00-9:00" width="80" align="center"/>
							<el-table-column prop="column090100" label="9:00-10:00" width="95" align="center"/>
							<el-table-column prop="column100110" label="10:00-11:00" width="95" align="center"/>
							<el-table-column prop="column110120" label="11:00-12:00" width="95" align="center"/>
						</el-table-column>
						<el-table-column label="下午" align="center" >
							<el-table-column prop="column133143" label="13:30-14:30" width="95" align="center"/>
							<el-table-column prop="column143153" label="14:30-15:30" width="95" align="center"/>
							<el-table-column prop="column153163" label="15:30-16:30" width="95" align="center"/>
							<el-table-column prop="column163173" label="16:30-17:30" width="95" align="center"/>
						</el-table-column>
						<el-table-column label="加班" align="center" >
							<el-table-column prop="column123133" label="12:30-13:30" width="95" align="center"/>
							<el-table-column prop="column180190" label="18:00-19:00" width="95" align="center"/>
							<el-table-column prop="column190200" label="19:00-20:00" width="95" align="center"/>
							<el-table-column prop="column200210" label="20:00-21:00" width="95" align="center"/>
						</el-table-column>
					</el-table>

					<br/>
					<!-- 底部 -->
					<el-row class="my-print-foot">
						<el-col :offset="1" :span="3">检查人:</el-col>
						<el-col :offset="2" :span="3">品质主管:</el-col>

					</el-row>
					</el-form>
			</div>

			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 打印首检对话框 -->
		<el-dialog :title="title" :visible.sync="firstReportOpen" width="1000px" append-to-body>
			<el-row>
				<el-col :span="20">
					<el-button
						    class="print-btn"
							size="mini"
							type="primary"
							icon="el-icon-edit"
							@click="handlePrint(form)"
						>打印</el-button>
				</el-col>
			</el-row>
			<!-- 打印整个firstReportPrint区域 -->
			<div id="firstReportPrint">
				<el-form ref="form" :model="form" label-width="100px">
					<el-row>
						<el-col :span="7">
							<img src="@/assets/logo/lanjv.png" class="report-logo"/>
						</el-col>
						<el-col :span="10" class="center-text">
							<h1>中山榄菊日化实业有限公司</h1>
						</el-col>
					</el-row>
					<el-row>
						<el-col :offset="8" :span="8" class="center-text">
							<h2>（黑蚊香）首检确认表</h2>
						</el-col>
					</el-row>
					<el-row>
						<el-col :offset="16" :span="8">
							<el-form-item label="检验标准" :prop="this.standardNo">
								<span>{{ this.standardNo }}</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="16">
							<el-form-item label="产品名称" prop="materialName">
								<el-input v-model="form.materialName" disabled />
							 </el-form-item>
						 </el-col>
						<el-col :span="8">
							<el-form-item label="产品编码" prop="materialCode">
								<el-input v-model="form.materialCode" disabled />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="首检日期" prop="checkTime">
								<el-input v-model="form.checkTime" disabled>
									{{ parseTime(form.checkTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="16">
							<el-form-item label="首检原因" >
								<el-input   disabled/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<!-- 检验项目明细 -->
							<el-table v-loading="loading" :data="checkProjectList" >
								<el-table-column type="selection" width="55" align="center" />
								<el-table-column label="序号" align="center" type="index" width="100"/>
								<el-table-column label="检验项目" align="center" prop="ruleName" />
								<el-table-column label="内容" align="center" prop="checkStandard" width="200"/>
								<el-table-column label="实际检验结果" align="center" prop="propertyCode" width="200">
									<template slot-scope="scope">
										<dict-tag
											:options="dict.type.qc_rule_prop"
											:value="scope.row.propertyCode"
										/>
									</template>
								</el-table-column>
								<el-table-column label="判定" align="center" prop="status" >
								    <template slot-scope="scope">
										<dict-tag :options="dict.type.check_result" :value="scope.row.status"/>
									</template>
								</el-table-column>
							</el-table>
						</el-col>
					</el-row>
					<el-row style="margin-top: 10px;">
						<el-col :span="20">
							<el-form-item label="备注：" label-width="160px">
								<el-input type="textarea" disabled/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="20">
							<el-form-item label="综合结论："  label-width="160px">
								<el-input type="textarea" disabled/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="20">
							<el-form-item label="车间组长/机管员签名"  label-width="160px">
								<el-input disabled/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="20">
							<el-form-item label="质量管理部品管员签名" prop="checkManName" label-width="160px">
								<el-input disabled/>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>

			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleDone">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { listProduce, getProduce, delProduce, addProduce, updateIncome,getProduceReportXJ} from "@/api/quality/produceReport";
import { getCkeckProjectList} from "@/api/quality/incomeReport";
import { getCheckTypes } from "@/api/quality/qcProduce";
import moment from 'moment';
export default {
	name: "Income",
	dicts: ["unit","check_status","check_result"],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			//打印
			formRef: 'form',
			newWorkerLoading: false,
			refreshNewWorkerTable:true,
			validateRules: [],
			checkList: [],
			standardNo: null,
			printData: {
				printable: 'printForm',
				ignore: ['no-print'],
				workCenter: "暂无数据",
				SAPNo: null,
				manufacture: null,
				auditor: null,
				printDate: null,
				factory: null,
				productDate: null,
				supplierName:null,
				lineName:null,
				checkTimeStart:null,
				materialName:null,
				incomeBatchNo:null,
				checkInfos:[]
			},
			printDialogVisible: false,
			// 来料检验表格数据
			incomeList: [],
			// 检验项目列表
			checkProjectList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			firstReportOpen: false,
			// 查询参数
			queryParams: {
				checkTimeArray: [],
				incomeTimeArray: [],
				pageNum: 1,
				pageSize: 10,
				checkNo: null,
				incomeBatchNo: null,
				orderNo: null,
				materialCode: null,
				materialName: null,
				quality: null,
				unit: null,
				supplierCode: null,
				supplierName: null,
				incomeTime: null,
				checkLoc: null,
				checkStatus: null,
				checkManCode: null,
				checkManName: null,
				checkTime: null,
				checkResult: null,
				status: null,
				attr1: null,
				attr2: null,
				attr3: null,
				attr4: null,
				factoryCode: null,
			},
			// 表单参数
			form: {},
			checkTypes:[],
			// 表单校验
			rules: {
				/* incomeBatchNo: [
					{ required: true, message: "来料批次号不能为空", trigger: "blur" }
				], */
			}
		};
	},
	created() {
		this.getDate();
		this.getList();
		this.getCheckTypes();
	},
	methods: {
		// 生成表头序号
		indexMethod(index) {
			return index + 1;
		},
		/****/
		//获取检验节点
		getCheckTypes() {
           	getCheckTypes('produce').then(response => {
				this.checkTypes = response;
			});
		},
        /**获取默认查询时间段**/
		getDate() {
			let start = this.Fungetdate (0)
			let end = this.Fungetdate (1)
			//this.queryParams.incomeTimeArray.push(start,end)
			this.queryParams.checkTimeArray.push(start,end)
		},
		Fungetdate (num) {
			var dd = new Date();
			dd.setDate(dd.getDate() + num);
			var y = dd.getFullYear();
			var m = dd.getMonth() + 1;//获取当前月份的日期
			var d = dd.getDate();
			return y + "-" + m + "-" + d+" 00:00:00";
		},

		/** 查询来料检验列表 */
		getList() {
			this.loading = true;

			if(this.queryParams.checkTimeArray.length>0){
				this.queryParams.checkTimeStart = moment(this.queryParams.checkTimeArray[0]).format('YYYY-MM-DD HH:mm:ss');
				this.queryParams.checkTimeEnd = moment(this.queryParams.checkTimeArray[1]).format('YYYY-MM-DD HH:mm:ss');
			}

			listProduce(this.queryParams).then(response => {
				this.incomeList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				recordId: null,
				checkNo: null,
				incomeBatchNo: null,
				orderNo: null,
				materialCode: null,
				materialName: null,
				quality: null,
				unit: null,
				supplierCode: null,
				supplierName: null,
				incomeTime: null,
				checkLoc: null,
				checkStatus: null,
				checkManCode: null,
				checkManName: null,
				checkTime: null,
				checkResult: null,
				status: null,
				attr1: null,
				attr2: null,
				attr3: null,
				attr4: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
				factoryCode: null,
				delFlag: null,

			};
			this.resetForm("form");
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.recordId)
			this.single = selection.length!==1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = "添加来料检验";
		},
		/** 查看按钮操作 */
		handleLook(row) {
			this.reset();
			const recordId = row.recordId || this.ids

			if(row.checkType =='checkTypeSC') {
				getProduce(recordId).then(response => {
					this.form = response.data;
					//首检报告
					this.form.printable = 'firstReportPrint'; //打印时需要
					this.form.ignore = ['no-print'];//打印时需要
					this.firstReportOpen = true;
					this.title = "首检检验报告";
				})
				this.queryParams.recordId = recordId;
				this.getCheckedProjectList();
			}else {

				const orderNo = row.orderNo;
				getProduceReportXJ(orderNo).then(response => {
					this.form = response;
					//巡检报告
					this.form.printable = 'printForm'; //打印时需要
					this.form.ignore = ['no-print'];//打印时需要
					this.open = true;
					this.title = "巡检检验报告";
					this.refreshNewWorkerTable = true // 立即将refreshProTable设置为true，显示表格
					this.newWorkerLoading = false // 设置加载状态为false，表示加载完成
				})
			}

		},
		/** 提交按钮 */
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.form.recordId != null) {
						updateIncome(this.form).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.open = false;
							this.getList();
						});
					} else {
						addProduce(this.form).then(response => {
							this.$modal.msgSuccess("新增成功");
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const recordIds = row.recordId || this.ids;
			this.$modal.confirm('是否确认删除来料检验编号为"' + recordIds + '"的数据项？').then(function() {
				return delProduce(recordIds);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download('quality/qcIncome/export', {
				...this.queryParams
			}, `income_${new Date().getTime()}.xlsx`)
		},
		/**获取检验项目列表 */
		getCheckedProjectList(){
			this.loading = true;
			getCkeckProjectList(this.queryParams).then((response) => {
				this.checkProjectList = response.rows;
				this.total = response.total;
				this.loading = false;
				this.standardNo = this.checkProjectList[0].standardNo || '20240109test';
			});
		},
		// 打印预览-浏览器打印
		handlePrint(params) {

			printJS({
				printable: params.printable, // 标签元素id
				type: params.type || 'html',
				maxWidth: 1500, // 最大宽度
				font_size: "",// 设置字体大小
				//header: "生产过程检验结果报告",//params.header, // '表单',
				targetStyles: ['*'],
				style: '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾
				ignoreElements: params.ignore || [], // ['no-print']
				properties: params.properties || null
			})
		},
		handleDone() {
			this.firstReportOpen = false;
			this.reset();
		},
	}
};
</script>
<style scoped>
.print-btn{
	margin-bottom: 15px;
	margin-left: 10px;
}
.center-text {
  text-align: center;
}
.my-print-nav {
  margin-top: 15px;
  margin-bottom: 15px;
}
.report-logo {
	margin-top: 15px;
	margin-left: 20px;
    height: 38px;
}
</style>
