<template>
	<el-drawer
		:visible.sync="visible"
		:show-close="false"
		:wrapper-closable="false"
		class="drawer"
		size="60%">
		<small-title slot="title" :no-padding="true">
			{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
		</small-title>

		<div class="content">
			<div class="visual-part">
				<el-form
					ref="dataForm"
					:model="dataForm"
					:rules="dataRule"
					label-width="100px"
					label-position="top"
					@keyup.enter.native="dataFormSubmit">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="配方规格" prop="processSize">
								<el-input
									v-model="dataForm.processSize"
									clearable
									:disabled="isdetail"
									placeholder="请输入配方规格" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="配方型号" prop="processName">
								<el-input
									v-model="dataForm.processName"
									clearable
									:disabled="isdetail"
									placeholder="请输入配方型号" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="配方描述" prop="processDesc">
								<el-input
									v-model="dataForm.processDesc"
									clearable
									:disabled="isdetail"
									placeholder="请输入配方描述" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>

				<small-title
					style="margin: 16px 0; padding-left: 8px"
					:no-padding="true"
					v-if="dataForm.processName && dataForm.processSize">
					物料属性列表
				</small-title>

				<div
					class="attr-list"
					v-if="dataForm.processName && dataForm.processSize">
					<base-table
						:table-props="tableProps"
						:page="listQuery.pageNo"
						:limit="listQuery.pageSize"
						:add-button-show="
							productAttributeList.length > 3 || isdetail ? null : '添加属性'
						"
						@emitButtonClick="addNew()"
						:table-data="productAttributeList">
						<method-btn
							v-if="!isdetail"
							slot="handleBtn"
							:width="120"
							label="操作"
							:method-list="tableBtn"
							@clickBtn="handleClick" />
					</base-table>
					<pagination
						v-show="listQuery.total > 0"
						:total="listQuery.total"
						:page.sync="listQuery.pageNo"
						:limit.sync="listQuery.pageSize"
						:page-sizes="[5, 10, 15]"
						@pagination="getList" />
				</div>
			</div>
		</div>

		<div class="drawer-body__footer">
			<el-button style="" @click="goback()">取消</el-button>
			<el-button v-if="isdetail" type="primary" @click="goEdit()">
				编辑
			</el-button>
			<el-button v-else type="primary" @click="dataFormSubmit()">
				确定
			</el-button>
		</div>

		<product-attr-add
			v-if="addOrUpdateVisible"
			ref="addOrUpdate"
			@refreshDataList="getList" />
	</el-drawer>
</template>

<script>
import {
	updateProcess,
	createProcess,
	getProcess,
	getProcessDetailPage,
	deleteProcess,
} from '@/api/ssdl/product&recipe';
import productAttrAdd from './attr-add';
import { parseTime } from '@/filter/code-filter';
import SmallTitle from './SmallTitle';

const tableBtn = [
	{
		type: 'edit',
		btnName: '编辑',
	},
	{
		type: 'delete',
		btnName: '删除',
	},
];
const tableProps = [
	{
		prop: 'createTime',
		label: '添加时间',
		filter: parseTime,
	},
	{
		prop: 'materialName',
		label: '物料型号',
	},
	{
		prop: 'material',
		label: '物料规格',
	},
	{
		prop: 'materialNumber',
		label: '物料数量',
	},
];

export default {
	components: { productAttrAdd, SmallTitle },
	data() {
		return {
			visible: false,
			addOrUpdateVisible: false,
			tableBtn,
			tableProps,
			productAttributeList: [],
			dataForm: {
				id: null,
				processName: '', // 配方型号
				processSize: '', // 配方规格
				processDesc: '', // 配方描述
			},
			listQuery: {
				pageSize: 10,
				pageNo: 1,
				total: 0,
			},
			dataRule: {
				processSize: [
					{
						required: true,
						message: '配方规格不能为空',
						trigger: 'blur',
					},
				],
				processName: [
					{
						required: true,
						message: '配方型号不能为空',
						trigger: 'blur',
					},
				],
			},
			isdetail: false,
		};
	},
	methods: {
		initData() {
			this.productAttributeList.splice(0);
			this.listQuery.total = 0;
		},
		init(id, isdetail) {
			this.initData();
			this.isdetail = isdetail || false;
			this.dataForm.id = id || null;
			this.visible = true;

			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields();

				if (this.dataForm.id) {
					// 获取物料详情
					getProcess(id).then((response) => {
						this.dataForm = response.data;
						// 获取物料的属性列表
						this.getList();
					});
				}
			});
		},

		getList() {
			// 获取物料的属性列表
			getProcessDetailPage({
				processName: this.dataForm.processName,
				processSize: this.dataForm.processSize,
				pageSize: 100,
				pageNo: 1,
				total: 1,
			}).then((response) => {
				this.productAttributeList = response.data;
			});
		},
		handleClick(raw) {
			if (raw.type === 'delete') {
				this.$confirm(
					`确定对${
						raw.data.name
							? '[名称=' + raw.data.name + ']'
							: '[序号=' + raw.data._pageIndex + ']'
					}进行删除操作?`,
					'提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}
				)
					.then(() => {
						deleteProcess(raw.data.id).then(({ data }) => {
							this.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.getList();
								},
							});
						});
					})
					.catch(() => {});
			} else {
				this.addNew(raw.data.id);
			}
		},
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate((valid) => {
				if (valid) {
					if (
						!this.productAttributeList ||
						!(this.productAttributeList.length > 0)
					) {
						this.$modal.msg('物料属性不能为空');
						return;
					}
					this.productAttributeList.forEach((item) => {
						item.processName = this.dataForm.processName;
						item.processSize = this.dataForm.processSize;
						item.processDesc = this.dataForm.processDesc;
					});
					// 修改的提交
					updateProcess(this.productAttributeList).then((response) => {
						this.$modal.msgSuccess('提交成功');
						this.visible = false;
						this.$emit('refreshDataList');
					});
					return;
					// 添加的提交
					createProcess(this.productAttributeList).then((response) => {
						this.$modal.msgSuccess('新增成功');
						this.visible = false;
						this.$emit('refreshDataList');
					});
				}
			});
		},
		goEdit() {
			this.isdetail = false;
		},
		// 新增 / 修改
		addNew(id) {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(id, this.dataForm);
			});
		},
		goback() {
			this.$emit('refreshDataList');
			this.visible = false;
			this.initData();
		},
	},
};
</script>

<style scoped>
.drawer >>> .el-drawer {
	border-radius: 8px 0 0 8px;
	display: flex;
	flex-direction: column;
}

.drawer >>> .el-form-item__label {
	padding: 0;
}

.drawer >>> .el-drawer__header {
	margin: 0;
	padding: 32px 32px 24px;
	border-bottom: 1px solid #dcdfe6;
}
.drawer >>> .el-drawer__body {
	flex: 1;
	height: 1px;
	display: flex;
	flex-direction: column;
}

.drawer >>> .content {
	padding: 30px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	/* height: 100%; */
}

.drawer >>> .visual-part {
	flex: 1 auto;
	max-height: 76vh;
	overflow: hidden;
	overflow-y: scroll;
	padding-right: 10px; /* 调整滚动条样式 */
}

.drawer >>> .el-form,
.drawer >>> .attr-list {
	padding: 0 16px;
}

.drawer-body__footer {
	display: flex;
	justify-content: flex-end;
	padding: 18px;
}
</style>
