<script setup>
import useUserInfoStore from "@/stores/useUserInfoStore";
import ProductSettingPointModal from "./ProductSettingPointModal.vue";
import ProductSettingTypeModal from "./ProductSettingTypeModal.vue";
import { computed } from "vue";

const store = useUserInfoStore();

const btns = computed(() =>
  store.auth_page.filter((d) => d.authCode === "PS3" || d.authCode === "PS4")
);

const openModal = (code) => {
  if (code === "PS3") {
    production_setting_PS3_modal.showModal();
  } else if (code === "PS4") {
    production_setting_PS4_modal.showModal();
  }
};

const onCancel = (code) => {
  if (code === "PS3") {
    production_setting_PS3_modal.close();
  } else if (code === "PS4") {
    production_setting_PS4_modal.close();
  }
};
</script>

<template>
  <div class="flex absolute right-10 top-0 z-50">
    <button
      type="button"
      class="btn btn-sm btn-success mx-2"
      v-for="btn in btns"
      :key="btn.authCode"
      @click="() => openModal(btn.authCode)"
    >
      {{ btn.subName }}
    </button>
  </div>
  <ProductSettingPointModal
    v-if="btns.find(({ authCode }) => authCode === 'PS4')?.subName"
    :title="btns.find(({ authCode }) => authCode === 'PS4')?.subName"
    :onCancel="() => onCancel('PS4')"
  />
  <ProductSettingTypeModal
    v-if="btns.find(({ authCode }) => authCode === 'PS3')?.subName"
    :title="btns.find(({ authCode }) => authCode === 'PS3')?.subName"
    :onCancel="() => onCancel('PS3')"
  />
</template>

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