<template>
	<el-drawer
		:visible.sync="visible"
		:show-close="false"
		:destroy-on-close="true"
		:wrapper-closable="false"
		class="drawer"
		size="60%">
		<small-title slot="title" :no-padding="true">仓库信息</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="warehouseStorehouseCode">
								<el-input
									v-model="dataForm.warehouseStorehouseCode"
									disabled
									placeholder="请输入库位编码" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="库位名" prop="warehouseStorehouseName">
								<el-input
									v-model="dataForm.warehouseStorehouseName"
									disabled
									placeholder="请输入库位名" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="托盘编码" prop="trayCode">
								<el-input
									v-model="dataForm.trayCode"
									@input="$forceUpdate()"
									placeholder="请输入托盘编码" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="选择起点位置" prop="startInfo">
								<el-select
									v-model="dataForm.startInfo"
									style="width: 100%"
									@change="$forceUpdate()"
									placeholder="请选择起点位置">
									<el-option
										v-for="item in potArr"
										:key="item.id"
										:label="item.lineEdgeLibraryCode"
										:value="
											item.lineEdgeLibraryCode + '-' + item.agvGroundCode
										" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="工序" prop="process">
								<el-select
									v-model="dataForm.process"
									style="width: 100%"
									@change="$forceUpdate()"
									placeholder="请选择工序">
									<el-option
										v-for="item in processArr"
										:key="item.id"
										:label="item.name"
										:value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>

				<small-title
					style="margin: 16px 0; padding-left: 8px"
					:no-padding="true">
					产品信息
					<el-alert
						title="产品信息新增和修改后，需点击最下方保存按钮确定修改"
						type="warning"
						show-icon></el-alert>
				</small-title>

				<div class="attr-list">
					<base-table
						:table-props="tableProps"
						:page="listQuery.pageNo"
						:limit="listQuery.pageSize"
						:add-button-show="addButtonShow"
						@emitButtonClick="addNew"
						@emitFun="inputChange"
						:height="400"
						:table-data="productAttributeList">
						<method-btn
							slot="handleBtn"
							:width="60"
							label="操作"
							:method-list="tableBtn"
							@clickBtn="handleClick" />
					</base-table>
				</div>
			</div>
		</div>

		<div style="position: absolute; bottom: 24px; right: 24px">
			<el-button style="margin-right: 10px" @click="goback()">返回</el-button>
			<span>
				<el-button
					type="primary"
					@click="dataFormSubmit()"
					:loading="isloading">
					保存
				</el-button>
			</span>
		</div>

		<product-attr-add
			v-if="addOrUpdateVisible"
			ref="addOrUpdate"
			:warehouse-id="dataForm.warehouseId"
			@refreshDataList="addList" />
	</el-drawer>
</template>

<script>
import { getWarehouseStorehouseGoodsSpecificationPage } from '@/api/asrs/warehouseStorehouseGoodsSpecification';
import {
	getLineList,
	inWarehouseStorehouse,
} from '@/api/asrs/warehouseStorehouse';
import productAttrAdd from './attr-add';
import inputArea from '../mixins/inputArea';
import selectQuality from '../mixins/selectQuality';
import { parseTime } from '../mixins/code-filter';
import codeFilter from '../mixins/code-filter';
import SmallTitle from './SmallTitle';

const tableBtn = [
	{
		type: 'delete',
		btnName: '删除',
	},
];
const tableProps = [
	{
		prop: 'goodSpecificationName',
		label: '产品名',
	},
	{
		prop: 'goodSpecificationCode',
		label: '产品编码',
	},
	{
		prop: 'specification',
		label: '产品规格',
		filter: codeFilter('specification'),
		width: 80,
	},
	{
		prop: 'rollCode',
		label: '膜卷编码',
		subcomponent: inputArea,
		width: 100,
	},
	{
		prop: 'number',
		label: '数量',
		width: 55,
	},
	{
		prop: 'quality',
		label: '品质',
		filter: codeFilter('quality'),
		width: 55,
	},
	{
		prop: 'cureTime',
		label: '需要熟化时间(小时)',
		width: 140,
	},
];

