<template>
	<div>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
			<el-form-item label="名称：" prop="name">
				<el-col :span="13">
					<el-input v-model="ruleForm.name"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="发货人：" prop="shipper">
				<el-col :span="13">
					<el-input v-model="ruleForm.shipper"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="发货人电话：" prop="shipperPhone">
				<el-col :span="13">
					<el-input v-model="ruleForm.shipperPhone"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="金蝶仓库名称：" prop="financeStorehouseName">
				<el-col :span="13">
					<el-input v-model="ruleForm.financeStorehouseName"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="金蝶仓库编号：" prop="financeStorehouseNo">
				<el-col :span="13">
					<el-input v-model="ruleForm.financeStorehouseNo"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="绑定第三方系统：" prop="isThird">
				<el-col :span="13">
					<el-switch v-model="ruleForm.isThird" :active-value='1' :inactive-value='0'></el-switch>
				</el-col>
			</el-form-item>
			<el-form-item label="第三方系统：" prop="thirdSysName" v-if="ruleForm.isThird">
				<el-col :span="13">
					<el-select v-model="ruleForm.thirdSysName" placeholder="请选择第三方系统" @change="selectChange">
						<el-option label="极智嘉" value="GEEKPLUS"></el-option>
					</el-select>
				</el-col>
			</el-form-item>
			<el-form-item label="第三方货主：" prop="thirdPartnerId" v-if="ruleForm.isThird">
				<el-col :span="8">
					<el-select v-model="ruleForm.thirdPartnerId" placeholder="请选择第三方货主" @change="selectThirdPartner">
						<el-option v-for="(item,index) in thirdPartnerList" :key="index" :label="item.wmsMemberName" :value="item.id"></el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					<el-button type="primary" icon="el-icon-s-custom" @click="toCargoOwner">货主管理</el-button>
				</el-col>
			</el-form-item>
			<el-form-item label="第三方货仓库：" prop="thirdStorehouseCode" v-if="ruleForm.isThird">
				<el-col :span="13">
					<el-select v-model="ruleForm.thirdStorehouseCode" placeholder="请选择第三方货仓库">
						<el-option v-for="(item,index) in thirdStorehouseList" :key="index" :label="item" :value="item"></el-option>
					</el-select>
				</el-col>
			</el-form-item>
			<el-form-item label="仓库地址：" class="laErrors">
				<byArea ref="byArea" :class="byAreaSlot?'errors':''" :propConfig="compConfig" :parentValue="parentValue"  @onChange="byAreaOnChange"></byArea>
				<div class="zerrors" v-if="byAreaSlot">请选择仓库地址</div>
			</el-form-item>
			<el-form-item label="详细地址：" prop="address">
				<el-col>
					<el-input v-model="ruleForm.address"></el-input>
				</el-col>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	import { queryBySys } from "@/api/omsOrder";
	import byArea from "../../../../benyun/components/byArea/byArea.vue";
	@Component({ components: { byArea } })
	export default class ruleForm extends Vue {
		@Prop()
		value : any;
		propValue : any;
		ruleForm: any = {
			name: null, //名称
			shipper: null, //发货人
			shipperPhone: null, //发货人电话
			financeType: '金蝶', //金蝶财务系统名称
			financeStorehouseName: null, //金蝶仓库名称
			financeStorehouseNo: null, //金蝶仓库编号
			isThird: 0, //是否绑定第三方仓库
			thirdSysName: 'GEEKPLUS', //第三方系统名称
			thirdPartnerId: null, //货主ID
			thirdPartnerName: null, //货主名称
			thirdPartnerCode: null, //云仓货主编号
			thirdStorehouseCode: null, //云仓仓库编号
			address: null, //详细地址
			province: null, //仓库所在省
			provinceCode: null, //省份编号
			city: null, //仓库所在市
			cityCode: null, //市编号
			region: null, //仓库所在区
			regionCode: null, //区县编号
			street: null, //仓库所在街道
			streetCode: null, //街道编码
		};
		rules: any = {
			name: [{
				required: true, message: '请输入名称', trigger: 'blur'
			}],
			shipper: [{
				required: true, message: '请输入发货人', trigger: 'blur'
			}],
			shipperPhone: [{
				required: true, message: '请输入发货人电话', trigger: 'blur'
			},{
				validator:(rule:any, value:any, callback:any) => {
					if (value) {
						if(!/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value)) {
							callback(new Error('手机号格式不正确！'));
						}else{
							callback();
						}
					} else {
						callback();
					}
				}, trigger: 'blur' 
			}],
			// financeStorehouseName: [{
			// 	required: true, message: '请输入金蝶仓库名称', trigger: 'blur'
			// }],
			// financeStorehouseNo: [{
			// 	required: true, message: '请输入金蝶仓库编号', trigger: 'blur'
			// }],
			isThird: [{
				required: true, message: '请选择是否绑定', trigger: 'change'
			}],
			thirdSysName: [{
				required: true, message: '请选择第三方系统', trigger: 'change'
			}],
			thirdPartnerId: [{
				required: true, message: '请选择第三方货主', trigger: 'change'
			}],
			thirdStorehouseCode: [{
				required: true, message: '请选择第三方货仓库', trigger: 'change'
			}],
			address: [{
				required: true, message: '请输入详细地址', trigger: 'blur'
			}],
			// street:[{
			// 	required: true, message: '请选择仓库地址', trigger: 'change'
			// }]
		};
		parentValue: any = {
			province: null,
			provinceCode: null,
			city: null,
			cityCode: null,
			region: null,
			regionCode: null,
			street: null,
			streetCode: null,
		}
		compConfig: any = {
			attr: {
				province: 'province', //省
				provinceCode: 'provinceCode', //省编码
				city: 'city',   //市
				cityCode: 'cityCode',  //市编码
				county: 'region',  //县/区
				countyCode: 'regionCode',   //县/区编码
				town: 'street', //街道
				townCode: 'streetCode', //街道编码
			}
		}
		byAreaSlot: any = false;
		thirdPartnerList: any = []; //第三方货主列表
		thirdStorehouseList: any = [] //第三方货仓库列表
		created() {
			var wmsSys: any = {
				wmsSys: (this as any).ruleForm.thirdSysName
			};
			queryBySys(wmsSys).then((res : any) => {
				if (res.code === 200) {
					(this as any).thirdPartnerList = res.data
				}
			});
		}
		//表单验证
		validate(parames?:any):Promise<any>{
			return new Promise((resolve:Function, reject:Function) => {
				if(!this.$refs.ruleForm){
					resolve(true)
				}
				(this as any).$refs.ruleForm.validate((valid:any) => {
					if (valid && (this as any).parentValue.streetCode) {
						resolve(true)
					} else {
						if(!(this as any).parentValue.streetCode){
							(this as any).byAreaSlot = true;
							(this as any).$message({
								message: '验证未通过，请检查！',
								type: 'warning',
							})
						}
						if(!parames || !parames.noMsg){
							(this as any).$message({
								message: '验证未通过，请检查！',
								type: 'warning',
							})
						}
						reject()
					}
				});
			})
		}
		setValue(data: any){
			// console.log(data);
			(this as any).$nextTick(()=>{
				if(JSON.stringify(data)!='{}'&&data){
					var val = (this as any).$lodash.cloneDeep(data);
					(this as any).ruleForm = val;
					(this as any).ruleForm.thirdSysName = 'GEEKPLUS';
					if((this as any).ruleForm.isThird==null){
						(this as any).ruleForm.isThird = 0
					};
					(this as any).$set((this as any).parentValue, 'province', (this as any).ruleForm.province);
					(this as any).$set((this as any).parentValue, 'provinceCode', (this as any).ruleForm.provinceCode);
					(this as any).$set((this as any).parentValue, 'city', (this as any).ruleForm.city);
					(this as any).$set((this as any).parentValue, 'cityCode', (this as any).ruleForm.cityCode);
					(this as any).$set((this as any).parentValue, 'region', (this as any).ruleForm.region);
					(this as any).$set((this as any).parentValue, 'regionCode', (this as any).ruleForm.regionCode);
					(this as any).$set((this as any).parentValue, 'street', (this as any).ruleForm.street);
					(this as any).$set((this as any).parentValue, 'streetCode', (this as any).ruleForm.streetCode);
					(this as any).$refs.byArea.setValue((this as any).parentValue);
				}else{
					(this as any).clearValue();
				}
			})
		}
		//获取数据
		getValue(){
			var data: any = {};
			data = (this as any).ruleForm;
			data.province = (this as any).parentValue.province;
			data.provinceCode = (this as any).parentValue.provinceCode;
			data.city = (this as any).parentValue.city;
			data.cityCode = (this as any).parentValue.cityCode;
			data.region = (this as any).parentValue.region;
			data.regionCode = (this as any).parentValue.regionCode;
			data.street = (this as any).parentValue.street;
			data.streetCode = (this as any).parentValue.streetCode;
			
			// if(data.isThird == 0 || data.isThird == null){
			// 	data.thirdSysName = null;
			// 	data.thirdPartnerId = null;
			// 	data.thirdPartnerName = null;
			// 	data.thirdStorehouseCode = null;
			// }
			
			return (this as any).$lodash.cloneDeep(data);
		}
		toCargoOwner(){
			this.$emit('toCargoOwner')
		}
		selectThirdPartner(e: any){
			(this as any).thirdStorehouseList = [];
			for (var i = 0; i < (this as any).thirdPartnerList.length; i++) {
				if((this as any).thirdPartnerList[i].id == e){
					(this as any).ruleForm.thirdPartnerName = (this as any).thirdPartnerList[i].wmsMemberName;
					(this as any).ruleForm.thirdPartnerCode = (this as any).thirdPartnerList[i].wmsMemberId;
					(this as any).ruleForm.thirdStorehouseCode = (this as any).thirdPartnerList[i].wmsWarehouseIdList;
					(this as any).thirdStorehouseList.push((this as any).thirdPartnerList[i].wmsWarehouseIdList);
				}
			}
		}
		selectChange(e: any){
			// console.log(e)
		}
		byAreaOnChange(v:any){
			// console.log(v);
			(this as any).parentValue = v
			if(v.provinceCode){
				(this as any).byAreaSlot = false;
			}else{
				(this as any).byAreaSlot = true;
			}
		}
		clearValue(){
			var ruleForm = {
				name: null, //名称
				shipper: null, //发货人
				shipperPhone: null, //发货人电话
				financeType: '金蝶', //金蝶财务系统名称
				financeStorehouseName: null, //金蝶仓库名称
				financeStorehouseNo: null, //金蝶仓库编号
				isThird: 0, //是否绑定第三方仓库
				thirdSysName: 'GEEKPLUS', //第三方系统名称
				thirdPartnerId: null, //货主ID
				thirdPartnerCode: null, //云仓货主编号
				thirdPartnerName: null, //货主名称
				thirdStorehouseCode: null, //云仓仓库名称
				address: null, //详细地址
				province: null, //仓库所在省
				provinceCode: null, //省份编号
				city: null, //仓库所在市
				cityCode: null, //市编号
				region: null, //仓库所在区
				regionCode: null, //区县编号
				street: null, //仓库所在街道
				streetCode: null, //街道编码
			};
			(this as any).ruleForm = ruleForm;
			(this as any).parentValue = {
				province: null,
				provinceCode: null,
				city: null,
				cityCode: null,
				region: null,
				regionCode: null,
				street: null,
				streetCode: null,
			};
			(this as any).byAreaSlot = false;
			this.$nextTick(()=>{
				(this as any).$refs.byArea.clearValue();
				(this.$refs.ruleForm as any).clearValidate();
			});
		}
	}
</script>

<style>
	.laErrors .el-form-item__label::before{
		content: "*";
		color: #ff4949;
		margin-right: 4px;
	}
	.errors .el-input__inner{
		border-color: #ff4949;
	}
	.zerrors {
	    color: #ff4949;
	    font-size: 12px;
	    line-height: 1;
	    padding-top: 4px;
	    position: absolute;
	    top: 100%;
	    left: 0;
	}
</style>