<!--
 * @Author: zwq
 * @Date: 2023-08-01 13:52:10
 * @LastEditors: zwq
 * @LastEditTime: 2024-02-19 09:36:50
 * @Description:
-->
<template>
	<el-form
		:model="dataForm"
		:rules="dataRule"
		ref="dataForm"
		v-if="visible"
		@keyup.enter.native="dataFormSubmit()"
		label-width="100px"
		label-position="top">
		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item label="原料名称" prop="materialId">
					<el-select
						v-model="dataForm.materialId"
						filterable
						clearable
						@change="setCode"
						:style="{ width: '100%' }"
						placeholder="请选择原料名称">
						<el-option
							v-for="item in MaterialList"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="原料等级" prop="grade">
					<el-select
						v-model="dataForm.grade"
						filterable
						clearable
						:style="{ width: '100%' }"
						placeholder="请选择原料等级">
						<el-option
							v-for="item in urlOptions.dictList.dict0"
							:key="item.id"
							:label="item.label"
							:value="item.value"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="原料编码" prop="code">
					<el-input v-model="dataForm.code" clearable readonly />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="单价" prop="price">
					<el-input-number
						:min="0"
						style="width: 80%"
						v-model="dataForm.price"
						clearable
						placeholder="请输入允许留存时间" />
					(元/吨)
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="生效开始时间" prop="enabledTime">
					<el-date-picker
						v-model="dataForm.enabledTime"
						type="datetime"
						value-format="timestamp"
						:style="{ width: '100%' }"
						placeholder="选择开始时间"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="生效结束时间" prop="disabledTime">
					<el-date-picker
						v-model="dataForm.disabledTime"
						type="datetime"
						value-format="timestamp"
						:style="{ width: '100%' }"
						placeholder="选择结束时间"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="备注" prop="remark">
					<el-input
						v-model="dataForm.remark"
						clearable
						placeholder="请输入备注" />
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
import basicAdd from '../mixins/basic-add';
import {
	createCostMaterialSet,
	updateCostMaterialSet,
	getCostMaterialSet,
} from '@/api/cost/costMaterialSet';
import { getHotMaterialList } from '@/api/base/coreHotMaterial';

export default {
	mixins: [basicAdd],
	data() {
		return {
			urlOptions: {
				getDictList: true,
				createURL: createCostMaterialSet,
				updateURL: updateCostMaterialSet,
				infoURL: getCostMaterialSet,
				getOption: true,
			},
			nameList: ['material_grade'],
			dataForm: {
				id: undefined,
				code: '',
				materialId: '',
				price: '',
				grade: '',
				enabledTime: new Date().getTime(),
				disabledTime: null,
				remark: '',
			},
			setData: true,
			MaterialList: [],
			dataRule: {
				materialId: [
					{ required: true, message: '原料不能为空', trigger: 'change' },
				],
				price: [{ required: true, message: '单价不能为空', trigger: 'blur' }],
				enabledTime: [
					{
						required: true,
						message: '生效开始时间不能为空',
						trigger: 'change',
					},
				],
			},
		};
	},
	created() {},
	methods: {
		getArr() {
			getHotMaterialList().then((response) => {
				this.MaterialList = response.data;
			});
		},
		setDataForm() {
			this.setCode();
		},
		setCode() {
			this.MaterialList.forEach((item) => {
				if (item.id === this.dataForm.materialId) {
					this.dataForm.code = item.code;
				}
			});
		},
	},
};
</script>