<template>
	<div class="form-submit">
		<div class="i-layout-page-header">
			<PageHeader class="product_tabs" hidden-breadcrumb>
				<div slot="title">
					<router-link :to="{ path: `${roterPre}/erp/position_list` }">
						<!-- <Button icon="ios-arrow-back" size="small" class="mr20"
              >返回</Button
            > -->
						<div class="font-sm after-line">
							<span class="iconfont iconfanhui"></span>
							<span class="pl10">返回</span>
						</div>
					</router-link>
					<span v-text="
              $route.params.id !== '0' ? '编辑仓位' : '添加仓位'
            " class="mr20 ml16"></span>
				</div>
			</PageHeader>
		</div>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Form class="formValidate mt20" ref="formValidate" :rules="ruleValidate" :model="formValidate"
				:label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
				<Row :gutter="24" type="flex">
					<Col span="24">
					<FormItem label="仓位名称：" prop="title">
						<Input v-model="formValidate.title" placeholder="请输入仓位名称/编号" v-width="'400'" />
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="所属仓库：" prop="wid">
						<el-cascader placeholder="请选择所属仓库" class="input-add" size="mini" v-model="formValidate.wid"
							:options="data1" :props="props" @change="userSearchs" filterable clearable v-width="'400'">
						</el-cascader>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="通道：" prop="passageway">
						<Input v-model="formValidate.passageway" placeholder="请输入通道" type="number" v-width="'400'" :disabled="formValidate.id != 0"/> (1~99)
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="左右：" prop="control">
						<RadioGroup v-model="formValidate.control" >
							<Radio label="L" :disabled="formValidate.id != 0">
								<Icon type="social-apple"></Icon>
								<span>左</span>
							</Radio>
							<Radio label="R" :disabled="formValidate.id != 0">
								<Icon type="social-android"></Icon>
								<span>右</span>
							</Radio>
						</RadioGroup>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="层数：" prop="layer">
						<Input v-model="formValidate.layer" placeholder="请输入层数" type="number" v-width="'400'" :disabled="formValidate.id != 0"/> (1~9)
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="仓位编号：" prop="number">
						<Input v-model="formValidate.number" placeholder="请输入仓位编号" type="number" v-width="'400'" :disabled="formValidate.id != 0"/> (1~999)
					</FormItem>
					</Col>
				</Row>
			</Form>
		</Card>
		<Card :bordered="false" dis-hover class="fixed-card"
			:style="{ left: `${!menuCollapse ? '200px' : isMobile ? '0' : '80px'}` }">
			<Form>
				<FormItem>
					<Button type="primary" class="submission" @click="handleSubmit('formValidate')">保存</Button>
				</FormItem>
			</Form>
		</Card>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		getGodownList,
		createGodown,
		getGodownInfo,
		createPosition,
		getPosition
	} from "@/api/erp";
	import {
		keyApi,
		storeGetInfoApi,
		cityApi,
		storeUpdateApi,
		cascaderList
	} from '@/api/store';
	import {
		productSpecs,
		productSpecsInfo
	} from "@/api/product";
	import Setting from "@/setting";
	
	const jy = (min,max)=>{
		return {
	        validator(rule, value){
	            if (!value || value > max || value < min) {
	                return [{message:`范围为${min}~${max}`}];
	            } else {
	                return [];
	            }
	        }
	    }
	}
	

	export default {
		name: "specsAdd",
		data() {
			return {
				addresData: [],
				props: {
					emitPath: false,
					multiple: false,
					checkStrictly: true,
					value: "id",
					label: "title"
				},
				roterPre: Setting.roterPre,
				data1: [],
				grid: {
					xl: 7,
					lg: 7,
					md: 12,
					sm: 24,
					xs: 24,
				},
				formValidate: {
					id: 0,
					title: "",
					wid:'0',
					passageway:'',
					control: "L",
					layer: '',
					number:''
				},
				ruleValidate: {
					title: [{
						required: true,
						message: "请输入仓位名称",
						trigger: "blur"
					}, ],
					wid: [{
						required: true,
						message: "请选择仓库",
						trigger: "blur"
					}, ],
					passageway: [{
						required: true,
						message: "请输入通道",
						trigger: "blur"
					},jy(1,99) ],
					control: [{
						required: true,
						message: "请选择左右",
						trigger: "blur"
					}, ],
					layer: [{
						required: true,
						message: '请输入层数',
						trigger: 'blur',
					},jy(1,9) ],
					number: [{
						required: true,
						message: '请输入仓位编号',
						trigger: 'blur',
					}, jy(1,999)],
				},
			};
		},
		computed: {
			...mapState("admin/layout", ["isMobile", "menuCollapse"]),
			labelWidth() {
				return this.isMobile ? undefined : 120;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		created() {
			this.getGodownList()
		},
		mounted() {
			// this.setCopyrightShow({
			// 	value: false
			// });
			if(this.$route.query.id != 0) {
				this.getPosition(this.$route.query.id)
			}else {
				this.formValidate.id = 0
			}
		},
		destroyed() {
			// this.setCopyrightShow({
			// 	value: true
			// });
		},
		methods: {
			...mapMutations("admin/layout", ["setCopyrightShow"]),
			getPosition(id) {
				getPosition(id).then(res => {
					this.formValidate = res.data
					let bin_number = this.formValidate.bin_number
					this.formValidate.wid = this.formValidate.wid + ''
					this.formValidate.passageway = bin_number.slice(0,2)
					this.formValidate.control = bin_number.slice(2,3)
					this.formValidate.layer = bin_number.slice(3,4)
					this.formValidate.number = bin_number.slice(4)
					console.log(this.formValidate.number);
					// this.formValidate.bin_number.slice
				})
			},
			addchack(e, selectedData) {
				console.log(selectedData,'selectedData');
				e.forEach((i, index) => {
					if (index == 0) {
						this.formValidate.province = i
					} else if (index == 1) {
						this.formValidate.city = i
					} else if (index == 2) {
						this.formValidate.area = i
					} else {
						this.formValidate.street = i
					}
				})
				this.formValidate.address = (selectedData.map(o => o.label)).join('/')
				// console.log('this.formValidate.addressSelect',this.formValidate.addressSelect);
				
			},
			cityInfo(data) {
				cityApi(data).then(res => {
					this.addresData = res.data
				})
			},
			loadData(item, callback) {
				item.loading = true;
					cityApi({
						pid: item.value
					}).then(res => {
						item.children = res.data;
						item.loading = false;
						callback();
					});
				

			},
			getGodownList() {
				getGodownList({
					page: 1,
					limit: 10000
				}).then(res => {
					console.log(res);
					this.data1 = res.data.data.map(item => {
						item.id = item.id + ''
						return item
					})
					console.log(this.data1,'this.data1');
				})
			},
			del(index) {
				this.data.splice(index, 1);
			},
			userSearchs(e) {
				console.log(e,'ddd');
				if(e) {
					this.formValidate.wid = e + ''
				}else {
					this.formValidate.wid = ''
				}
			},
			handleSubmit(name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.formValidate.id = this.$route.query.id;
						createPosition({
							id: this.formValidate.id,
							title: this.formValidate.title,
							wid:this.formValidate.wid,
							passageway:this.formValidate.passageway,
							control:this.formValidate.control,
							layer: this.formValidate.layer,
							number:this.formValidate.number
						}).then(res => {
							this.$Message.success(res.msg);
									this.$router.push({
										path: this.roterPre + "/erp/position_list"
									});
						}).catch(err => {
							this.$Message.error(err.msg);
						})
					} else {
						// this.$Message.error("请输入参数模板名称");
					}
				});
			},
		},
	};
