<script setup>
import { ref, watch } from 'vue'
import CGlobalNav from '../CGlobalNav.vue'

// 売上件数を定義する
const salesNum = ref(1)

// お問合せ件数を定義する
const contactNum = ref(0)

const targetMenu = ref([])
// メインメニュー配列
const getTargetMenu = (salesNum, contactNum) => [
  {
    menuIcon: 'trending_up',
    menuLink: '/CSales',
    menuLabel: '売上管理',
    menuAlert: salesNum,
  },
  {
    menuIcon: 'folder_shared',
    menuLink: '/CLicense',
    menuLabel: 'ライセンス一覧',
  },
  {
    menuIcon: 'business',
    menuLink: '/CCompany',
    menuLabel: '契約企業一覧',
  },
  {
    menuIcon: 'groups',
    menuLink: '/CEmployee',
    menuLabel: '社員一覧',
  },
  {
    menuIcon: 'source',
    menuLink: '/CItem',
    menuLabel: '外壁一覧',
  },
  {
    menuIcon: 'manage_search',
    menuLink: '/CPastCases',
    menuLabel: '過去案件',
  },
  {
    menuIcon: 'payments',
    menuLink: '/CPaymentHandling',
    menuLabel: '入金対応管理',
  },
  {
    menuIcon: 'dvr',
    menuLink: '/CInformation',
    menuLabel: '自社情報',
  },
  {
    menuIcon: 'help_outline',
    menuLink: '/CContact',
    menuLabel: 'お問い合わせ',
    menuAlert: contactNum,
  },
]

watch(
  contactNum,
  (newValue) => {
    targetMenu.value = getTargetMenu(salesNum.value, contactNum.value)
  },
  { immediate: true }
)
const event = () => {
  contactNum.value++
}

const linkData = ref('')
</script>

<template>
  <button @click="event">{{ targetMenu?.[8].menuAlert }}</button>
  コードリック model: {{ linkData }}
  <CGlobalNav
    v-model:linkData="linkData"
    v-model:targetMenu="targetMenu"
    p_Color="_primary"
    p_ProjectName="日本語プロジェクト名"
  />
</template>

<style>
:root {
  --q-primary: #5e421d;
}
</style>
