<template>
  <div class="page-side-nav">
    <typo-text variant="title-bold">Side Nav</typo-text>
    <hr class="my-3" />
    <div class="pt-1">
      <typo-text variant="body-1-bold">Side Nav v1</typo-text>
      <div class="wrap-content">
        <div>
          <side-nav 
            :list="listSideNav" 
            :activeSideNav="activeSideNav" 
            @actionMenu="actionMenu"/>
        </div>
        <pre>
{{
`<side-nav 
  :list="listSideNav" 
  :activeSideNav="activeSideNav" 
  @actionMenu="actionMenu"/>
</div>

// gunakan function emit @actionMenu untuk dapat informasi dari menu yang diklik
// gnakan object slug sebagai menu yang aktif

activeSideNav: "ctas-efaktur"

listSideNav: [{
  groupName: "Layanan Mandiri",
  children: [{
      id: 1,
      label: "e-Billing",
      slug: "ebilling",
      iconName: "ebilling",
      active: true
    },
    {
      id: 2,
      label: "e-Filing",
      slug: "efiling",
      iconName: "efiling",
      active: true
    },
    {
      id: 3,
      label: "e-Faktur",
      slug: "invoice",
      iconName: "invoice",
      active: false
    },
    {
      id: 4,
      label: "e-Bupot Unifikasi",
      slug: "ebupot-unifikasi",
      iconName: "ebupot-unifikasi",
      active: true
    },
    {
      id: 5,
      label: "e-Materai",
      slug: "ematerai",
      iconName: "ematerai",
      active: true
    }
  ]
},
{
  groupName: "Core Tax Administration System",
  children: [{
      id: 6,
      label: "CTAS e-Billing",
      slug: "ctas-ebilling",
      iconName: "ctas-ebilling",
      active: true
    },
    {
      id: 7,
      label: "CTAS e-Faktur",
      slug: "ctas-efaktur",
      iconName: "ctas-efaktur",
      active: true
    },
    {
      id: 7,
      label: "CTAS e-Bupot",
      slug: "ctas-ebupot-unifikasi",
      iconName: "ctas-ebupot-unifikasi",
      active: true
    }]
},
{
  groupName: "Sistem Otomatis dan Enterprise",
  children: [{
      id: 8,
      label: "Taxomatic PPh",
      slug: "training",
      iconName: "training",
      active: true
    },
    {
      id: 9,
      label: "Rekonsiliasi PPN",
      slug: "rekonsiliasi",
      iconName: "rekonsiliasi",
      active: true
    }]
}]`
}}
        </pre>
      </div>
    </div>

    <div class="pt-1">
      <typo-text variant="body-1-bold">Side Nav v2</typo-text>
      <div class="wrap-content">
        <div>
          <side-nav-v2 
            :list="listV2" 
            :activeSideNav="activeSideNav" 
            @actionMenu="actionMenu"/>
        </div>
        <pre>
{{
`<side-nav 
  :list="listSideNav" 
  :activeSideNav="activeSideNav" 
  @actionMenu="actionMenu"/>
</div>

// gunakan function emit @actionMenu untuk dapat informasi dari menu yang diklik
// gnakan object slug sebagai menu yang aktif

activeSideNav: "ctas-efaktur"

listV2: [{
  groupName: "Layanan Mandiri",
  children: [{
      id: 1,
      label: "e-Billing",
      slug: "ebilling",
      iconName: "ebilling",
      active: true,
      children: [
        {
          label: "e-Billing",
          slug: "ebilling",
          active: true
        }, 
        {
          label: "e-Billing CTAS",
          slug: "ebilling-ctas",
          active: true
        }
      ]
    },
    {
      id: 2,
      label: "e-Faktur",
      slug: "efaktur",
      iconName: "efaktur",
      active: false,
      children: [
        {
          label: "e-Faktur",
          slug: "efaktur",
          active: true
        }, 
        {
          label: "e-Faktur CTAS",
          slug: "efaktur-ctas",
          active: true
        }
      ]
    },
    {
      id: 3,
      label: "e-Bupot Unifikasi",
      slug: "ebupot-unifikasi",
      iconName: "ebupot-unifikasi",
      active: true,
      children: [
        {
          label: "e-Bupot Unifikasi",
          slug: "ebupot-unifikasi",
          active: true
        }, 
        {
          label: "e-Bupot Unifikasi CTAS",
          slug: "ebupot-unifikasi-ctas",
          active: true
        }
      ]
    }
  ]
},
{
  groupName: "Sistem Otomatis dan Enterprise",
  children: [{
      id: 1,
      label: "e-Materai",
      slug: "ematerai",
      iconName: "ematerai",
      active: true,
    },
    {
      id: 2,
      label: "Invoice",
      slug: "invoice",
      iconName: "invoice",
      active: false
    },
  ]
}]`
}}
        </pre>
      </div>
    </div>
  </div>
