<script setup>
import { ref, provide, onMounted, watch } from "vue";
import AssetMainList from "./components/AssetMainList.vue";
import AssetSubList from "./components/AssetSubList.vue";
import AssetTable from "./components/AssetTable.vue";
import { getOperationCompanyList } from "@/apis/operation";
import { getIOTSchema } from "@/apis/asset";
import useSearchParam from "@/hooks/useSearchParam";
const { searchParams, changeParams } = useSearchParam();
const companyOptions = ref([]);
const iotSchemaOptions = ref([]);
const getCompany = async () => {
  const res = await getOperationCompanyList();
  companyOptions.value = res.data.map((d) => ({ ...d, key: d.id }));
};
const getIOTSchemaOptions = async (id) => {
  const res = await getIOTSchema(Number(id));
  iotSchemaOptions.value = res.data.map((d) => ({ ...d, key: d.id }));
};

onMounted(() => {
  getCompany();
});

watch(
  () => searchParams.value.subSys_id,
  (newValue) => {
    if (newValue) {
      getIOTSchemaOptions(newValue);
    }
  },
  {
    immediate: true,
  }
);

provide("asset_modal_options", {
  companyOptions,
  iotSchemaOptions,
});
</script>

<template>
  <h1 class="text-2xl font-extrabold mb-2">
    {{ $t("assetManagement.title") }}
  </h1>
  <AssetMainList />
  <AssetSubList />
  <AssetTable />
</template>

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