<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">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="托盘编码" prop="trayCode">
								<el-input
									v-model="dataForm.trayCode"
									@input="$forceUpdate()"
									@keyup.enter.native="nextTInput"
									ref="input"
									placeholder="请输入托盘编码" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="选择起点区域" prop="region">
								<el-select
									v-model="dataForm.region"
									style="width: 100%"
									@change="getPotArr"
									:popper-append-to-body="false"
									placeholder="请选择区域">
									<el-option
										v-for="item in regionArr"
										:key="item.id"
										:label="item.name"
										:value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="选择起点位置" prop="startInfo">
								<el-select
									v-model="dataForm.startInfo"
									style="width: 100%"
									:disabled="potDisable"
									@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-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: 74px; right: 24px">
			<el-switch
				v-model="decode"
				active-text="解码"
				inactive-text="不解码"
				:active-value="1"
				:inactive-value="0"></el-switch>
		</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="warehouseId"
			@refreshDataList="addList" />
	</el-drawer>
</template>

<script>
import {
	getLineList,
	buyinWarehouseStorehouse,
} 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: 'specification',
		label: '产品规格',
		filter: codeFilter('specification'),
		width: 80,
	},
	{
		prop: 'rollCode',
		label: '膜卷编码',
		subcomponent: inputArea,
	},
	{
		prop: 'number',
		label: '数量',
		width: 55,
	},
	{
		prop: 'grade',
		label: '品质',
	},
	{
		prop: 'cureTime',
		label: '需要熟化时间(小时)',
		width: 140,
		subcomponent: inputArea,
	},
];

const regionArra = [
	{ name: '一次分切区域1线', id: 1 },
	{ name: '一次分拣区域', id: 2 },
	{ name: '二次分切区域', id: 3 },
	{ name: '二次分拣区域', id: 4 },
	{ name: '手动包装区域', id: 5 },
	{ name: '涂覆区域', id: 6 },
	{ name: '其他', id: 7 },
	{ name: '自动包装区域', id: 8 },
	{ name: '一次分切区域2线', id: 9 },
	{ name: '一次分切区域3线', id: 10 },
	{ name: '一次分切区域4线', id: 11 },
];
const regionArrb = [
	{ name: '其他', id: 7 },
	{ name: '一次分切5线', id: 24 },
	{ name: '一次分切6线', id: 25 },
	{ name: '一次分切7线', id: 26 },
	{ name: '一次分切8线', id: 27 },
	{ name: '涂覆区域', id: 29 },
	{ name: '二次分切', id: 28 },
	{ name: '自动包装区', id: 21 },
	{ name: '手动包装区', id: 23 },
	{ name: '一次分拣区', id: 22 },
	{ name: '二次分拣区', id: 20 },
];
export default {
	components: { productAttrAdd, SmallTitle },
	data() {
		return {
			visible: false,
			addOrUpdateVisible: false,
			tableBtn,
			tableProps,
			productAttributeList: [],
			addButtonShow: '新增',
			potArr: [],
			regionArr: [],
			regionArra,
			regionArrb,
			potDisable: true,
			dataForm: {
				id: null,
				region: undefined,
				trayCode: '',
				startInfo: '',
			},
			warehouseId: null,
			isloading: false,
			updata: {},
      decode:1,
			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(warehouseId) {
			this.isloading = false;
			this.potDisable = true;
			this.warehouseId = warehouseId;
			this.regionArr =
				warehouseId === '1696803324030865409'
					? this.regionArra
					: this.regionArrb;
			this.dataForm.trayCode = '';
			this.dataForm.startInfo = '';
			this.dataForm.region = null;
			this.initData();
			this.visible = true;
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields();

				this.$refs.input.focus();
			});
		},
		getPotArr(val) {
			getLineList({ region: val, warehouseId: this.warehouseId }).then(
				(response) => {
					this.potArr = response.data;
					this.potDisable = false;
				}
			);
		},
		nextTInput() {
			if (this.productAttributeList.length > 0) {
				document.getElementById('inputFocus1').focus();
			}
		},
		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;
				case 3:
					if (data._pageIndex < this.productAttributeList.length) {
						document
							.getElementById('inputFocus' + (data._pageIndex + 1))
							.focus();
					}
					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.warehouseId = '';
				if (!item.number) {
					tableValid = true;
				}
			});
			if (!tableValid) {
				this.updata.trayCode = this.dataForm.trayCode;
				this.updata.lineEdgeLibraryCode = this.dataForm.startInfo.split('-')[0];
				this.updata.agvGroundCode = this.dataForm.startInfo.split('-')[1];
        this.updata.decode = this.decode
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.isloading = true;
						// 修改的提交
						this.updata.list = this.productAttributeList;
							buyinWarehouseStorehouse(this.updata)
								.then((response) => {
									this.$modal.msgSuccess('修改成功');
									this.visible = false;
									this.isloading = false;
									this.$emit('refreshDataList');
								})
								.catch(() => {
									this.isloading = false;
								});
							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.grade = data.grade;
			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>
