<script setup>
import { ref, computed, 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");
import dayjs from "dayjs";

const props = defineProps({
  formState: Object,
  itemData: Array,
});
const emit = defineEmits(["pushData", "resetModalForm"]);

const settingScheme = yup.object({
  total_capacity: yup.number().required("必填").min(0, "不能小於0"),
  // safety_stock: yup.number().required("必填").min(0, "不能小於0"),
  current_stock: yup.number().required("必填").min(0, "不能小於0"),
});

const recordScheme = yup.object({
  current_stock: yup.number().required("必填").min(0, "不能小於0"),
});

const itemScheme = computed(() => {
  return props.formState && props.formState.type === 1
    ? settingScheme
    : recordScheme;
});

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

const onCancel = () => {
  handleErrorReset();
  emit("resetModalForm");
  inventory_setting_modal.close();
};

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

<template>
  <Modal
    id="inventory_setting_modal"
    :title="props.formState?.type == 1 ? '設定' : '入庫'"
    :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="name" readonly>
          <template #topLeft>項目</template>
        </Input>
        <Input
          :value="formState"
          class="my-2"
          name="total_capacity"
          v-if="formState?.type == 1"
          readonly
        >
          <template #topLeft>總庫存量</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{
              formErrorMsg.total_capacity
            }}</span>
          </template>
        </Input>
        <!-- <Input
          :value="formState"
          class="my-2"
          name="safety_stock"
          v-if="formState?.type == 1"
        >
          <template #topLeft>安全存量</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{
              formErrorMsg.safety_stock
            }}</span>
          </template>
        </Input> -->
        <Input :value="formState" class="my-2" name="current_stock">
          <template #topLeft>{{
            formState?.type == 1
              ? "每周盤點量"
              : formState?.item_id == 1
              ? "本周醱酵量"
              : "每日過濾量"
          }}</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{
              formErrorMsg.current_stock
            }}</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>
