<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="dcName">
            <p-input disabled v-model="rows.dcName" />
            <!-- 			  <p-search-modal
					  title="仓配中心"
					  :value="rows.dcName"
							  :target-click="true"
					  :remoteUrl="{
					    url: '/api/upcloud-base-wh/wmsdc/page',
					    method: 'get'
					  }"
					  rowSelectType="radio"
					  targetValueKey="dcName"
					  rowKey="dcId"
					  :tableConfig="{
					    columns: [
					      { dataIndex: 'dcCode', title: '仓配中心编号' },
					      { dataIndex: 'dcName', title: '仓配中心名称' },
					      { dataIndex: 'dcType', title: '类型' },
					      { dataIndex: 'province', title: '省' },
					      { dataIndex: 'city', title: '市' },
					      { dataIndex: 'area', title: '区' },
					      { dataIndex: 'addrs', title: '地址' }
					    ]
					  }"
					  :toolBar="{
					    items: [
					      {
					        type: 'input',
					        name: 'dcName',
					        label: '仓配中心名称',
					        value: ''
					      },
					      {
					        type: 'input',
					        name: 'dcCode',
					        label: '仓配中心编号',
					        value: ''
					      }
					    ]
					  }"
					  @ok="onChange"
					/> -->
          </p-form-model-item>
          <p-form-model-item label="仓库名称" disabled 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: ''
						      }
						    ]
						  }"
						@ok="onChangeWarehouse"
			/> -->
          </p-form-model-item>
          <p-form-model-item label="建筑物" prop="bldgId">
            <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: '' }
                ]
              }"
              @ok="onChangeContainer"
              @change="changeContainer"
            />
          </p-form-model-item>

          <p-form-model-item label="库房编码" prop="warehouseRoomCode">
            <p-input allow-clear :disabled="!!rows.id" v-model="rows.warehouseRoomCode" />
          </p-form-model-item>
          <p-form-model-item label="库房名称" prop="warehouseRoomName">
            <p-input allow-clear v-model="rows.warehouseRoomName" />
          </p-form-model-item>
          <p-form-model-item label="库房类型" prop="warehouseRoomType">
            <p-select
              v-model="rows.warehouseRoomType"
              placeholder=""
              allow-clear
              style="width:100%"
              :options="
                warehouseLayoutTypeOption.map(item => {
                  return {
                    title: item.dictName,
                    value: item.dictCode
                  }
                })
              "
            >
            </p-select>
          </p-form-model-item>

          <!-- <p-form-model-item label="作业距离(米)" prop="warehouseRoomDistance">
            <p-input v-model="rows.warehouseRoomDistance" allow-clear />
          </p-form-model-item> -->
          <p-form-model-item label="所在楼层" prop="floorNum">
            <p-input-number allow-clear style="width:100%;" v-model="rows.floorNum" />
          </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=""> </p-form-model-item>
          <p-form-model-item label=""> </p-form-model-item>
        </p-card>

        <p-card title="扩展字段">
          <p-form-model-item label="仓库布局类型" prop="warehouseLayoutType">
            <p-select
              v-model="rows.warehouseLayoutType"
              placeholder=""
              style="width: 100%"
              :options="[
                { title: '平面', value: '平面' },
                { title: '立体', value: '立体' },
                { title: '自动', value: '自动' }
              ]"
            >
            </p-select>
          </p-form-model-item>
          <p-form-model-item label="拣货方式" prop="warehouseWorkingMethod">
            <p-select
              v-model="rows.warehouseWorkingMethod"
              placeholder=""
              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="预留字段1" prop="attribute11">
            <p-input allow-clear v-model="rows.attribute11" />
          </p-form-model-item>
          <p-form-model-item label="预留字段2" prop="attribute12">
            <p-input allow-clear v-model="rows.attribute12" />
          </p-form-model-item>
          <p-form-model-item label="预留字段3" prop="attribute13">
            <p-input allow-clear v-model="rows.attribute13" />
          </p-form-model-item>
          <p-form-model-item label="预留字段4" prop="attribute14">
            <p-input allow-clear v-model="rows.attribute14" />
          </p-form-model-item>
          <p-form-model-item label=""> </p-form-model-item>
          <p-form-model-item label=""> </p-form-model-item>

          <!-- <p-form-model-item> 
								<p-button type="primary" icon="search" html-type="submit">查询</p-button>
								<p-button type="" icon="undo" @click="handleReset" style="margin-left: 1rem;">重置</p-button>
							</p-form-model-item> -->
        </p-card>
      </p-form-model>
    </p-modal>
  </div>
