<template>
	<el-dialog
		title="过程检验"
		v-model="visible"
		:size="1000"
		destroy-on-close
		@closed="$emit('closed')"
	>
		<el-container v-loading="loading">
			<el-main style="padding: 0 20px 20px 20px">
				<el-form
					ref="dialogForm"
					:model="form"
					:rules="rules"
					label-position="right"
					label-width="100px"
					style="padding: 0 10px"
				>
					<el-row>
						<el-col :md="12" :sm="24">
							<el-form-item label="批次号" prop="batch">
								<el-input
									v-model="form.batch"
									:disabled="batchDisabled"
								/>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="实际生产数">
								<el-input-number
									v-model="form.count_real"
									:min="0"
									class="width-100"
									controls-position="right"
									@change="countChanges"
								/>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="合格数量">
								<el-input-number
									v-model="form.count_ok"
									:min="0"
									class="width-100"
									controls-position="right"
								/>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="不合格数量">
								<el-input-number
									v-model="form.count_notok"
									:min="0"
									class="width-100"
									@change="countChanges"
									controls-position="right"
								/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-divider></el-divider>
					<el-row v-if="mgroupName=='黑化'||mgroupName=='退火'">
						<el-col :span="24">
							<el-form-item label="不合格统计">
								<el-button
									type="primary"
									icon="el-icon-plus"
									@click="notok_add"
								></el-button>
							</el-form-item>
						</el-col>
					</el-row>
					<template v-if="mgroupName=='黑化'||mgroupName=='退火'">
						<el-row style="margin-bottom:10px" v-for="(item, $index) in count_notok_json" :key="item">
							<el-col :span="7">
								<el-input-number
									style="width:90%"
									v-model="item.floor"
									:min="0"
									class="width-100"
									placeholder="层数"
									controls-position="right"
								/>
							</el-col>
							<el-col :span="7">
								<el-input-number
									style="width:90%"
									v-model="item.count_sampling"
									:min="0"
									class="width-100"
									placeholder="抽检数"
									controls-position="right"
								/>
							</el-col>
							<el-col :span="7">
								<el-input-number
									style="width:90%"
									v-model="item.count"
									:min="0"
									class="width-100"
									placeholder="总数"
									controls-position="right"
								/>
							</el-col>
							<el-col :span="2">
								<el-button
									type="danger"
									icon="el-icon-delete"
									@click="notok_del( $index)"
								></el-button>
							</el-col>
						</el-row>
					</template>
					<el-row v-else>
						<el-col :md="12" :sm="24">
							<el-form-item label="划伤">
								<el-input-number
									v-model="form.count_n_hs"
									:min="0"
									class="width-100"
									controls-position="right"
									@change="countChange"
								/>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="气泡">
								<el-input-number
									v-model="form.count_n_qp"
									:min="0"
									class="width-100"
									controls-position="right"
									@change="countChange"
								/>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="水纹">
								<el-input-number
									v-model="form.count_n_swen"
									:min="0"
									class="width-100"
									controls-position="right"
									@change="countChange"
								/>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="崩边">
								<el-input-number
									v-model="form.count_n_bb"
									:min="0"
									class="width-100"
									controls-position="right"
									@change="countChange"
								/>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="雾面">
								<el-input-number
									v-model="form.count_n_wm"
									:min="0"
									class="width-100"
									controls-position="right"
									@change="countChange"
								/>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="小崩边">
								<el-input-number
									v-model="form.count_n_xbb"
									:min="0"
									class="width-100"
									controls-position="right"
									@change="countChange"
								/>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="麻点">
								<el-input-number
									v-model="form.count_n_md"
									:min="0"
									class="width-100"
									controls-position="right"
									@change="countChange"
								/>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="线痕">
								<el-input-number
									v-model="form.count_n_xh"
									:min="0"
									class="width-100"
									controls-position="right"
									@change="countChange"
								/>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="破损">
								<el-input-number
									v-model="form.count_n_ps"
									:min="0"
									class="width-100"
									controls-position="right"
									@change="countChange"
								/>
							</el-form-item>
						</el-col>
						<!-- <el-col :md="12" :sm="24">
							<el-form-item label="棕圈">
								<el-input-number
									v-model="form.count_n_zq"
									:min="0"
									class="width-100"
									controls-position="right"
									@change="countChange"
								/>
							</el-form-item>
						</el-col> -->
						<el-col :md="12" :sm="24">
							<el-form-item label="其他">
								<el-input-number
									v-model="form.count_n_qt"
									:min="0"
									class="width-100"
									controls-position="right"
									@change="countChange"
								/>
							</el-form-item>
						</el-col>
					</el-row>
					
					<!-- <el-row>
						<el-col :span="24">
							<el-form-item label="前道不良">
								<el-button
									type="primary"
									icon="el-icon-plus"
									@click="notok_add"
								></el-button>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row style="margin-bottom:10px" v-for="(item, $index) in notokList" :key="item">
						<el-col :span="10">
							<el-select v-model="item.file" 
							style="width:90%"
								placeholder="请选择不合格项">
								<el-option
									v-for="notok in notokOptions"
									:key="notok.value"
									:label="notok.name"
									:value="notok.value"
								>
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="12">
							<el-input-number
								style="width:90%"
									v-model="item.value"
									:min="0"
									class="width-100"
									controls-position="right"
									@change="countChange"
								/>
						</el-col>
						<el-col :span="2">
							<el-button
									type="danger"
									icon="el-icon-delete"
									@click="notok_del( $index)"
								></el-button>
						</el-col>
					</el-row> -->
				</el-form>
			</el-main>
			<el-footer>
				<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
				<el-button @click="visible = false">取消</el-button>
			</el-footer>
		</el-container>
	</el-dialog>
