<script setup>
import { onMounted, ref, watch } from 'vue'
import MDIcon from '../MDIcon/MDIcon.vue'
import { useRoute } from 'vue-router'
import { copy } from 'copy-anything'

const props = defineProps({
  /**
   * プロジェクトロゴ
   * @example p_ImgSrc: 'CodelicLogo.svg'
   */
  p_ImgSrc: {
    type: String,
    default: 'NoImage.svg',
  },
  /**
   * プロジェクトネーム
   * @example p_ProjectName: 'プロジェクトネーム'
   */
  p_ProjectName: { type: String, default: 'ProjectName' },
  /**
   * カラーを切り替える
   * @example p_Color: '_primary'
   */
  p_Color: {
    type: String,
    default: '_primary',
    validator: (val) => ['_primary'].includes(val),
  },
  /**
   * リンクデータv-model
   * @example linkData: String or Boolean
   */
  linkData: {
    type: [String, Boolean],
    default: '',
  },
  /**
   * isCloseForce
   */
  isNoEmitlinkData: {
    type: Boolean,
    default: false,
  },
  /**
   * isForceMenu
   */
  isForceMenu: {
    type: Boolean,
  },

  /**
   * メニューv-model
   * @example linkData: []
   */
  targetMenu: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['update:linkData'])

// ロゴをセットする
const imgSrc = '/image/' + props.p_ImgSrc

// プロジェクトネームをセットする
const setProjectName = ref(props.p_ProjectName)

// アラート配列を定義する
const alertArr = []

// 展開時のメニュータイプを設定する
const menuType = ref(true)
watch(
  () => props.isForceMenu,
  () => {
    if (typeof props.isForceMenu === 'boolean') {
      menuType.value = props.isForceMenu
    }
  }
)
// ヘッダーをクリックする
const clickHeader = () => {
  if (props.isNoEmitlinkData) return
  menuType.value = !menuType.value
  emit('update:linkData', menuType.value)

  // グローバルナビを閉じた際にアラートが存在する場合、アラート配列へ値を追加する
  if (!menuType.value && props.targetMenu.some((d) => d.menuAlert)) {
    copy(props.targetMenu).map((d, index) => {
      if (d.menuAlert) {
        alertArr.push(index)
      } else {
        alertArr.push(NaN)
      }
      return d
    })
  }
  // グローバルナビを開いた場合、アラート配列を空にする
  if (menuType.value) {
    alertArr.length = 0
  }
}

// 選択されたメニューのindex
const currentNum = ref(-1)
// 選択されたサブメニューのリンク
const currentSubLink = ref('')
// 展開中のサブメニュー配列
const openSubMenuArr = ref([])

// ページが開いたときにもクリックした場合
onMounted(() => {
  // 現在のパス
  const currentPath = useRoute().path

  props.targetMenu.map((d, index) => {
    if (d.menuLink === currentPath) {
      currentNum.value = index
      return
    }
    if (d.subMenu && d.subMenu.some((n) => n.subMenuLink === currentPath)) {
      currentSubLink.value = currentPath
      return
    }
  })
})

const route = useRoute()
// メニュー配列をコピーする
const copyTargetMenu = ref(copy(props.targetMenu))
// menuLink情報のみの配列を生成する
const menuLinkArr = copyTargetMenu.value.map((d) => {
  d = d.menuLink
  return d
})

// URLと一致するプロパティのインデックスナンバーをcurrentNumへ代入する
watch(route, () => {
  if (route.path !== props.linkData) {
    const targetSubmenuLinkArr = []
    if (props.targetMenu.some((d) => !d.menuLink)) {
      const targetArr = copy(props.targetMenu).filter((d) => d.subMenu)
      targetArr.map((d) => {
        d.subMenu.map((v) => {
          return targetSubmenuLinkArr.push(v.subMenuLink)
        })
        return d
      })
    }
    currentSubLink.value = targetSubmenuLinkArr.find((d) => d === route.path)
    if (!currentSubLink.value) {
      currentNum.value = menuLinkArr.indexOf(route.path)
    }
  }
})

// メニューボタンをクリックした場合
const menuClick = (menuData, index) => {
  if (currentNum.value !== index) {
    currentNum.value = index
  }
  // サブメニューが含まれる場合
  if (menuData.subMenu) {
    if (openSubMenuArr.value.some((d) => d === index)) {
      // サブメニューを閉じる
      openSubMenuArr.value = openSubMenuArr.value.filter((d) => d !== index)
    } else {
      emit('update:linkData', menuData.menuLink)
      // サブメニューを展開させる
      openSubMenuArr.value.push(index)
    }
  } else {
    // メニューリンクをemitする
    currentSubLink.value = '/'
    emit('update:linkData', menuData.menuLink)
  }
}

// サブメニューボタンをクリックした場合
const subMenuClick = (subMenuData) => {
  // メインボタンの現在地を配列内から外す
  currentNum.value = -1

  if (currentSubLink.value !== subMenuData.subMenuLink) {
    // クリックしたサブメニューのリンクを代入する
    currentSubLink.value = subMenuData.subMenuLink
  }
  // サブメニューリンクをemitする
  emit('update:linkData', subMenuData.subMenuLink)
}
</script>

<template>
  <!-- 外枠 -->
  <div class="_box" :class="[{ _contents_box_small: !menuType }]">
    <!-- コンテンツコンテナ -->
    <div class="_contents_container">
      <!-- グローバルナビヘッダーエリア -->
      <!-- ヘッダーボックス -->
      <div
        class="_contents_box"
        :class="[`${p_Color}`, { _contents_box_small: !menuType }]"
        @click="clickHeader"
      >
        <!-- ヘッダーコンテナ -->
        <div class="_header_container">
          <!-- プロジェクトロゴ -->
          <img :src="imgSrc" alt="プロジェクトロゴ" class="_project_logo" />
          <!-- プロジェクトネーム -->
          <div v-if="menuType" class="_project_name">{{ setProjectName }}</div>
          <!-- レフトアロー -->
          <MDIcon v-if="menuType" name="chevron_left" class="_menu_arrow" />
        </div>
      </div>

      <!-- メニューエリア -->
      <!-- メニューボタン v-for -->
      <div
        v-for="(item, index) in props.targetMenu"
        :key="index"
        class="_contents_box"
        :class="{
          _contents_box_small: !menuType,
          _active_btn:
            currentNum === index && !item.subMenu && (!currentSubLink || currentSubLink === '/'),
        }"
      >
        <!-- メニューコンテンツコンテナ -->
        <div class="_menu_contents_container" :class="p_Color" @click="menuClick(item, index)">
          <!-- メニューアイコン -->
          <MDIcon
            v-if="!alertArr.some((d) => d === index)"
            :name="item.menuIcon"
            class="_menu_icon"
          />
          <!-- メニューアイコンアラート -->
          <MDIcon
            v-if="alertArr.some((d) => d === index)"
            :name="item.menuIcon"
            class="_menu_icon_alert"
          />
          <!-- メニュータイトル -->
          <div v-if="menuType" class="_menu_title">{{ item.menuLabel }}</div>
          <!-- アロー -->
          <div v-show="item.subMenu" class="_submenu_open_arrow_position">
            <MDIcon
              v-if="menuType"
              name="expand_more"
              class="_submenu_open_arrow"
              :class="{
                _arrow_action: openSubMenuArr.includes(index),
                _arrow_action_revers: !openSubMenuArr.includes(index),
                // サブメニューが存在していて、かつ、サブメニューにアラートがある場合
                _arrow_alert: !!item?.subMenu && item?.subMenu.some((d) => !!d.menuAlert),
              }"
            />
          </div>
          <!-- アラート表示 -->
          <div v-show="!!item.menuAlert && menuType" class="_submenu_open_alert_position">
            <div class="_alert_circle">{{ item.menuAlert }}</div>
          </div>
        </div>

        <!-- サブメニューエリア -->
        <div v-if="openSubMenuArr.includes(index)">
          <!-- サブメニューボタン v-for -->
          <!-- サブメニューコンテンツコンテナ -->
          <div
            v-for="(subItem, _index) in item.subMenu"
            :key="_index"
            :class="{ _active_btn: currentSubLink == subItem.subMenuLink }"
            @click="subMenuClick(subItem)"
          >
            <div class="_sub_menu_contents_container" :class="p_Color">
              <!-- サブメニューアイコン -->
              <MDIcon :name="subItem.menuIcon" class="_sub_menu_icon" />
              <!-- サブメニュータイトル -->
              <div v-if="menuType" class="_sub_menu_title">{{ subItem.menuLabel }}</div>
              <!-- サブメニューのアラート表示 -->
              <div v-show="!!subItem.menuAlert && menuType" class="_submenu_alert_position">
                <div class="_alert_circle">{{ subItem.menuAlert }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 下部スペース -->
      <div class="_bottom_space" :class="p_Color" />
    </div>
  </div>
</template>

<style scoped>
/* カラー */
._primary {
  background: var(--q-primary, #3c4d58);
}
</style>

<style lang="sass" scoped>

// 外枠
._box
  width: 250px
  transition: 0.3s
  height: 100vh
  // overflow-y: none
  -ms-autohiding-scrollbar: none
  scrollbar-width: none

._box::-webkit-scrollbar
  display: none

// コンテンツコンテナ
._contents_container
  height: 100%
  display: flex
  flex-direction: column

// コンテンツボックス
._contents_box
  width: 250px
  cursor: pointer
  transition: 0.3s
  border-bottom: 2px solid #ffffff

// ヘッダーコンテナ
._header_container
  display: flex
  align-items: center
  padding: 1rem 5px 1rem 20px
._header_box:hover
  opacity: 0.9

// メニューコンテンツコンテナ
._menu_contents_container
  display: flex
  align-items: center
  padding: 0.8rem 5px 0.8rem 20px
._menu_contents_container:hover
  opacity: 0.9
._menu_contents_container:active
  opacity: 0.8

// サブメニューコンテンツコンテナ
._sub_menu_contents_container
  display: flex
  align-items: center
  color: #ffffff
  padding-left: 20px
  padding-top: 0.5rem
  padding-bottom: 0.5rem
._sub_menu_contents_container:hover
  opacity: 0.9
._sub_menu_contents_container:active
  opacity: 0.8

// メニュータイプ/スモール
._contents_box_small
  width: 70px

// 選択中のボタン
._active_btn
  opacity: 0.8

._active_btn ._menu_contents_container:active,
._active_btn ._sub_menu_contents_container:active
  opacity: 0.7

// プロジェクトロゴ
._project_logo
  width: 30px
  margin-right: 20px

// プロジェクトネーム
._project_name
  color: #ffffff
  font-weight: 600
  white-space: nowrap

// メニューアイコン
._menu_icon
  color: #ffffff
  font-size: 30px
  margin-right: 20px
// メニューアイコンアラート
._menu_icon_alert
  color: var(--q-accent, #f2961c)
  font-size: 30px
  margin-right: 20px
// メニューアロー
._menu_arrow
  color: #ffffff
  font-size: 24px
  margin-left: auto
._submenu_open_arrow
  color: #ffffff
  font-size: 24px
._arrow_alert
  color: #ff0101
  font-size: 24px
._submenu_open_arrow_position
  margin-left: auto

// アラート表示
._submenu_open_alert_position
  margin-left: auto
  margin-right: 5px
._submenu_alert_position
  margin-left: auto
  margin-right: 10px

._alert_circle
  width: 18px
  height: 18px
  font-size: 12px
  font-weight: 600
  color: var(--q-primary, #3c4d58)
  display: flex
  justify-content: center
  align-items: center
  border-radius: 50%
  background: var(--q-accent, #f2961c)

// メニュータイトル
._menu_title
  color: #ffffff
  font-weight: 600
  width: fit-content
  white-space: nowrap
._sub_menu_title
  color: #ffffff
  font-weight: 600
  width: fit-content
  white-space: nowrap

// サブメニューアイコン
._sub_menu_icon
  width: 30px
  height: 30px
  color: #ffffff
  font-size: 30px
  margin-right: 20px
// サブメニュー操作時に動作する
._arrow_action
  transition: 0.3s
  transform: rotate(180deg)
._arrow_action_revers
  transition: 0.3s
  transform: rotate(0deg)

// 下部スペース
._bottom_space
  width: 100%
  height: initial
  flex: 1
</style>