</script>

<style scoped lang="stylus">
	.table {
		/deep/.ivu-table-header table {
			border: 0 !important;
		}

		/deep/.ivu-table-header thead tr th:nth-of-type(1) {
			padding-left: 16px;
		}

		/deep/.ivu-table td:nth-of-type(1) {
			padding-left: 16px;
		}

		/deep/.ivu-table-cell {
			padding: 0 !important;
		}

		/deep/.ivu-table-border th,
		/deep/.ivu-table-border td {
			border-right: unset;
		}

		/deep/.ivu-table td {
			height: 59px;
		}
	}

	.form-submit {
		/deep/.ivu-card {
			border-radius: 0;
		}

		margin-bottom: 79px;

		.fixed-card {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 200px;
			z-index: 99;
			box-shadow: 0 -1px 2px rgb(240, 240, 240);

			/deep/ .ivu-card-body {
				padding: 15px 16px 14px;
			}

			.ivu-form-item {
				margin-bottom: 0;
			}

			/deep/ .ivu-form-item-content {
				margin-right: 124px;
				text-align: center;
			}

			.ivu-btn {
				height: 36px;
				padding: 0 20px;
			}
		}
	}

	.after-line {
		display: inline-block;
		position: relative;
		margin-right: 16px;
	}

	.ml16 {
		margin-left: 16px;
	}
</style>