</template>

<script>
  import TypoText from "@/components/Typography/TypoText";
  import SideNav from "@/components/SideNav";
  import SideNavV2 from "@/components/SideNavV2";

  export default {
    components: {
      TypoText,
      SideNav,
      SideNavV2
    },
    data() {
      return {
        activeSideNav: "ebilling",
        listV2: [{
          groupName: "Layanan Mandiri",
          children: [{
              id: 1,
              label: "e-Billing",
              slug: "ebilling",
              iconName: "ebilling",
              active: true,
              children: [
                {
                  label: "e-Billing",
                  slug: "ebilling",
                  active: true,
                  desc: "Untuk penggunaan e-Billing sebelum tahun 2025."
                }, 
                {
                  label: "e-Billing CTAS",
                  slug: "ebilling-ctas",
                  active: true,
                  desc: "Untuk penggunaan e-Billing mulai dari tahun 2025 sampai dengan seterusnya"
                }
              ]
            },
            {
              id: 2,
              label: "e-Faktur",
              slug: "efaktur",
              iconName: "efaktur",
              active: true,
              children: [
                {
                  label: "e-Faktur",
                  slug: "efaktur",
                  active: true,
                  desc: "Untuk penggunaan e-Faktur sebelum tahun 2025"
                }, 
                {
                  label: "e-Faktur CTAS",
                  slug: "efaktur-ctas",
                  active: true,
                  desc: "Untuk penggunaan e-Faktur mulai dari tahun 2025 sampai dengan seterusnya"
                }
              ]
            },
            {
              id: 3,
              label: "e-Bupot Unifikasi",
              slug: "ebupot-unifikasi",
              iconName: "ebupot-unifikasi",
              active: true,
              children: [
                {
                  label: "e-Bupot Unifikasi",
                  slug: "ebupot-unifikasi",
                  active: true,
                  desc: "Untuk penggunaan e-Bupot Unifikasi sebelum tahun 2025"
                }, 
                {
                  label: "e-Bupot Unifikasi CTAS",
                  slug: "ebupot-unifikasi-ctas",
                  active: true,
                  desc: "Untuk penggunaan e-Bupot Unifikasi mulai dari tahun 2025 sampai dengan seterusnya"
                }
              ]
            }
          ]
        },
        {
          groupName: "Sistem Otomatis dan Enterprise",
          children: [{
              id: 1,
              label: "e-Materai",
              slug: "ematerai",
              iconName: "ematerai",
              active: true,
            },
            {
              id: 2,
              label: "Invoice",
              slug: "invoice",
              iconName: "invoice",
              active: true
            },
          ]
        }],
        listSideNav: [{
            groupName: "Layanan Mandiri",
            children: [{
                id: 1,
                label: "e-Billing",
                slug: "ebilling",
                iconName: "ebilling",
                active: true
              },
              {
                id: 2,
                label: "e-Filing",
                slug: "efiling",
                iconName: "efiling",
                active: true
              },
              {
                id: 3,
                label: "e-Faktur",
                slug: "invoice",
                iconName: "invoice",
                active: false
              },
              {
                id: 4,
                label: "e-Bupot Unifikasi",
                slug: "ebupot-unifikasi",
                iconName: "ebupot-unifikasi",
                active: true
              },
              {
                id: 5,
                label: "e-Materai",
                slug: "ematerai",
                iconName: "ematerai",
                active: true
              }
            ]
          },
          {
            groupName: "Core Tax Administration System",
            children: [{
              id: 6,
              label: "CTAS e-Faktur",
              slug: "ctas-efaktur",
              iconName: "ctas-efaktur",
              active: true
            }]
          },
          {
            groupName: "Sistem Otomatis dan Enterprise",
            children: [{
                id: 6,
                label: "Taxomatic PPh",
                slug: "ocr",
                iconName: "ocr",
                active: true
              },
              {
                id: 7,
                label: "Rekonsiliasi PPN",
                slug: "rekonsiliasi",
                iconName: "rekonsiliasi",
                active: true
              }
            ]
          }
        ]
      }
    },
    methods: {
      actionMenu(data) {
        console.log(data)
      }
    }
  }
</script>

<style lang="scss">
  @use "@/assets/style/_color.scss"as *;

  .page-side-nav {
    .wrap-content {
      background: $neutral-1;
      padding: 75px 27px;
    }
  }
</style>