<script setup>
import { ref, onMounted, defineProps, inject, watch } from "vue";
import * as yup from "yup";
import "yup-phone-lite";
import useFormErrorMessage from "@/hooks/useFormErrorMessage";
// import { postBuildings } from "@/apis/building";
const { openToast } = inject("app_toast");

const props = defineProps({
  formState: Object,
  currentEditIndex: Number,
});
const emit = defineEmits(["pushData"]);

const itemScheme = yup.object({
  groupNum: yup.string().required("必填"),
  itemName: yup.string().required("必填"),
  name: yup.string().required("必填"),
  upperLimit: yup.string().required("必填"),
  lowerLimit: yup.string().required("必填"),
});

const { formErrorMsg, handleSubmit, handleErrorReset, updateScheme } =
  useFormErrorMessage(itemScheme);

const onCancel = () => {
  handleErrorReset();
  weight_check_machine_modal.close();
};

const onOk = async () => {
  const value = await handleSubmit(itemScheme, props.formState);
  emit("pushData", {...value});
  onCancel();
};
</script>

<template>
  <Modal
    id="weight_check_machine_modal"
    :title="props.formState?.itemName ? '修改檢重機設備' : '新增檢重機設備'"
    :onCancel="onCancel"
    :width="710"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
        <Input :value="formState" class="my-2" name="groupNum" :disabled="props.currentEditIndex >= 0">
          <template #topLeft>組別</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{
              formErrorMsg.groupNum
            }}</span>
          </template>
        </Input>
        <Input :value="formState" class="my-2" name="itemName">
          <template #topLeft>成品代號</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{
              formErrorMsg.itemName
            }}</span>
          </template>
        </Input>
        <Input :value="formState" class="my-2" name="name">
          <template #topLeft>品名</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{ formErrorMsg.name }}</span>
          </template>
        </Input>
        <Input :value="formState" class="my-2" name="upperLimit">
          <template #topLeft>上限</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{
              formErrorMsg.upperLimit
            }}</span>
          </template>
        </Input>
        <Input :value="formState" class="my-2" name="lowerLimit">
          <template #topLeft>下限</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{
              formErrorMsg.lowerLimit
            }}</span>
          </template>
        </Input>
      </form>
    </template>
    <template #modalAction>
      <button
        type="reset"
        class="btn btn-outline-success mr-2"
        @click.prevent="onCancel"
      >
        取消
      </button>
      <button
        type="submit"
        class="btn btn-outline-success"
        @click.stop.prevent="onOk"
      >
        確定
      </button>
    </template>
  </Modal>
</template>

<style lang="scss" scoped></style>
