<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 { postAssetFloor } from "@/apis/asset";
import { useI18n } from "vue-i18n";
import useBuildingStore from "@/stores/useBuildingStore";

const storeBuild = useBuildingStore();
const { t } = useI18n();
const { openToast } = inject("app_toast");

const props = defineProps({
  formState: Object,
  openModal: Function,
});
const form = ref(null);
const floorScheme = yup.object({
  full_name: yup.string().required(t("button.required")),
  floorFile: yup.array(),
});

const updateFileList = (files) => {
  console.log("file", files);
  props.formState.floorFile = files;
};

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

const onCancel = () => {
  handleErrorReset();
  updateFileList([]);
  floor_modal.close();
};

const onOk = async () => {
  const value = await handleSubmit(floorScheme, props.formState);
  const formData = new FormData(form.value);
  if (props.formState.floor_guid) {
    formData.append("floor_guid", props.formState.floor_guid);
  }
  if (props.formState.floorFile[0]) {
    formData.append("initMapName", props.formState.floorFile[0]?.name);
    formData.append("mapFile", props.formState.floorFile[0]);
  }
  formData.append("building_guid", storeBuild.selectedBuilding.building_guid);

  formData.delete("floorFile");
  const res = await postAssetFloor(formData);
  if (res.isSuccess) {
    storeBuild.fetchFloorList(storeBuild.selectedBuilding?.building_guid);
    onCancel();
  } else {
    openToast("error", res.msg, "#floor_modal");
  }
};
</script>

<template>
  <button class="btn btn-sm btn-add" @click.stop.prevent="props.openModal">
    <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
  </button>
  <Modal
    id="floor_modal"
    :title="props.formState?.floor_guid ? t('button.edit') : t('button.add')"
    :onCancel="onCancel"
    width="400"
  >
    <template #modalContent>
      <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
        <Input :value="formState" class="my-2" name="full_name">
          <template #topLeft>{{ $t("assetManagement.system_name") }}</template>
          <template #bottomLeft
            ><span class="text-error text-base">
              {{ formErrorMsg.name }}
            </span></template
          ></Input
        >
        <Upload
          name="floorFile"
          :fileList="formState.floorFile"
          :getFileList="updateFileList"
          :multiple="false"
          class="col-span-2"
          formats="svg"
        >
          <template #topLeft>{{ $t("assetManagement.oriFile") }}</template>
        </Upload>
      </form>
    </template>
    <template #modalAction>
      <button
        type="reset"
        class="btn btn-outline-success mr-2"
        @click.prevent="onCancel"
      >
        {{ $t("button.cancel") }}
      </button>
      <button
        type="submit"
        class="btn btn-outline-success"
        @click.stop.prevent="onOk"
      >
        {{ $t("button.submit") }}
      </button>
    </template>
  </Modal>
</template>

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