<template>
  <div class="page-header">
    <typo-text variant="title-bold">Header</typo-text>
    <hr class="my-3" />
    <div class="pt-1">
      <typo-text variant="body-1-bold">Dashboard Header</typo-text>
      <div class="wrap-content">
        <dashboard-header
          name="company"
          :companyList="companyList"
          :showCompany="true"
          :menuNavbar="menuNavbar"
          :selectedCompany="selectedCompany"
          @setSelectedCompany="setSelectedCompany"
          @actionRoute="actionRoute"
          userName="ardhi solikhin"
          moduleApp="http://my.staging.pajak.io/"
        >
        </dashboard-header>

        <pre>
{{
`<dashboard-header
    name="company"
    :companyList="companyLists"
    :showCompany="showCompanyList"
    :menuNavbar="menuNavbar"
    :selectedCompany="selectedCompany"
    @setSelectedCompany="setSelectedCompany"
    @actionRoute="actionRoute"
    :userName="user_detail.name"
    moduleApp="http://my.staging.pajak.io/"
  >
  </dashboard-header>

// example list select
companyList: [
  // for value
  {
    companyId: 1,
    companyName: "PT.LoremIpsumSedjahteraLoremIpsumSedjahtera",
    companyNpwp: "223333331333331",
    logoutTimer: 0
  },
  {
    companyId: 2,
    companyName: "PT. Lorem Ipsum Sedjahtera 2",
    companyNpwp: "223333331333331",
    logoutTimer: 5000 //5 detik auto clear cookies "pajakio", "expired-token-pajakio", "lastSelectedCompany" dan redirect ke login
  },
  {
    companyId: 3,
    companyName: "PT. Lorem Ipsum Sedjahtera 3",
    companyNpwp: "223333331333331",
    logoutTimer: 0
  },
]
menuNavbar: [
  {
    slug: 'manajemen-perusahaan',
    name: 'Manajemen Perusahaan'
  },{
    slug: 'atur-pengguna',
    name: 'Atur Pengguna'
  },{
    slug: 'integrasi-api',
    name: 'Integrasi API'
  },{
    slug: 'subscription',
    name: 'Subscription'
  },{
    slug: 'log-aktifitas',
    name: 'Log Aktifitas'
  },{
    slug: 'feedback',
    name: 'Feedback'
  },{
    slug: 'logout',
    name: 'Logout'
  },
],`
}}
        </pre>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: {
    TypoText,
    DashboardHeader
  },
  data() {
    return {
      companyList: [
        {
          companyId: 1,
          companyName: "PT.LoremIpsumSedjahteraLoremIpsumSedjahtera",
          companyNpwp: "223333331333331",
          logoutTimer: 0
        },
        {
          companyId: 2,
          companyName: "PT. Lorem Ipsum Sedjahtera 2",
          companyNpwp: "223333331333331",
          logoutTimer: 5000
        },
        {
          companyId: 3,
          companyName: "PT. Lorem Ipsum Sedjahtera 3",
          companyNpwp: "223333331333331",
          logoutTimer: 0
        },
      ],
      menuNavbar: [
        {
          slug: 'manajemen-perusahaan',
          name: 'Manajemen Perusahaan'
        },{
          slug: 'atur-pengguna',
          name: 'Atur Pengguna'
        },{
          slug: 'integrasi-api',
          name: 'Integrasi API'
        },{
          slug: 'subscription',
          name: 'Subscription'
        },{
          slug: 'log-aktifitas',
          name: 'Log Aktifitas'
        },{
          slug: 'feedback',
          name: 'Feedback'
        },{
          slug: 'logout',
          name: 'Logout'
        },
      ],
      selectedCompany: {},
    }
  },
  mounted() {
    this.selectedCompany = {
      companyId: 3,
      companyName: "PT. Lorem Ipsum Sedjahtera 3",
      companyNpwp: "223333331333331",
      logoutTimer: 0
    }
  },
  methods: {
    setSelectedCompany(value){
      this.selectedCompany = value
    },
    actionRoute(value) {
      console.log(value)
    }
  },
}
</script>

<style lang="scss">
.page-header {

}
</style>