<template>
  <a-modal
    :open="visible"
    title="编辑区域出入口信息"
    cancelText="取消"
    okText="提交"
    @ok="submit"
    @cancel="cancel"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="formRules"
      layout="vertical"
    >
      <a-row :gutter="[16, 0]">
        <a-col :span="12">
          <a-form-item ref="equipCode" label="设备号" name="equipCode">
            <a-input
              v-model:value="formState.equipCode"
              placeholder="请输入设备号"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="sourceLoc" label="起始地址" name="sourceLoc">
            <a-input
              v-model:value="formState.sourceLoc"
              placeholder="请输入起始地址"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="targetLoc" label="目标地址" name="targetLoc">
            <a-input
              v-model:value="formState.targetLoc"
              placeholder="请输入目标地址"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="equipType" label="设备类型" name="equipType">
            <a-select
              v-model:value="formState.equipType"
              :options="equipTypes"
              placeholder="请选择设备类型"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="ext3" label="任务类型" name="ext3">
            <a-select
              v-model:value="formState.ext3"
              :options="taskTypes"
              placeholder="任务类型"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="exitDesc" label="路径描述" name="exitDesc">
            <a-input
              v-model:value="formState.exitDesc"
              placeholder="请输入路径描述"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="directFlag" label="方向标志" name="directFlag">
            <a-select
              v-model:value="formState.directFlag"
              :options="directFlags"
              placeholder="请选择方向标志"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="taskLimit" label="任务数限制" name="taskLimit">
            <a-input-number
              v-model:value="formState.taskLimit"
              placeholder="请输入任务数限制"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="equipStatus" label="设备状态" name="equipStatus">
            <a-select
              v-model:value="formState.equipStatus"
              :options="equipStatusOptions"
              placeholder="请选择设备状态"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item ref="logicStatus" label="逻辑状态" name="logicStatus">
            <a-select
              v-model:value="formState.logicStatus"
              :options="logicStatusOptions"
              placeholder="请选择逻辑状态"
              :disabled="true"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注" name="remark">
            <a-textarea v-model:value="formState.remark" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
import { message } from "@hwork/ant-design-vue";
import { edit } from "@/api/wms/locExit";
import { defineComponent, reactive, ref, toRaw, watch } from "vue";
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
    },
    record: {
      type: Object,
    },
  },
  emit: ["close"],
  setup(props, context) {
    const formRef = ref();

    const formState = reactive({});

    const taskTypes = ref([
      {
        value: "In",
        label: "入库",
      },
      {
        value: "Out",
        label: "出库",
      },
      {
        value: "Move",
        label: "移库",
      },
      {
        value: "CheckOut",
        label: "抽检出库",
      },
      {
        value: "CheckReturn",
        label: "抽检返库",
      },
      {
        value: "InventoryOut",
        label: "盘点出库",
      },
      {
        value: "InventoryReturn",
        label: "盘点返库",
      },
      {
        value: "EmptyIn",
        label: "空托入库",
      },
      {
        value: "EmptyOut",
        label: "空托出库",
      },
      {
        value: "PickReturn",
        label: "拣选返库",
      },
      {
        value: "MoveCommand",
        label: "单机移动指令",
      },
      {
        value: "EmptyRackCall",
        label: "空工装呼叫",
      },
      {
        value: "LineCall",
        label: "线边叫料",
      },
    ]);

    const equipTypes = ref([
      {
        value: "Stacker",
        label: "堆垛机",
      },
      {
        value: "Station",
        label: "站台",
      },
      {
        value: "Conveyer",
        label: "小车",
      },
      {
        value: "Agv",
        label: "AGV",
      },
    ]);

    const directFlags = ref([
      {
        value: "In",
        label: "向里",
      },
      {
        value: "Out",
        label: "向外",
      },
      {
        value: "Move",
        label: "移动",
      },
    ]);

    const equipStatusOptions = ref([
      {
        value: true,
        label: "是",
      },
      {
        value: false,
        label: "否",
      },
    ]);

    const logicStatusOptions = ref([
      {
        value: true,
        label: "是",
      },
      {
        value: false,
        label: "否",
      },
    ]);

    watch(props, (props) => {
      console.log("props.record", props.record);
      formState.id = props.record.id;
      formState.equipCode = props.record.equipCode;
      formState.sourceLoc = props.record.sourceLoc;
      formState.targetLoc = props.record.targetLoc;
      formState.equipType = props.record.equipType;
      formState.exitDesc = props.record.exitDesc;
      formState.directFlag = props.record.directFlag;
      formState.taskLimit = props.record.taskLimit;
      formState.equipStatus = props.record.equipStatus;
      formState.logicStatus = props.record.logicStatus;
      formState.remark = props.record.remark;
    });

    const formRules = {
      equipCode: [
        {
          required: true,
          message: "请输入设备号(必填)",
          trigger: "blur",
        },
      ],
      sourceLoc: [
        {
          required: true,
          message: "请输入起始地址(必填)",
          trigger: "blur",
        },
      ],
      targetLoc: [
        {
          required: true,
          message: "请输入目标地址(必填)",
          trigger: "blur",
        },
      ],
      equipType: [
        {
          required: true,
          message: "请选择设备类型(必选)",
          trigger: "blur",
        },
      ],
      equipStatus: [
        {
          required: true,
          message: "请选择设备状态(必选)",
          trigger: "blur",
          type: "boolean",
        },
      ],
      logicStatus: [
        {
          required: true,
          message: "请选择逻辑状态(必选)",
          trigger: "blur",
          type: "boolean",
        },
      ],
    };

    const editKey = "add";

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

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

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

      equipTypes,
      taskTypes,
      directFlags,
      equipStatusOptions,
      logicStatusOptions,

      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 12,
      },
    };
  },
});
</script>