</template>

<script>
export default {
	emits: ["success", "closed"],
	data() {
		return {
			loading: false,
			//表单数据
			form: {
				batch: null,
				count_real: 0,
				count_ok: 0,
				count_notok: 0,
				count_n_hs: 0,
				count_n_qp: 0,
				count_n_swen: 0,
				count_n_bb: 0,
				count_n_xbb:0,
				count_n_md: 0,
				count_n_xh: 0,
				count_n_ps: 0,
				count_n_qt: 0,
				count_n_wm: 0,
				count_n_zq:0
			},
			notokOptions:[
				{name:"划伤",value:'count_n_hs'},
				{name:"气泡",value:'count_n_qp'},
				{name:"水纹",value:'count_n_swen'},
				{name:"崩边",value:'count_n_bb'},
				{name:"小崩边",value:'count_n_xbb'},
				{name:"麻点",value:'count_n_md'},
				{name:"划伤",value:'count_n_xh'},
				{name:"破损",value:'count_n_ps'},
				{name:"其他",value:'count_n_qt'},
				{name:"雾面",value:'count_n_wm'},
				{name:"棕圈",value:'count_n_zq'},
			],
			//验证规则
			rules: {
				batch: [
					{
						required: true,
						message: "请填写批次号",
						trigger: "blur",
					},
				],
				count_use: [
					{
						required: true,
						message: "请填写领用数量",
						trigger: "blur",
					},
				],
			},
			options: [],
			count_notok_json:[],
			materialOptions: [],
			visible: false,
			isSaveing: false,
			batchDisabled: false,
		};
	},
	mounted() {
		if (this.form.batch != null) {
			this.batchDisabled = true;
		}
	},
	methods: {
		open(data) {
			this.visible = true;
			Object.assign(this.form, data);
			this.mgroupName = data.mgroup_name;
			console.log(this.form);
		},
		notok_add(){
			this.count_notok_json.push({notok:'qt',count:null,floor:null,count_sampling:null});
		},
		notok_del(index){
			this.count_notok_json.splice(index, 1)
		},
		countChange() {
			this.form.count_notok =
				this.form.count_n_hs +
				this.form.count_n_qp +
				this.form.count_n_swen +
				this.form.count_n_bb +
				this.form.count_n_xbb +
				this.form.count_n_md +
				this.form.count_n_xh +
				this.form.count_n_ps +
				this.form.count_n_zq +
				this.form.count_n_qt +
				this.form.count_n_wm;
				this.form.count_ok = this.form.count_real - this.form.count_notok;
		},
		countChanges(){
			this.form.count_ok = this.form.count_real - this.form.count_notok;
		},
		//表单提交方法
		submit() {
			let that = this;
			that.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					that.isSaveing = true;
					that.form.mlog = that.mlog;
					let sum =  0;
					if(that.mgroupName=='黑化'||that.mgroupName=='退火'){
						let total = 0;
						that.count_notok_json.forEach(item => {
							total+=item.count;
						});
						this.form.count_notok = total;
						this.form.count_notok_json = this.count_notok_json;
					}else{
						this.form.count_notok =
						this.form.count_n_hs +
						this.form.count_n_qp +
						this.form.count_n_swen +
						this.form.count_n_bb +
						this.form.count_n_xbb +
						this.form.count_n_md +
						this.form.count_n_xh +
						this.form.count_n_ps +
						this.form.count_n_zq +
						this.form.count_n_qt +
						this.form.count_n_wm;
					}
					sum = this.form.count_ok + this.form.count_notok;
					if (sum - this.form.count_real == 0) {
						that.$API.wpm.mlogb.updateOut
							.req(that.form.id, that.form)
							.then((res) => {
								that.isSaveing = false;
								that.$emit("success");
								that.visible = false;
								that.$message.success("操作成功");
							})
							.catch((err) => {
								that.isSaveing = false;
							});
					} else {
						this.$message.error("使用数量与合格数不合格数数量不对等");
					}
				}
			});
		},
	},
};
</script>

<style scoped>
.width-100 {
	width: 100%;
}
</style>
