<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="12">
							<el-form-item label="库位名称" prop="name">
								<el-input v-model="dataForm.name" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="托盘编码" prop="palletCode">
								<el-input
									v-model="dataForm.palletCode"
									@input="$forceUpdate()"
									placeholder="请输入托盘编码" />
							</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">
					<div style="position: absolute; top: -40px; right: 15px">
						<el-button @click="addNew" type="text">
							<i class="el-icon-plus"></i>
							新增
						</el-button>
					</div>
					<base-table
						:table-props="tableProps"
						:page="listQuery.pageNo"
						:limit="listQuery.pageSize"
						@emitFun="inputChange"
						:height="400"
						:table-data="productAttributeList"
						v-if="productAttributeList.length">
						<method-btn
							slot="handleBtn"
							:width="70"
							label="操作"
							:method-list="tableBtn"
							@clickBtn="handleClick" />
					</base-table>
					<!-- 没有数据 -->
					<div class="no-data-bg" v-else></div>
				</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()">入库</el-button>
			</span>
		</div>

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

<script>
import productAttrAdd from './attr-add';
import inputArea from '../../mixins/inputArea';
import SmallTitle from './SmallTitle';
import {
	inWarehouseRealtimeLocation,
	getWarehouseRealtimeLocation,
} from '@/api/warehouse/warehouseRealtimeLocation';

const tableBtn = [
	{
		type: 'delete',
		btnName: '删除',
	},
];

const tableProps = [
	{
		prop: 'name',
		label: '物品名称',
	},
	{
		prop: 'code',
		label: '物品编码',
	},
	{
		prop: 'spec',
		label: '物品规格',
	},
	{
		prop: 'goodsBatch',
		label: '物品批次',
		subcomponent: inputArea,
		width: 100,
	},
	{
		prop: 'num',
		label: '数量',
		subcomponent: inputArea,
		width: 100,
	},
	{
		prop: 'remark',
		label: '备注',
		subcomponent: inputArea,
		width: 100,
	},
];

export default {
	components: { productAttrAdd, SmallTitle },
	data() {
		return {
			visible: false,
			addOrUpdateVisible: false,
			tableBtn,
			tableProps,
			productAttributeList: [],
			operator: '',
			dataForm: {
				id: null,
				name: '',
				palletCode: '',
			},
			listQuery: {
				pageSize: 10,
				pageNo: 1,
				total: 0,
			},
			dataRule: {
				// palletCode: [
				// 	{
				// 		required: true,
				// 		message: '托盘编码不能为空',
				// 		trigger: 'blur',
				// 	},
				// ],
			},
		};
	},
	methods: {
		initData() {
			this.productAttributeList.splice(0);
		},
		init(val, nickname) {
			this.operator = nickname;
			this.dataForm.id = val.id;
			this.dataForm.name = val.name;
			this.dataForm.palletCode = val.palletCode;
			this.initData();
			this.visible = true;
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields();

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

		getList() {
			// 获取产品的属性列表
			getWarehouseRealtimeLocation(this.dataForm.id).then((response) => {
				this.productAttributeList = response.data;
			});
		},
		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}"的数据项?`,
					'系统提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}
				)
					.then(() => {
						this.productAttributeList.splice(raw.data._pageIndex - 1, 1);
					})
					.catch(() => {});
			} else {
				this.addNew(raw.data._pageIndex);
			}
		},
		// 表单提交
		dataFormSubmit() {
			this.productAttributeList.forEach((item) => {
				item.id = '';
			});
			const data = {
				realtimeLocationId: this.dataForm.id,
				palletCode: this.dataForm.palletCode,
				operator: this.operator,
				goodsInfos: this.productAttributeList,
			};
			this.$refs['dataForm'].validate((valid) => {
				if (valid) {
					// 修改的提交
					if (this.dataForm.id) {
						inWarehouseRealtimeLocation(data).then((response) => {
							this.$modal.msgSuccess('修改成功');
							this.visible = false;
							this.$emit('refreshDataList');
						});
						return;
					}
				}
			});
		},
		// 新增 / 修改
		addNew(index) {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(index);
			});
		},
		addList(data) {
			this.productAttributeList.push(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;
	position: relative;
}
</style>