const processArr = [
	{
		name: '开始',
		id: 0,
	},
	{
		name: '一次分切后',
		id: 1,
	},
	{
		name: '一次分拣后',
		id: 2,
	},
	{
		name: '二次分切后',
		id: 3,
	},
	{
		name: '二次分拣后',
		id: 4,
	},
];
export default {
	components: { productAttrAdd, SmallTitle },
	data() {
		return {
			visible: false,
			addOrUpdateVisible: false,
			tableBtn,
			tableProps,
			productAttributeList: [],
			addButtonShow: '新增',
			processArr,
			potArr: [],
			dataForm: {
				id: null,
				warehouseStorehouseName: '',
				warehouseStorehouseCode: '',
				process: '',
				trayCode: '',
				startInfo: '',
			},
			isloading: false,
			updata: {},
			listQuery: {
				pageSize: 10,
				pageNo: 1,
				total: 0,
			},
			dataRule: {
				trayCode: [
					{
						required: true,
						message: '托盘编码不能为空',
						trigger: 'blur',
					},
				],
				startInfo: [
					{
						required: true,
						message: '起点位置不能为空',
						trigger: 'change',
					},
				],
			},
		};
	},
	methods: {
		initData() {
			this.productAttributeList.splice(0);
		},
		init(val) {
			this.isloading = false;
			this.updata = val;
			this.dataForm.id = val.id;
			this.dataForm.warehouseStorehouseName = val.warehouseStorehouseName;
			this.dataForm.warehouseStorehouseCode = val.warehouseStorehouseCode;
			this.dataForm.process = val.process;
			this.dataForm.trayCode = val.trayCode;
			this.dataForm.startInfo = '';
			this.initData();
			this.visible = true;
			getLineList().then((response) => {
				this.potArr = response.data;
			});
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields();

				if (this.dataForm.id) {
					// 获取产品详情
					// 获取产品的属性列表
					this.getList();
				}
			});
		},

		getList() {
			// 获取产品的属性列表
			const params = {
				pageSize: 100,
				pageNo: 1,
				warehouseStorehouseId: this.dataForm.id,
			};
			getWarehouseStorehouseGoodsSpecificationPage(params).then((response) => {
				this.productAttributeList = response.data.list;
				this.listQuery.total = response.data.total;
			});
		},
		inputChange(data) {
			switch (data.sType) {
				case 1:
					this.productAttributeList[data._pageIndex - 1][data.prop] =
						data[data.prop];
					break;
				case 2:
					this.productAttributeList[data._pageIndex - 1][data.prop] =
						data.string ? data.string.split('+')[0] : '';
					this.productAttributeList[data._pageIndex - 1][data.prop + 'Name'] =
						data.string ? data.string.split('+')[1] : '';
					break;
				default:
					console.log(val);
			}
		},
		handleClick(raw) {
			if (raw.type === 'delete') {
				this.$confirm(
					`确定对${
						raw.data.name
							? '[名称=' + raw.data.name + ']'
							: '[序号=' + raw.data._pageIndex + ']'
					}进行删除操作?`,
					'提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}
				)
					.then(() => {
						this.productAttributeList.splice(raw.data._pageIndex - 1, 1);
					})
					.catch(() => {});
			} else {
				this.addNew(raw.data._pageIndex);
			}
		},
		// 表单提交
		dataFormSubmit() {
			let tableValid = false;
			this.productAttributeList.forEach((item) => {
				item.id = '';
				item.warehouseStorehouseId = this.dataForm.id;
				item.warehouseId = '';
				if (!item.number) {
					tableValid = true;
				}
			});
			if (!tableValid) {
				this.updata.process = this.dataForm.process;
				this.updata.trayCode = this.dataForm.trayCode;
				this.updata.lineEdgeLibraryCode = this.dataForm.startInfo.split('-')[0];
				this.updata.agvGroundCode = this.dataForm.startInfo.split('-')[1];
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.isloading = true;
						// 修改的提交
						this.updata.list = this.productAttributeList;
						if (this.dataForm.id) {
							inWarehouseStorehouse(this.updata).then((response) => {
								this.$modal.msgSuccess('修改成功');
								this.visible = false;
								this.isloading = false;
								this.$emit('refreshDataList');
							});
							return;
						}
					}
				});
			} else {
				this.$modal.msgWarning('产品信息的数量为必填数据！');
			}
		},
		// 新增 / 修改
		addNew(index) {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(index);
			});
		},
		addList(data) {
			data.productInfo.number = 1;
			data.productInfo.quality = data.quality;
			for (let i = 0; i < data.number; i++) {
				this.productAttributeList.push(JSON.parse(JSON.stringify(data.productInfo)));
			}
		},
		goback() {
			this.$emit('refreshDataList');
			this.visible = false;
			this.initData();
		},
	},
};
</script>

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

.drawer >>> .el-form-item__label {
	padding: 0;
}
.drawer >>> .el-form-item {
	margin: 0;
}
.drawer >>> .el-drawer__header {
	margin: 0;
	padding: 32px 32px 24px;
	border-bottom: 1px solid #dcdfe6;
	margin-bottom: 10px;
}

.drawer >>> .content {
	padding: 0 24px 30px;
	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;
}
</style>
