<script setup>
import { ref, defineProps, inject } from "vue";
import * as yup from "yup";
import useFormErrorMessage from "@/hooks/useFormErrorMessage";
import { postAssetMainList } from "@/apis/asset";
import useBuildingStore from "@/stores/useBuildingStore";
import useSearchParam from "@/hooks/useSearchParam";
import { useI18n } from "vue-i18n";

const storeBuild = useBuildingStore();
const { t } = useI18n();
const { openToast } = inject("app_toast");
const { searchParams, changeParams } = useSearchParam();
const props = defineProps({
  openModal: Function,
  onCancel: Function,
  getData: Function,
  formState: Object,
  isEdit: Boolean,
});

let subSysSchema = yup.object({
  system_key: yup.string().required(t("button.required")), // 名稱
  system_value: yup.string().required(t("button.required")), // 代稱
});

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

const onOk = async () => {
  const value = await handleSubmit(subSysSchema, props.formState);

  const res = await postAssetMainList({
    ...props.formState,
    id: props.formState ? props.formState.id : 0,
    building_guid:storeBuild.selectedBuilding?.building_guid || null,
  });

  if (res.isSuccess) {
    props.getData();
    onReset();
  } else {
    openToast("error", res.msg);
  }
};

const onReset = () => {
  handleErrorReset(); // 重置錯誤訊息
  props.onCancel(); // 調用父層的 onCancel
};
</script>

<template>
  <button class="btn btn-sm btn-success" @click.stop.prevent="openModal">
    <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
  </button>
  <Modal
    id="asset_add_main_item"
    :title="
      props.formState?.id
        ? t('assetManagement.edit_system_category')
        : t('assetManagement.add_system_category')
    "
    :open="open"
    :onCancel="onReset"
    width="400"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 flex flex-col items-center">
        <Input name="system_key" :value="formState">
          <template #topLeft>{{ $t("assetManagement.system_name") }}</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.system_key }}
            </span></template
          >
        </Input>
        <Input name="system_value" :value="formState" :readonly="props.formState?.id">
          <template #topLeft>{{ $t("assetManagement.system_value") }}</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.system_value }}
            </span></template
          >
        </Input>
      </form>
    </template>
    <template #modalAction>
      <button
        type="reset"
        class="btn btn-outline-success mr-2"
        @click.prevent="onReset"
      >
        {{ $t("button.cancel") }}
      </button>
      <button
        type="submit"
        class="btn btn-outline-success"
        @click.prevent="onOk"
      >
        {{ $t("button.submit") }}
      </button>
    </template>
  </Modal>
</template>

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