<script setup>
import Table from "@/components/customUI/Table.vue";
import FloorsModal from "./FloorsModal.vue";
import { deleteAssetFloor } from "@/apis/asset";
import { onMounted, ref, inject, computed } from "vue";
import { useI18n } from "vue-i18n";
import useBuildingStore from "@/stores/useBuildingStore";

const storeBuild = useBuildingStore();
const FILE_BASEURL = window.env?.VITE_FILE_API_BASEURL;
const { t } = useI18n();
const { openToast, cancelToastOpen } = inject("app_toast");

const columns = computed(() => [
  {
    title: t("accountManagement.index"),
    key: "index",
  },
  {
    title: t("energy.floor"),
    key: "full_name",
    filter: true,
  },
  {
    title: t("assetManagement.floor_plan"),
    key: "floor_plan",
  },
  {
    title: t("accountManagement.operation"),
    key: "operation",
  },
]);

const loading = ref(false);

onMounted(() => {
  storeBuild.fetchFloorList(storeBuild.selectedBuilding?.building_guid);
});

const formState = ref({
  full_name: "",
  floorFile: [],
});

const openModal = (record) => {
  if (record.floor_guid) {
    console.log('record',record);
    formState.value.floor_guid = record.floor_guid;
    formState.value.full_name = record.full_name;
    if(record.floor_map_url){
      const floorFile = record
      ? {
          // size: record.oriSize,
          name: record.floor_map_name,
          src: `${record.floor_map_url}.svg`,
          ext: 'svg',
        }
      : {};
      formState.value.floorFile = [floorFile];
    }
  } else {
    formState.value = {
      full_name: "",
      floorFile: [],
    };
  }
  floor_modal.showModal();
};

const remove = async (id) => {
  openToast("warning", t("msg.sure_to_delete"), "body", async () => {
    await cancelToastOpen();
    const res = await deleteAssetFloor({
      floor_guid: id,
    });
    if (res.isSuccess) {
      storeBuild.fetchFloorList(storeBuild.selectedBuilding?.building_guid);
      openToast("success", t("msg.delete_success"));
    } else {
      openToast("error", res.msg);
    }
  });
};
</script>

<template>
  <div class="flex justify-start items-center mt-10 mb-5">
    <h3 class="text-xl mr-5">{{ $t("energy.floor") }}</h3>
    <FloorsModal :formState="formState" :openModal="openModal" />
  </div>
  <Table
    :columns="columns"
    :dataSource="storeBuild.floorList"
    :loading="loading"
  >
    <template #bodyCell="{ record, column, index }">
      <template v-if="column.key === 'index'">{{ index + 1 }}</template>
      <template v-else-if="column.key === 'operation'">
        <button
          class="btn btn-sm btn-success text-white mr-2"
          @click.stop.prevent="() => openModal(record)"
        >
          {{ $t("button.edit") }}
        </button>
        <button
          class="btn btn-sm btn-error text-white"
          @click.stop.prevent="() => remove(record.floor_guid)"
        >
          {{ $t("button.delete") }}
        </button>
      </template>
      <template v-else-if="column.key === 'floor_plan'">
        <img
        v-if="record.floor_map_url"
          :src="`${FILE_BASEURL}/${record.floor_map_url}.svg`"
          class="w-[200px] bg-white mx-auto"
        />
      </template>
      <template v-else>
        {{ record[column.key] }}
      </template>
    </template>
  </Table>
</template>

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