<script setup>
import { onMounted, ref, inject, computed } from "vue";
import { useI18n } from "vue-i18n";
import { posttDashboard2D3D } from "@/apis/dashboard";
import useBuildingStore from "@/stores/useBuildingStore";
import { tr } from "date-fns/locale";

const { openToast, cancelToastOpen } = inject("app_toast");
const buildingStore = useBuildingStore();
const { t } = useI18n();
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const form = ref(null);

const formState = ref({
  showForgeArea: buildingStore.showForgeArea,
  lorf: buildingStore.previewImageExt
    ? [
        {
          src: `${FILE_BASEURL}/upload/setting/previewImage/${buildingStore.selectedBuilding.building_guid}${buildingStore.previewImageExt}`,
          name: `${buildingStore.selectedBuilding.building_guid}`,
          ext: `${buildingStore.previewImageExt}`,
        },
      ]
    : [],
});

const updateFileList = (files) => {
  formState.value.lorf = files;
};

const onShowForgeAreaChange = (e) => {
  formState.value.showForgeArea = e.target.checked;
};

const onOk = async () => {
  const formData = new FormData();
  formData.delete("file");
  formData.append("buildingId", buildingStore.selectedBuilding.building_guid);
  formData.append("is3DEnabled", formState.value.showForgeArea);
  if (formState.value.lorf && formState.value.lorf.length > 0) {
    formData.append("file", formState.value.lorf[0]);
  }else {
    formData.append("removePreviewImage", true);
  }
  const res = await posttDashboard2D3D(formData);
  if (res.isSuccess) {
    await buildingStore.fetchDashboard2D3D(
      buildingStore.selectedBuilding.building_guid
    );
    openToast("success", t("msg.edit_successfully"));
    // 更新本地狀態
    formState.value.showForgeArea = buildingStore.showForgeArea;
    formState.value.lorf = buildingStore.previewImageExt
      ? [ {
          src: `${FILE_BASEURL}/upload/setting/previewImage/${buildingStore.selectedBuilding.building_guid}/${buildingStore.previewImageExt}`,
          name: `${buildingStore.selectedBuilding.building_guid}`,
          ext: `${buildingStore.previewImageExt}`,
        },]
      : [];
  }else{
    openToast("error", res.msg);
  }
};
</script>

<template>
  <div class="flex justify-start items-center mt-10 mb-5">
    <h3 class="text-xl mr-5">2D / 3D 顯示設定 :</h3>
  </div>
  <div class="flex gap-5">
    <span class="text-lg">3D 模型顯示 : </span>
    <input
      type="checkbox"
      class="toggle toggle-lg toggle-success"
      name="showForgeArea"
      :checked="formState.showForgeArea"
      @change="onShowForgeAreaChange"
    />
  </div>
  <Upload
    class="mt-2 mb-5 max-w-[600px] w-full"
    name="oriFile"
    :fileList="formState.lorf"
    :getFileList="updateFileList"
    :multiple="false"
    formats="png、jpg"
  >
    <template #topLeft>首頁2D圖上傳 :</template>
  </Upload>
  <button type="submit" class="btn btn-outline-success" @click.prevent="onOk">
    {{ $t("button.submit") }}
  </button>
</template>

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