<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: DY
 * @LastEditTime: 2024-03-14 10:02:53
 * @Description:
-->
<template>
	<el-form
		:model="dataForm"
		:rules="dataRule"
		ref="dataForm"
		@keyup.enter.native="dataFormSubmit()"
		label-width="90px">
		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item label="原料名称" prop="name">
					<el-input v-model="dataForm.name" :disabled="isdetail" clearable placeholder="请输入原料名称" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="原料编号" prop="code">
					<el-input v-model="dataForm.code" :disabled="isdetail" clearable placeholder="请输入原料编号" />
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item label="每日消耗量" prop="dailyCost">
					<el-input-number v-model="dataForm.dailyCost" :disabled="isdetail" :min="0" controls-position="right" clearable placeholder="请输入每日消耗量" style="width: 100%" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="单位" prop="unit">
					<el-select
						v-model="dataForm.unit"
						filterable
						:disabled="isdetail"
						style="width: 100%"
						placeholder="请选择单位">
						<el-option
							v-for="dict in getDictDatas('unit_dict')"
							:key="dict.value"
							:label="dict.label"
							:value="dict.value" />
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		<el-form-item label="备注" prop="remark">
			<el-input v-model="dataForm.remark" :disabled="isdetail" clearable placeholder="请输入备注" />
		</el-form-item>

		<small-title
		  :size="'sm'"
			style="margin: 16px 0; padding-left: 8px; font-size: 14px"
			:no-padding="true">
			质量信息
		</small-title>
		<div v-if="!isdetail" class="action_btn">
			<template>
				<span style="display: inline-block;">
					<el-button type="text" @click="addNew()" icon="el-icon-plus">新增</el-button>
				</span>
			</template>
		</div>
		<el-row :gutter="20" v-for="(item, index) in test" :key="index">
			<el-col :span="9">
				<el-form-item label="成分" label-width="50px" prop="name1">
					<el-input v-model="item.name" :disabled="isdetail" :min="0" controls-position="right" clearable placeholder="请输入成分" style="width: 100%" />
				</el-form-item>
			</el-col>
			<el-col :span="15">
				<el-form-item label="标准含量" prop="unit1">
					<el-row :gutter="5">
						<el-col :span="1">
							<el-tooltip content="如果标准含量不是一个范围，而是一个值，在最大值、最小值中填入相同数字即可。" placement="top">
								<span style="margin-left: -15px"><i class="el-icon-question"></i></span>
							</el-tooltip>
						</el-col>
						<el-col :span="11">
							<el-input-number v-model="item.minValue" :disabled="isdetail" :min="0" controls-position="right" clearable placeholder="最小值" style="width: 100%" />
						</el-col>
						<el-col :span="11">
							<el-input-number v-model="item.maxValue" :disabled="isdetail" :min="0" controls-position="right" clearable placeholder="最大值" style="width: 100%" />
						</el-col>
					</el-row>
				</el-form-item>
			</el-col>
		</el-row>

	</el-form>
</template>

<script>
import basicAdd from '../../core/mixins/basic-add';
import { createHotMaterial, updateHotMaterial, getHotMaterial, getCode, createHotMaterialCheck, updateHotMaterialCheck, getHotCheckList } from "@/api/base/coreHotMaterial";
import { getDictDatas} from "@/utils/dict";
import SmallTitle from './SmallTitle';

export default {
	components: { SmallTitle },
	mixins: [basicAdd],
	data() {
		return {
			urlOptions: {
			  isGetCode: true,
        codeURL: getCode,
				createURL: createHotMaterial,
				updateURL: updateHotMaterial,
				infoURL: getHotMaterial,
			},
			dataForm: {
        id: undefined,
        code: undefined,
        name: undefined,
        unit: undefined,
        dailyCost: undefined,
				remark: undefined
			},
			test: [],
			departmentlList: [],
			menuOptions: [],
			isdetail: false,
			dataRule: {
        code: [{ required: true, message: "原料编码不能为空", trigger: "blur" }],
        name: [{ required: true, message: "原料名称不能为空", trigger: "blur" }]
      }
		};
	},
	mounted() {},
	methods: {
		init(id, isdetail) {
			this.test = []
      this.dataForm.id = id || "";
			this.isdetail = isdetail || false;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.urlOptions.infoURL(id).then(response => {
            this.dataForm = response.data;
          });
					getHotCheckList({
						materialId: this.dataForm.id
					}).then(res => {
						this.test = res.data
					})
        } else {
					this.test = [
						{
							name: null,
							minValue: undefined,
							maxValue: undefined
						}
					]
          if (this.urlOptions.isGetCode) {
            this.getCode()
          }
				}
      });
    },
		// 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
        // 修改的提交
        if (this.dataForm.id) {
          this.urlOptions.updateURL(this.dataForm).then(response => {
						if (this.test.length > 1 || this.test[0]?.name) {
							this.test.forEach(check => {
								check.hotMaterialId = this.dataForm.id
								if (check.id) {
									updateHotMaterialCheck(check).then(res => {
										console.log(res)
									})
								} else {
									createHotMaterialCheck(check).then(res1 => {
										console.log(res1)
									})
								}
							})
						}
            this.$modal.msgSuccess("修改成功");
            this.visible = false; 
            this.$emit("refreshDataList");
          });
          return;
        }
        // 添加的提交
        this.urlOptions.createURL(this.dataForm).then(response => {
					if (this.test.length > 1 || this.test[0]?.name) {
						this.test.forEach(check => {
							check.hotMaterialId = response.data
							createHotMaterialCheck(check).then(res => {
								console.log(res)
							})
						})
					}
          this.$modal.msgSuccess("新增成功");
          this.visible = false;
          this.$emit("refreshDataList");
        });
      });
    },
		addNew() {
			this.test.push({
				name: null,
				minValue: undefined,
				maxValue: undefined
			})
		}
	}
};
</script>

<style scoped>
.action_btn {
  float: right;
  margin: -40px 15px;
  font-size: 14px;
}
.add {
	color: #0b58ff;
}
</style>
