<template>
  <div>
    <!-- <p-button type="primary" icon="plus" 	@click="showModal"  style="margin-right: 1rem;">新增</p-button> -->
    <p-modal
      :visible="visible"
      :title="rows.warehouseRoomId ? '编辑库区' : '新增库区'"
      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-form-model-item>
          <p-form-model-item label="建筑物名称" prop="bldgName">
            <p-input disabled v-model="rows.bldgName" />
          </p-form-model-item>
          <p-form-model-item label="库房名称" prop="warehouseRoomName">
            <p-search-modal
              title="库房名称"
              v-model="rows.warehouseRoomName"
              :target-click="true"
              :remoteUrl="{
                url: '/api/upcloud-base-wh/baseWmsWarehouseRoomMst/page2',
                method: 'get'
              }"
              rowSelectType="radio"
              targetValueKey="warehouseRoomName"
              rowKey="warehouseRoomId"
              :tableConfig="{
                columns: [
                  { dataIndex: 'warehouseName', title: '仓库名称' },
                  { dataIndex: 'bldgName', title: '建筑物名称' },
                  { dataIndex: 'warehouseRoomName', title: '库房名称' },
                  { dataIndex: 'warehouseRoomCode', title: '库房编号' },
                  { dataIndex: 'warehouseRoomType', 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="warehouseAreaCode">
            <p-input allow-clear :disabled="!!rows.id" v-model="rows.warehouseAreaCode" />
          </p-form-model-item>
          <p-form-model-item label="库区名称" prop="warehouseAreaName">
            <p-input allow-clear v-model="rows.warehouseAreaName" />
          </p-form-model-item>
          <p-form-model-item label="库区类型" prop="warehouseAreaType">
            <p-select
              v-model="rows.warehouseAreaType"
              placeholder=""
              allow-clear
              style="width:100%"
              :options="
                warehouseAreaTypeOption.map(item => {
                  return {
                    title: item.dictName,
                    value: item.dictCode
                  }
                })
              "
            >
            </p-select>
          </p-form-model-item>
          <p-form-model-item label="库别" prop="warehouseAreaCategory">
            <p-select
              v-model="rows.warehouseAreaCategory"
              placeholder=""
              allow-clear
              style="width:100%"
              :options="
                warehouseAreaCategoryOption.map(item => {
                  return {
                    title: item.dictName,
                    value: item.dictCode,
                    warehouseAreaCategoryCode: item.dictCode
                  }
                })
              "
              @change="changeWarehouseAreaCategory"
            >
            </p-select>
          </p-form-model-item>
          <p-form-model-item label="拣货方式" prop="pickMode">
            <p-select
              v-model="rows.pickMode"
              placeholder=""
              allow-clear
              style="width:100%"
              :options="
                pickModeOption.map(item => {
                  return {
                    title: item.dictName,
                    value: item.dictCode
                  }
                })
              "
            >
            </p-select>
          </p-form-model-item>
          <p-form-model-item label="拆零分组" prop="splitGroup">
            <p-input allow-clear v-model="rows.splitGroup" />
          </p-form-model-item>
          <p-form-model-item label="暂存区" prop="cell01">
            <p-select
              v-model="rows.cell01"
              placeholder=""
              allow-clear
              style="width: 100%"
              :options="[
                { title: '医药行业冷藏品', value: '1' },
                { title: '中药材', value: '2' },
                { title: '中药饮片', value: '3' }
              ]"
            >
            </p-select>
          </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="warehouseAreaDistance">
            <p-input v-model="rows.warehouseAreaDistance" />
          </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=""> </p-form-model-item>
          <p-form-model-item label=""> </p-form-model-item>
        </p-card>
      </p-form-model>
    </p-modal>
  </div>
</template>

<script>
import { dict_listbytype, baseWmsWarehouseRoomMst_infoWithExpand } from '../../api/api_warehouse.js'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    rows: {
      type: Object,
      default: {}
    },
    baseWmsWarehouseRoomMst_page: {
      type: Array,
      default: function() {
        return []
      }
    },
    warehouse_page: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      warehouseAreaCategoryOption: [], //库别
      pickModeOption: [], // 拣货方式
      warehouseAreaTypeOption: [], //库区类型
      rules: {
        warehouseAreaName: [{ required: true, message: '请输入', trigger: 'blur' }],
        warehouseAreaCode: [{ required: true, message: '请输入', trigger: 'blur' }],
        // warehouseId: [{ required: true, message: '请输入', trigger: 'blur' },],
        warehouseRoomName: [{ required: true, message: '请输入', trigger: 'change' }],
        warehouseAreaCategory: [{ required: true, message: '请选择', trigger: 'change' }],
        warehouseAreaType: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  }, //data
  methods: {
    // 库别 带出code
    changeWarehouseAreaCategory(value, row, option) {
      this.rows.warehouseAreaCategoryCode = row.warehouseAreaCategoryCode
    },
    // 库房
    onChangeWarehouseRoomId(event, selectId, selectData) {

      this.rows.warehouseRoomId = selectData[0].warehouseRoomId // 库房id
      this.rows.warehouseRoomName = selectData[0].warehouseRoomName // 库房
      this.rows.warehouseRoomCode = selectData[0].warehouseRoomCode // 库房
      this.$set(this.rows, 'warehouseAreaCategory', selectData[0].warehouseRoomType) //库别

      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.dcId = selectData[0].dcId // 仓配中心id
      this.rows.dcCode = selectData[0].dcCode // 仓配中心
      this.rows.dcName = selectData[0].dcName // 仓配中心
      // 库房选择后 ，自动带出拣货方式
      baseWmsWarehouseRoomMst_infoWithExpand({ id: selectData[0].warehouseRoomId }).then(res => {
        if (res.success) {
          //拣货方式
          this.$set(this.rows, 'pickMode', res.data.profil.warehouseWorkingMethod)
        }
      })
    },
    onChangeWarehouse(event, selectId, selectData) {
      
      this.rows.warehouseId = selectData[0].warehouseId
      // 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', 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) {
    },
    // 库别
    dict_listbytype(params) {
      dict_listbytype(params).then(res => {
        if (res.success) {
          this.warehouseAreaCategoryOption = res.data
        }
      })
    },
    // 拣货方式
    pickMode(params) {
      dict_listbytype(params).then(res => {
        if (res.success) {
          this.pickModeOption = res.data
        }
      })
    },
    // 库区类型
    warehouseAreaType(params) {
      dict_listbytype(params).then(res => {
        if (res.success) {
          this.warehouseAreaTypeOption = res.data
        }
      })
    }
  }, //methods
  created() {
    this.dict_listbytype({ dicttypeCodes: 'wms_storeroom' }) //库别
    this.pickMode({ dicttypeCodes: 'wms_pickmode' }) //拣货方式
    this.warehouseAreaType({ dicttypeCodes: 'areatype' }) //库区类型
  } //created
}
</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>
