<template>
  <div>
    <!-- <p-button type="primary" icon="plus" 	@click="showModal"  style="margin-right: 1rem;">新增</p-button> -->
    <p-modal
      :visible="visible"
      :title="addTypeName"
      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="warehouseName">
            <!-- <p-input  disabled  v-model="rows.warehouseName" /> -->
            <p-search-modal
              title="仓库名称"
              :value="rows.warehouseName"
              :target-click="true"
              :remoteUrl="{
                url: '/api/upcloud-base-wh/warehouse/page',
                method: 'get'
              }"
              rowSelectType="radio"
              targetValueKey="warehouseName"
              rowKey="warehouseId"
              :tableConfig="{
                columns: [
                  { dataIndex: 'warehouseCode', title: '仓库编码' },
                  { dataIndex: 'warehouseName', title: '仓库名称' },
                  { dataIndex: 'warehouseType', title: '仓库类型' },
                  { dataIndex: 'dcName', title: '所属仓配中心' }
                ]
              }"
              :toolBar="{
                items: [
                  {
                    type: 'input',
                    name: 'warehouseName',
                    label: '仓库名称',
                    value: ''
                  },
                  {
                    type: 'input',
                    name: 'warehouseCode',
                    label: '仓库编码',
                    value: ''
                  }
                ]
              }"
              @change="onChangeWarehouse"
            />
          </p-form-model-item>
          <p-form-model-item label="建筑物名称" prop="bldgName">
            <!-- <p-input  disabled  v-model="rows.bldgName" /> -->
            <p-search-modal
              title="建筑物"
              :value="rows.bldgName"
              :target-click="true"
              :remoteUrl="{
                url: '/api/upcloud-base-wh/wmsWhBldg/v1/page',
                method: 'get'
              }"
              rowSelectType="radio"
              targetValueKey="bldgName"
              rowKey="bldgId"
              :tableConfig="{
                columns: [
                  { dataIndex: 'warehouseName', title: '仓库名称' },
                  { dataIndex: 'bldgName', title: '建筑物名称' },
                  { dataIndex: 'bldgCode', title: '建筑物编号' }
                ]
              }"
              :toolBar="{
                items: [
                  { type: 'input', name: 'bldgName', label: '建筑物名称', value: '' },
                  { type: 'input', name: 'bldgCode', label: '建筑物编号', value: '' }
                ]
              }"
              @change="changebldg"
            />
          </p-form-model-item>
          <!-- <p-form-model-item label="库房名称" prop="warehouseRoomName">
							<p-input  disabled  v-model="rows.warehouseRoomName" />
								<p-search-modal
								  title="库房名称"
								  :value="rows.warehouseRoomName"
								  :target-click="true"
								  :remoteUrl="{
								    url: '/api/upcloud-base-wh/baseWmsWarehouseRoomMst/page2',
								    method: 'get'
								  }"
								  rowSelectType="radio"
								  targetValueKey="warehouseRoomName"
								  rowKey="warehouseRoomId"
								  :tableConfig="{
								    columns: [
								      { dataIndex: 'warehouseRoomCode', title: '库房编号' },
								      { dataIndex: 'warehouseRoomName', title: '库房名称' },
								      { dataIndex: 'warehouseRoomType', title: '库房类型' },
									  { dataIndex: 'warehouseName', title: '仓库名称' },
								    ]
								  }"
								:toolBar="{
								  items: [
									{
									  type: 'input',
									  name: 'warehouseRoomName',
									  label: '库房名称',
									  value: ''
									},
									{
									  type: 'input',
									  name: 'warehouseRoomCode',
									  label: '库房编号',
									  value: ''
									}
								  ]
								}"
								  @ok="onChangeWarehouseRoomId"
								/>
						</p-form-model-item> -->
          <!-- <p-form-model-item label="库区名称" prop="warehouseAreaId">
							  <p-search-modal
							    title="库区名称"
							    :value="rows.warehouseAreaName"
							  	:target-click="true"
							    :remoteUrl="{
							      url: '/api/upcloud-base-wh/baseWmsWarehouseArea/page2',
							      method: 'get'
							    }"
							    rowSelectType="radio"
							    targetValueKey="warehouseAreaName"
							    rowKey="warehouseAreaId"
							    :tableConfig="{
							      columns: [
							        { dataIndex: 'warehouseName', title: '仓库名称' },
							        { dataIndex: 'warehouseRoomName', title: '库房名称' },
							        { dataIndex: 'warehouseAreaName', title: '库区名称' },
							        { dataIndex: 'warehouseAreaCode', title: '库区编号' },
							        { dataIndex: 'warehouseAreaType', title: '库区类型' },
							      ]
							    }"
								:toolBar="{
								  items: [
									{
									  type: 'input',
									  name: 'warehouseAreaName',
									  label: '库区名称',
									  value: ''
									},
									{
									  type: 'input',
									  name: 'warehouseAreaCode',
									  label: '库区编号',
									  value: ''
									}
								  ]
								}"
							    @ok="onChangeWarehouseAreaId"
							  />
						</p-form-model-item> -->
          <p-form-model-item label="逻辑区编码" prop="warehouseLogicCode">
            <p-input allow-clear v-model="rows.warehouseLogicCode" />
          </p-form-model-item>
          <p-form-model-item label="逻辑区名称" prop="warehouseLogicName">
            <p-input allow-clear v-model="rows.warehouseLogicName" />
          </p-form-model-item>
          <p-form-model-item label="逻辑区类型" prop="warehouseLogicType">
            <p-select
              v-model="rows.warehouseLogicType"
              placeholder=""
              allow-clear
              style="width:100%"
              :options="[
                { title: '固定', value: '固定' },
                { title: '灵活', value: '灵活' }
              ]"
            >
            </p-select>
          </p-form-model-item>
          <!-- <p-form-model-item label="冗余字段" prop="dcId">
									  <p-input allow-clear v-model="rows.dcId" />
								</p-form-model-item> -->
          <p-form-model-item label="所在楼层" prop="floorNum">
            <p-input allow-clear v-model="rows.floorNum" />
            <!-- <p-select  v-model="rows.floorNum"
											placeholder=""
											allow-clear
											style="width: 100%"
											:options="[ {title:'1楼',value:'1'},
														{title:'2楼',value:'2'},
														{title:'3楼',value:'3'},
													]"
												  >	
									</p-select> -->
          </p-form-model-item>
          <!-- <p-form-model-item label="作业距离(米)" prop="warehouseLogicDistance">
									  <p-input  v-model="rows.warehouseLogicDistance" />
								</p-form-model-item> -->
          <!-- <p-form-model-item label="数据访问控制级别" prop="accessLevel">
									<p-select v-model="rows.accessLevel"
											placeholder=""
											allow-clear
											style="width: 100%"
											:options="[ {title:'1级',value:'1'},
															{title:'2级',value:'2'},
															{title:'3级',value:'3'},
														]"
										  >	
									</p-select>
								</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="预留字段1" prop="attribute1">
            <p-input allow-clear v-model="rows.attribute1" />
          </p-form-model-item>
          <p-form-model-item label="预留字段2" prop="attribute2">
            <p-input allow-clear v-model="rows.attribute2" />
          </p-form-model-item>
          <p-form-model-item label="预留字段3" prop="attribute3">
            <p-input allow-clear v-model="rows.attribute3" />
          </p-form-model-item>
          <p-form-model-item label="预留字段4" prop="attribute4">
            <p-input allow-clear v-model="rows.attribute4" />
          </p-form-model-item>
          <p-form-model-item label="预留字段5" prop="attribute5">
            <p-input allow-clear v-model="rows.attribute5" />
          </p-form-model-item>
          <p-form-model-item label="预留字段6" prop="segment1">
            <p-input allow-clear v-model="rows.segment1" />
          </p-form-model-item>
          <p-form-model-item label="预留字段7" prop="segment2">
            <p-input allow-clear v-model="rows.segment2" />
          </p-form-model-item>
          <p-form-model-item label="预留字段8" prop="segment3">
            <p-input allow-clear v-model="rows.segment3" />
          </p-form-model-item>
          <p-form-model-item label="预留字段9" prop="segment4">
            <p-input allow-clear v-model="rows.segment4" />
          </p-form-model-item>
          <p-form-model-item label="预留字段10" prop="segment5">
            <p-input allow-clear v-model="rows.segment5" />
          </p-form-model-item>
          <p-form-model-item label="" prop=""> </p-form-model-item>
          <p-form-model-item label="" prop=""> </p-form-model-item>
        </p-card>
      </p-form-model>
    </p-modal>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    rows: {
      type: Object,
      default: {}
    },
    warehouse_page: {
      type: Array,
      default: function() {
        return []
      }
    },
    addTypeName: {
      // 弹窗类型-新增、修改
      type: String,
      default: '新增逻辑区'
    },
    baseWmsWarehouseRoomMst_page: {
      type: Array,
      default: function() {
        return []
      }
    },
    baseWmsWarehouseArea_page: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      rules: {
        warehouseLogicName: [{ required: true, message: '请输入', trigger: 'blur' }],
        warehouseLogicCode: [{ required: true, message: '请输入', trigger: 'blur' }],
        warehouseAreaId: [{ required: true, message: '请输入', trigger: 'change' }],
        warehouseName: [{ required: true, message: '请输入', trigger: 'change' }],
        bldgName: [{ required: true, message: '请选择', trigger: 'change' }],
        warehouseLogicType: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  }, //data
  methods: {
    // 仓库
    onChangeWarehouse(event, selectId, selectData) {
      if (!selectId) {
        this.rows.warehouseId = ''
        this.rows.warehouseName = ''
        this.rows.warehouseCode = ''
      } else {
        this.rows.warehouseId = selectData[0].warehouseId
        this.rows.warehouseName = selectData[0].warehouseName //仓库
        this.rows.warehouseCode = selectData[0].warehouseCode //仓库
        this.rows.dcId = selectData[0].dcId //所属仓配中心id
        this.rows.dcName = selectData[0].dcName //所属仓配中心
        this.rows.dcCode = selectData[0].dcCode // 仓配中心
      }
    },
    // 建筑物清除值
    changebldg(event, selectId, selectData) {
      if (!selectId) {
        this.rows.bldgCode = '' // 建筑物编号
        this.rows.bldgId = '' //	建筑物id
        this.rows.bldgName = ''
      } else {
        this.rows.bldgId = selectData[0].bldgId //建筑物
        this.rows.bldgName = selectData[0].bldgName //建筑物
        this.rows.bldgCode = selectData[0].bldgCode //建筑物
      }
    },
    onChangeWarehouseRoomId(event, selectId, selectData) {
      this.rows.warehouseRoomId = selectData[0].warehouseRoomId // 库房id
      this.rows.dcId = selectData[0].dcId // 仓配中心id
      this.rows.warehouseId = selectData[0].warehouseId //仓库id
      this.$set(this.rows, 'warehouseName', selectData[0].warehouseName) //仓库名称

      // this.rows.personName = selectData[0].locname;
      // this.value = selectData[0].jobnumber + ' / ' + selectData[0].locname;
    },
    // 库区
    onChangeWarehouseAreaId(event, selectId, selectData) {
      this.rows.warehouseAreaId = selectData[0].warehouseAreaId //库区
      this.rows.warehouseAreaName = selectData[0].warehouseAreaName //库区
      this.rows.warehouseAreaCode = selectData[0].warehouseAreaCode //库区
      this.rows.warehouseAreaType = selectData[0].warehouseAreaType //库区

      this.rows.warehouseId = selectData[0].warehouseId //仓库
      this.$set(this.rows, 'warehouseName', selectData[0].warehouseName) //仓库名称
      this.rows.warehouseCode = selectData[0].warehouseCode //仓库

      this.rows.bldgId = selectData[0].bldgId //建筑物
      this.$set(this.rows, 'bldgName', selectData[0].bldgName) //建筑物名称
      this.rows.bldgCode = selectData[0].bldgCode //建筑物

      this.rows.warehouseRoomId = selectData[0].warehouseRoomId //库房
      this.$set(this.rows, 'warehouseRoomName', selectData[0].warehouseRoomName) //库房名称
      this.rows.warehouseRoomCode = selectData[0].warehouseRoomCode //库房

      this.rows.dcId = selectData[0].dcId // 仓配中心id
      this.rows.dcCode = selectData[0].dcCode // 仓配中心
      this.rows.dcName = selectData[0].dcName // 仓配中心
      // this.rows.personName = selectData[0].locname;
      // this.value = selectData[0].jobnumber + ' / ' + selectData[0].locname;
    },
    handleCancel(e) {
      // this.visible = false;
      this.$emit('update:visible', false)
      this.$refs.ruleForm.resetFields()
    },
    // 查询
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // this.$emit('handleAdd',this.rows);
          this.$emit('handleAdd', Object.assign(this.rows, { isEnable: this.rows.isEnable ? '1' : '0' }))

          // this.visible = true;
        } else {
          this.$message.warning('参数异常')
          return false
        }
      })
    },

    selectWarehouseRoomType(val, arr) {
      this.rows.warehouseRoomType = val
    },

    // 开关
    switchChange(checked) {
    }
  } //methods
}
</script>

<style scoped lang="less">
::v-deep {
  .ant-card-bordered {
    border: none;
  }
  .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>
