<template>
	<div>
		<!-- <p-button type="primary" icon="plus" 	@click="showModal"  style="margin-right: 1rem;">新增</p-button> -->
		<p-modal   :visible="visible"
					:title="rows.workId?'编辑':'新增'"
					 okText="确定"
					 :enlargeable="true"
					 :draggable="true"
					 width="80%"
					@ok="handleOk"
					@cancel="handleCancel"
					>
			<p-form-model
			    ref="ruleForm"
			    :model="rows"
			    :rules="rules"
				:label-col="{span: 8}"
				:wrapper-col="{span: 14}"
			  >
				<!-- <p-form layout="inline" :form="form" @submit="" > -->
					<p-card title="">
								<p-form-model-item label="工号" prop="workercode">
									  <!-- <p-input allow-clear v-model="rows.workercode"  /> -->
										<p-search-modal
											  title="人员"
										      :value="rows.workercode"
											  :disabled="rows.workId ? true : false"
										      :target-click="true"
										      :remote-url="{
										        url: SERVICE_PLATFORM_POWER_BASE+'/employee/page?pageNum=1&pageSize=10',
										        method: 'get',
										      }"
											  rowSelectType="radio" 
											  targetValueKey="jobnumber"
										      row-key="jobnumber"
										      :table-config="{
										        columns: [
										          { dataIndex: 'jobnumber', title: '工号' },
										          { dataIndex: 'locname', title: '人员名称',width:120 },
										          { dataIndex: 'sex', title: '性别' },
										          { dataIndex: 'section', title: '民族' },
										          { dataIndex: 'contactTel', title: '联系电话' },
										          { dataIndex: 'status', title: '人员状态' },
										        ],
										      }"
										      :tool-bar="{
										        items: [
										          {
										            type: 'input',
										            name: 'locname',
										            label: '人员名称',
										            value: '',
										          },
										          {
										            type: 'input',
										            name: 'jobnumber',
										            label: '工号',
										            value: '',
										          },
										        ],
										      }"
										      @ok="onChange"
										    />
											
								</p-form-model-item>
								<!-- <p-form-model-item label="人员名称" prop="personName">
									  <p-input allow-clear v-model="rows.personName" />
								</p-form-model-item> -->
								<p-form-model-item label="仓库名称" prop="warehouseId">
									  <p-search-modal
									    title="仓库名称"
									    :value="rows.warehouseName"
										:disabled="rows.workId ? true : false"
									    :target-click="true"
									    :remoteUrl="{
									      url: SERVICE_CTRL_TOWER +'/userDataAuth/allDataAuthByUser/?companyType=S',
									      method: 'get'
									    }"
									    rowSelectType="radio"
									    targetValueKey="companyName"
									    rowKey="companyId"
									    :tableConfig="{
									      columns: [
									        { dataIndex: 'companyCode', title: '仓库编号' },
									        { dataIndex: 'companyName', title: '仓库名称' },
									      ]
									    }"
									    :toolBar="{
									      items: [
									        {
									          type: 'input',
									          name: 'warehouseName',
									          label: '仓库名称',
									          value: ''
									        },
									        {
									          type: 'input',
									          name: 'warehouseCode',
									          label: '仓库编号',
									          value: ''
									        }
									      ]
									    }"
									    @ok="onChangeWarehouse"
										@change="changeWarehouse"
									  />
								</p-form-model-item>
								<p-form-model-item label="作业区域" prop="workarea">
									  <p-search-modal
									    title="作业区域"
									    :value="rows.workarea"
										:disabled="!rows.warehouseId"
									    :target-click="true"
									    :remoteUrl="{
									      url: upcloud_base_wh+'/baseWmsWarehouseArea/page2?warehouseId='+rows.warehouseId,
									      method: 'get'
									    }"
									    rowSelectType="radio"
									    targetValueKey="warehouseAreaId"
									    rowKey="warehouseAreaId"
									    :tableConfig="{
									      columns: [
									        { dataIndex: 'warehouseAreaName', title: '库区名称' },
									        { dataIndex: 'warehouseAreaCode', title: '库区编号' },
									        { dataIndex: 'warehouseAreaType', title: '库区类型' },
									        { dataIndex: 'warehouseAreaId', title: '库区ID' },
									        { dataIndex: 'warehouseName', title: '仓库名称' },
									      ]
									    }"
									    :toolBar="{
									      items: [
									        {
									          type: 'input',
									          name: 'warehouseAreaName',
									          label: '库区名称',
									          value: ''
									        },
									        {
									          type: 'input',
									          name: 'warehouseAreaCode',
									          label: '库区编号',
									          value: ''
									        }
									      ]
									    }"
									    @ok="onChangearehWouseArea"
									  />
								</p-form-model-item>
								<!-- <p-form-model-item label="作业区域" prop="workarea">
									<p-select  v-model="rows.workarea"
											placeholder=""
											allow-clear
											style="width:100%"
											:options="[ {title:'固定',value:'固定'},
														{title:'灵活',value:'灵活'},
														]"
										  >	
									</p-select>
								</p-form-model-item> -->

								<!-- <p-form-model-item label="包装方式" prop="packcode">
									<p-select  v-model="rows.packcode"
											placeholder=""
											allow-clear
											style="width:100%"
											:options="[ {title:'固定',value:'01'},
														{title:'灵活',value:'02'},
														]"
										  >	
									</p-select>
								</p-form-model-item> -->
								
								<!-- <p-form-model-item label="作业类型" prop="worktype">
									<p-select  v-model="rows.worktype"
											placeholder=""
											allow-clear
											style="width:100%"
											:options="optionWorkType"
										  >	
									</p-select>
								</p-form-model-item> -->
								<p-form-model-item label="助记码" prop="assistantCode">
									  <p-input allow-clear v-model="rows.assistantCode" />
								</p-form-model-item>
								<!-- <p-form-model-item label="优先级" prop="priority">
									  <p-input allow-clear v-model="rows.priority" />
								</p-form-model-item> -->
								<p-form-model-item label="业务类型" prop="specialWorkType">
									<p-select  v-model="rows.specialWorkType"
											placeholder=""
											allow-clear
											style="width:100%"
											:options="optionBusiness"
										  >	
									</p-select>
								</p-form-model-item>
								<p-form-model-item label="作业权限密码" prop="workpassword">
									  <p-input type='password' allow-clear  v-model="rows.workpassword" />
								</p-form-model-item>
								
								
								<p-form-model-item label="是否启用" prop="isEnable">
									<!-- @change="switchChange" -->
									<p-switch  v-model="rows.isEnable"
									/>
										
								</p-form-model-item>
								<p-form-model-item label="" prop="">
								</p-form-model-item>
								
					</p-card>
				</p-form-model>
		</p-modal>
	</div>