</template>

<script>
import { dict_listbytype } from '../../api/api_warehouse.js'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    rows: {
      type: Object,
      default: {}
    },
    // 仓库
    warehouse_page: {
      type: Array,
      default: function() {
        return null
      }
    },
    // 仓配中心
    wmsdc_page: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      value: '',
      warehouseLayoutTypeOption: [], //库别
      pickModeOption: [], // 拣货方式
      rules: {
        bldgId: [{ required: true, message: '请输入', trigger: 'change' }],
        warehouseRoomName: [{ required: true, message: '请输入', trigger: 'blur' }],
        warehouseRoomCode: [{ required: true, message: '请输入', trigger: 'blur' }],
        warehouseRoomType: [{ required: true, message: '请输入', trigger: 'change' }],
        warehouseId: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  }, //data
  methods: {
    // searchModal
    onChange(event, selectId, selectData) {
   
      this.rows.dcId = selectData[0].dcId
      // this.rows.personName = selectData[0].locname;
      // this.value = selectData[0].jobnumber + ' / ' + selectData[0].locname;
    },

    onChangeWarehouse(event, selectId, selectData) {
   
      this.rows.warehouseId = selectData[0].warehouseId // 仓库id
      this.rows.warehouseName = selectData[0].warehouseName //仓库
      this.rows.warehouseCode = selectData[0].warehouseCode //仓库

      this.rows.dcId = selectData[0].dcId //所属仓配中心id
      this.$set(this.rows, 'dcName', selectData[0].dcName) //所属仓配中心名称
      this.rows.dcCode = selectData[0].dcCode // 仓配中心
    },
    // 建筑物
    onChangeContainer(event, selectId, selectData) {
      
      this.rows.bldgId = selectData[0].bldgId //建筑物
      this.rows.bldgName = selectData[0].bldgName //建筑物
      this.rows.bldgCode = selectData[0].bldgCode //建筑物

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

      this.rows.dcId = selectData[0].dcId //所属仓配中心id
      this.$set(this.rows, 'dcName', selectData[0].dcName) //所属仓配中心名称
      this.rows.dcCode = selectData[0].dcCode // 仓配中心
    },
    // 建筑物清除值
    changeContainer(event, selectId, selectData) {
      if (!selectId) {
        this.rows.bldgCode = ''; // 建筑物编号
        this.rows.bldgId = '';  //	建筑物id
        this.rows.bldgName = '';
        this.rows.warehouseId = '';
        this.rows.warehouseCode = '';
        this.rows.warehouseName = '';
        this.rows.dcId = '';
        this.rows.dcCode = '';
        this.rows.dcName = '';
      }
    },
    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) {
    },
    // 库房类型（库别）
    warehouseLayoutType(params) {
      dict_listbytype(params).then(res => {
        if (res.success) {
          this.warehouseLayoutTypeOption = res.data
        }
      })
    },
    // 拣货方式
    pickMode(params) {
      dict_listbytype(params).then(res => {
        if (res.success) {
          this.pickModeOption = res.data
        }
      })
    }
  }, //methods
  created() {
    this.warehouseLayoutType({ dicttypeCodes: 'wms_storeroom' }) // 库房类型（库别）
    this.pickMode({ dicttypeCodes: 'wms_pickmode' }) //拣货方式
  }
}
</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>
