<!--
 * @Author: zwq
 * @Date: 2023-08-01 13:52:10
 * @LastEditors: zwq
 * @LastEditTime: 2024-08-21 10:26:21
 * @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="8">
				<el-form-item label="仓库名称" prop="warehouseId">
					<el-select
						v-model="dataForm.warehouseId"
						filterable
						@change="getAreaList"
						:style="{ width: '100%' }"
						placeholder="请选择仓库名称">
						<el-option
							v-for="item in warehouseArr"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="库区名称" prop="areaId">
					<el-select
						v-model="dataForm.areaId"
            :disabled="!areaArr.length>0"
						filterable
						:style="{ width: '100%' }"
						@change="setAreaType"
						placeholder="请选择库区名称">
						<el-option
							v-for="item in areaArr"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="库区类型" prop="areaType">
					<el-input
						v-model="dataForm.areaType"
						disabled
						placeholder="库区类型" />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="库位名称" prop="name">
					<el-input
						v-model="dataForm.name"
						clearable
						placeholder="请输入库位名称" />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="库位编码" prop="code">
					<el-input
						v-model="dataForm.code"
						clearable
						placeholder="请输入库位编码" />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item prop="type" label="库位类型">
					<el-select
						v-model="dataForm.type"
						filterable
						:style="{ width: '100%' }"
						placeholder="请选择库位类型">
						<el-option
							v-for="item in urlOptions.dictList.dict0"
							:key="item.id"
							:label="item.label"
							:value="parseInt(item.value)"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="排" prop="arrange">
					<el-input
						v-model="dataForm.arrange"
						clearable
						placeholder="请输入排" />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="列" prop="col">
					<el-input v-model="dataForm.col" clearable placeholder="请输入列" />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="层" prop="layer">
					<el-input v-model="dataForm.layer" clearable placeholder="请输入层" />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item prop="enabled" label="是否启用">
					<el-select
						v-model="dataForm.enabled"
						filterable
						:style="{ width: '100%' }"
						placeholder="请选择是否启用">
						<el-option
							v-for="item in isorno"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
import basicAdd from '@/mixins/basic-add';
import {
	createWarehouseLocation,
	updateWarehouseLocation,
	getWarehouseLocation,
	getCode,
} from '@/api/warehouse/warehouse-location-setup';
import { getWarehouseList } from '@/api/warehouse/warehouse-setup';
import { getWarehouseAreaList } from '@/api/warehouse/warehouse-area-setup';

export default {
	mixins: [basicAdd],
	data() {
		return {
			urlOptions: {
				isGetCode: true,
				codeURL: getCode,
				getDictList: true,
				createURL: createWarehouseLocation,
				updateURL: updateWarehouseLocation,
				infoURL: getWarehouseLocation,
			},
			nameList: ['location_type'],
			dataForm: {
				id: undefined,
				name: '',
				code: '',
				warehouseId: '',
				areaId: '',
				areaType: '',
				type: '',
				enabled: 1,
				arrange: '',
				col: '',
				layer: '',
			},
			dataRule: {
				warehouseId: [
					{ required: true, message: '仓库名称不能为空', trigger: 'change' },
				],
				areaId: [
					{ required: true, message: '库区名称不能为空', trigger: 'change' },
				],
				code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
				name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
				arrange: [{ required: true, message: '排不能为空', trigger: 'blur' }],
				col: [{ required: true, message: '列不能为空', trigger: 'blur' }],
				layer: [{ required: true, message: '层不能为空', trigger: 'blur' }],
			},
			warehouseArr: [],
			areaArr: [],
			isorno: [
				{
					id: 0,
					name: '停用',
				},
				{
					id: 1,
					name: '启用',
				},
			],
			typeArr: [
				{
					id: 1,
					name: '缓存',
				},
				{
					id: 2,
					name: '活动',
				},
				{
					id: 3,
					name: '其它',
				},
			],
		};
	},
	created() {
		getWarehouseList().then((response) => {
			this.warehouseArr = response.data;
		});
	},
	methods: {
    getAreaList(){
		getWarehouseAreaList(this.dataForm.warehouseId).then((response) => {
			this.areaArr = response.data;
      if(this.areaArr.length===0){
        this.$message('该仓库下暂无库区');
      }
		});
    },
		setAreaType() {
			if (this.dataForm.areaId) {
				this.dataForm.areaType = this.areaArr.find(
					(item) => item.id === this.dataForm.areaId
				).areaType;
			}
		},
	},
};
</script>