</template>
<script>
	// import  { remote } from "../api/remote.js";
	import { dict_listbytype, baseWmsWarehouseArea_page2 } from "../api/api.js";
import { upcloud_base_wh, SERVICE_CTRL_TOWER ,SERVICE_PLATFORM_POWER_BASE} from "@/config/serviceSettings";
export default {
	props:{
		visible:{
			type:Boolean,
			default:false
		},
		rows:{
			type:Object,
			default:{}
		},
		warehouse_page:{
			type:Array,
			default:function(){
				return [];
			}
		}
	},
	data() {
		return {
			upcloud_base_wh, SERVICE_CTRL_TOWER ,SERVICE_PLATFORM_POWER_BASE,
			value: '',
			optionBusiness:[],	// 业务类型
			optionWorkType:[],	//	作业类型
			optionWorkarea:[],	//	作业区域
			// optionBusiness:...remote('businesstype'),
			rules: {
				workercode: [{ required: true, message: '请输入', trigger: 'change' },],
				personName: [{ required: true, message: '请输入', trigger: 'blur' },],
				// isEnable: [{ required: true, message: '请选择', trigger: 'change' }],
				warehouseId: [{ required: true, message: '请选择', trigger: 'change' }],
			  },
			 
		}
	},	//data
	methods:{
		// 作业区域（库区）
		onChangearehWouseArea(event, selectId, selectData) {
		  this.rows.workarea = selectData[0].warehouseAreaCode;	// 库区id
		// this.$set(this.rows,"dcName",selectData[0].dcName); //所属仓配中心名称
		},
		// 作业区域
		onChangeWarehouse(event, selectId, selectData) {
			// 	this.rows.warehouseId = selectData[0].warehouseId;	// 仓库id
			this.$set(this.rows,"warehouseId",selectData[0].companyId); //仓库id
		// this.rows.dcId = selectData[0].dcId;	//所属仓配中心id
		// this.rows.dcName = selectData[0].dcName;	//所属仓配中心名称
		},
		// 清除仓库时
		changeWarehouse(event,selectId,selectData){
			if(!selectId){
				this.rows.warehouseId = '';
				this.rows.warehouseName = '';
			}
		},
		// searchModal
		onChange(event, selectId, selectData) {
		      console.log(event);
		      console.log("selectId", selectId);
		      console.log("selectData", selectData);
			  this.$set(this.rows,"workercode",selectData[0].jobnumber); //工号 (必填)
			  // this.rows.workercode = selectData[0].jobnumber;	// [string] 工号 (必填)
			  this.rows.personName = selectData[0].locname;		// [string] 人员名称 (必填)
			  // this.value = selectData[0].jobnumber + ' / ' + selectData[0].locname;
		    },
		// 开关
		 switchChange(checked) {
		      // console.log(`p-switch to ${checked}`);
			  this.rows.isEnable = checked;
			  console.log("this.rows.isEnable",this.rows.isEnable);
		    },
		
		handleCancel(e) {
			  console.log('Clicked cancel button');
			  // this.visible = false;
			  this.$emit('update:visible',false);
			  this.$emit('update:rows',{});
			  // this.rows = {};
			   // this.$refs.ruleForm.resetFields();
			},
	// 查询
	   handleOk() {
		     this.$refs.ruleForm.validate(valid => {
		             if (valid) {
						 console.log("共用this.$emit",this.rows);
						 this.$emit('handleAdd',this.rows);
						 // this.$emit('handleAdd',Object.assign(this.rows,{isEnable:this.rows.isEnable?1:0 })  );
						 // this.visible = true;
					 } else {
							this.$message.error('有必填项！');
							return false;
							}
		           });
	   },
	 
	selectWarehouseRoomType(val,arr){
		this.rows.warehouseRoomType = val;
		console.log("逻辑区类型",val,arr);
	},
	
	},	//methods
	created() {
		//数据字典——业务类型
		dict_listbytype({dicttypeCodes:'special_work_type'}).then(res=>{
			if(res.success){
				// console.log("业务类型",res);
				this.optionBusiness = res.data.map(item=>{
					return ({
						title:item.dictName,
						// value:item.dictId
						value:item.dictCode
					})
				});
			}
		});
		// 	was_worktype  数据字典——作业类型
		dict_listbytype({dicttypeCodes:'was_worktype'}).then(res=>{
				if(res.success){
					this.optionWorkType = res.data.map(item=>{
						return ({
							title:item.dictName,
							// value:item.dictId
							value:item.dictCode
						})
					});
				}
			})
	},
	
}
</script>

<style scoped lang="less">

::v-deep {
	.ant-card-body { display: flex; flex-flow: row wrap; justify-content: space-between;
		.ant-row.ant-form-item {  flex: 28%;
			
		}
	}
	
	.ant-form.ant-form-inline{ display: flex; flex-flow: row wrap; justify-content: space-between;
			/* 列宽 */
			.ant-form-model-item { flex: 28%;
				/* 标题宽度 */
				.ant-form-model-item-label { width: 115px ; }
			}
		
	}
	
}
</style>
