<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { getAssetMainList, getAssetSubList, getIOTSchema } from "@/apis/asset";
import useActiveBtn from "@/hooks/useActiveBtn";
import PointListAddModal from "./PointListAddModal.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const formState = ref({});
const dataSource = ref([]);
const loading = ref(false);
// 系統類別
const {
  items: mainSysItems,
  changeActiveBtn: changeMainSysActiveBtn,
  setItems: setMainSysItems,
  selectedBtn: selectedMainSysItems,
} = useActiveBtn();
// 設備類別
const {
  items: subSysItems,
  changeActiveBtn: changeSubSysActiveBtn,
  setItems: setSubSysItems,
  selectedBtn: selectedSubSysItems,
} = useActiveBtn();

const getMainSystems = async () => {
  const res = await getAssetMainList();
  const cate = res.data.map((d, index) => ({
    ...d,
    title: d.system_key,
    key: d.id,
    active: index === 0,
  }));
  setMainSysItems(cate);
};

const getSubSystems = async (id) => {
  const res = await getAssetSubList(id);
  const sub = res.data.map((d, index) => ({
    ...d,
    title: d.system_key,
    key: d.id,
    active: index === 0,
  }));
  setSubSysItems(sub);
};

const columns = computed(() => [
  {
    title: "point",
    key: "pointOrg",
  },
  {
    title: "Description",
    key: "description",
  },
]);

const getDataSource = async (id) => {
  loading.value = true;
  const res = await getIOTSchema(id);
  dataSource.value = res.data.flatMap((d) =>
    d.details.map((detail) => ({
      key: `${d.id}-${detail.pointOrg}`,
      schema_name: d.name,
      pointOrg: detail.pointOrg,
      description: detail.describe,
    }))
  );
  loading.value = false;
};

const openModal = () => {
  point_list_item.showModal();
};

const onCancel = () => {
  point_list_item.close();
};

watch(
  selectedMainSysItems,
  (newValue) => {
    if (newValue && newValue.key) {
      getSubSystems(parseInt(newValue.key));
    }
  },
  {
    deep: true,
  }
);

watch(
  selectedSubSysItems,
  (newValue) => {
    if (newValue && newValue.key) {
      getDataSource(parseInt(newValue.key));
    }
  },
  {
    deep: true,
  }
);

onMounted(() => {
  getMainSystems();
});
</script>

<template>
  <div class="">
    <div class="flex flex-wrap items-center gap-4 mb-4">
      <h2 class="text-lg font-bold whitespace-nowrap">
        {{ $t("history.system_category") }} :
      </h2>
      <ButtonGroup
        :items="mainSysItems"
        :withLine="true"
        :onclick="
          (e, item) => {
            changeMainSysActiveBtn(item);
          }
        "
      />
    </div>
    <div class="flex flex-wrap items-center gap-4 mb-4">
      <h2 class="text-lg font-bold whitespace-nowrap">
        {{ $t("history.device_category") }} :
      </h2>
      <ButtonGroup
        :items="subSysItems"
        :withLine="true"
        :onclick="
          (e, item) => {
            changeSubSysActiveBtn(item);
          }
        "
      />
    </div>
    <div class="flex justify-start items-center mt-5 mb-2">
      <h3 class="text-xl mr-5">Points : </h3>
      <PointListAddModal
        :openModal="openModal"
        :onCancel="onCancel"
      />
    </div>
    <Table
      :columns="columns"
      :dataSource="dataSource"
      :loading="loading"
    ></Table>
  </div>
</template>

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