<template>
  <a-modal :open="visible" title="新增货位" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel" :width='1200'>
    <a-form ref="formRef" :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <div>
        <page-layout>
          <a-row :gutter="[0, 0]">
            <a-col :span="24">
              <a-row>
                <a-col :span="8">
                  <a-form-item ref="code" label="当前节点" name="code">
                    <a-input v-model:value="formState.code" placeholder="请输入编号" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="houseCode" label="仓库号" name="houseCode">
                    <a-input v-model:value="formState.houseCode" placeholder="仓库号" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="houseName" label="仓库名称" name="houseName">
                    <a-input v-model:value="formState.houseName" placeholder="请输入仓库名称" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item label="仓库类型" name="houseType">
                    <a-select v-model:value="formState.houseType" placeholder="请选择仓库类型" :options="houseTypeOption">
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="treeCode" label="父节点" name="treeCode">
                    <a-input v-model:value="formState.treeCode" placeholder="请输入树节点" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="nodeType" label="节点类型" name="nodeType">
                    <a-input v-model:value="formState.nodeType" placeholder="请输入节点类型" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item ref="nodeDesc" label="节点描述" name="nodeDesc">
                    <a-input v-model:value="formState.nodeDesc" placeholder="请输入节点描述" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="minRow" label="最小排" name="minRow">
                    <a-input v-model:value="formState.minRow" placeholder="请输入最小排" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="maxRow" label="最大排" name="maxRow">
                    <a-input v-model:value="formState.maxRow" placeholder="请输入最大排" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item ref="relationRow" label="关联排" name="relationRow">
                    <a-input v-model:value="formState.relationRow" placeholder="请输入关联排" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="minColumn" label="最小列" name="minColumn">
                    <a-input v-model:value="formState.minColumn" placeholder="请输入最小列" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="maxColumn" label="最大列" name="maxColumn">
                    <a-input v-model:value="formState.maxColumn" placeholder="请输入最大列" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item ref="minLayer" label="最小层" name="minLayer">
                    <a-input v-model:value="formState.minLayer" placeholder="请输入最小层" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="maxLayer" label="最大层" name="maxLayer">
                    <a-input v-model:value="formState.maxLayer" placeholder="请输入最大层" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="relationTrack" label="关联巷道" name="relationTrack">
                    <a-input v-model:value="formState.relationTrack" placeholder="请输入关联巷道" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item label="货位方向" name="locDirection">
                    <a-select v-model:value="formState.locDirection" placeholder="请选择货位方向"
                      :options="locDirectionOption">
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="currentRow" label="当前排" name="currentRow">
                    <a-input v-model:value="formState.currentRow" placeholder="请输入当前排" />
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="8"></a-col> -->
                <a-col :span="8">
                  <a-form-item label="备注" name="remark">
                    <a-textarea v-model:value="formState.remark" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </page-layout>
      </div>
    </a-form>
  </a-modal>
</template>
<script>
    import {
    message
  } from '@hwork/ant-design-vue';
  import {
    save
  } from "@/api/wms/warehouse";
  import {
    defineComponent,
    reactive,
    ref,
    watch,
    toRaw
  } from "vue";
  export default defineComponent({
    props: {
      visible: {
        type: Boolean,
      },
      record: {
        type: Object,
      }
    },
    emit: ["close"],
    setup(props, context) {

      const formRef = ref();

      const state = reactive({});

      const formState = reactive({
        locDirection: 'None'
      });

      const houseTypeOption = ref([{
        value: 'StackerWarehouse',
        label: '堆垛机库',
      }, {
        value: 'DenseWarehouse',
        label: '密集库',
      }, {
        value: 'HorizontalWarehouse',
        label: '平库',
      }, {
        value: 'Area',
        label: '区域',
      }]);

      const locDirectionOption = ref([{
        value: 'None',
        label: '不区分方向',
      }, {
        value: 'Row_ASC',
        label: '入库从小到大，出库从大到小',
      }, {
        value: 'Row_DESC',
        label: '入库从大到小，出库从小到大',
      }, ]);

      watch(props, (props) => {
        console.log("props", props)
        console.log("props2222", JSON.stringify(props.record))
        formState.treeCode = props.record;

      })

      const formRules = {
        /*        locCode: [{
                  required: true,
                  message: '请输入locCode(必填)',
                  trigger: 'blur'
                }],
                locName: [{
                  required: true,
                  message: '请输入位置描述(必填)',
                  trigger: 'blur'
                }],
                parentCode: [{
                  required: true,
                  message: '请输入父编号(必填)',
                  trigger: 'blur'
                }],
                locDcs: [{
                  required: true,
                  message: '请输入WCS位置编号(必填)',
                  trigger: 'blur'
                }],
                locType: [{
                  required: true,
                  message: '请选择位置类型(必选)',
                  trigger: 'blur'
                }],
                channelType: [{
                  required: true,
                  message: '请输入通道类型(必填)',
                  trigger: 'blur'
                }],
                locStatus: [{
                  required: true,
                  message: '请选择位置状态(必选)',
                  trigger: 'blur'
                }],
                storeStatus: [{
                  required: true,
                  message: '请选择存储状态(必选)',
                  trigger: 'blur'
                }], */
      };

      const saveKey = "save";

      const submit = (e) => {
        formRef.value
        .validate()
        .then(() => {
            message.loading({
              content: '提交中...',
              key: saveKey
            });
            save(toRaw(formState)).then((response) => {
              if (response.success) {
                message.success({
                  content: '保存成功',
                  key: saveKey,
                  duration: 1
                }).then(() => {
                  cancel();
                });
              } else {
                message.error({
                  content: response.msg,
                  key: saveKey,
                  duration: 1
                }).then(() => {
                  // cancel();
                });
              }
            });
          })
          .catch(error => {
            console.log('error', error);
          });
      };

      const cancel = (e) => {
        formRef.value.resetFields();
        context.emit("close", false);
      };

      return {
        state,
        submit,
        cancel,
        formRef,
        formState,
        formRules,

        houseTypeOption,
        locDirectionOption,

        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 12
        },
      };
    },
  });
</script>
/* <style scoped>
  .full-modal {
    .ant-modal {
      max-width: 80%;
      max-height: 70%;
      box-align: center;
      /* top: 0; */
      /* padding-bottom: 0; */
      /* margin: 0; */
    }

    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(89vh);
    }

    .ant-modal-body {
      flex: 1;
    }
  }

  .editable-row-operations a {
    margin-right: 8px;
  }
</style> */
