<template>
  <v-navigation-drawer
    app
    clipped
    color="black"
    dark
    permanent
  >
    <v-layout
      column
      fill-height
    >
      <v-list
        v-for="item in items"
        :key="item.title"
        class="py-0"
      >
        <div v-if="!item.items">
          <v-list-item
            :to="item.route"
            active-class="blue white--text"
          >
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </div>

        <v-list-group
          v-else
          :prepend-icon="item.icon"
          no-action
        >
          <template v-slot:activator>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </template>

          <div
            v-for="childItem in item.items"
            :key="childItem.title"
          >
            <v-list-item
              :to="childItem.route"
              :exact="childItem.route === '/character'"
              active-class="blue white--text"
            >
              <v-list-item-title>{{ childItem.title }}</v-list-item-title>
            </v-list-item>
          </div>
        </v-list-group>
      </v-list>
      <v-spacer />
      <v-list>
        <v-list-item @click="logout">
          <v-list-item-icon>
            <v-icon>mdi-logout</v-icon>
          </v-list-item-icon>

          <v-list-item-title>로그아웃</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-layout>
  </v-navigation-drawer>
</template>

<script>
import * as api from '@/api/menu'

export default {
  name: "SideMenu",
  data() {
    return {
      isLoading: false,
      items: [],
    }
  },

  async created() {
    await this.getMenus()
  },

  methods: {
    notifyError(message) {
      this.$dialog.notify.error(message)
    },

    notifySuccess(message) {
      this.$dialog.notify.success(message)
    },

    async getMenus() {
      this.isLoading = true
      try {
        let res = await api.getMenus();
        if (res.status === 200 && res.data.success === true && res.data.data.length > 0) {
          this.items = res.data.data

          // '시리즈 관리' 메뉴에 '배너 등록' 하위 메뉴 추가
          try {
            const seriesMenu = this.items.find(m => m && m.title === '시리즈 관리')
            if (seriesMenu) {
              if (!Array.isArray(seriesMenu.items)) {
                seriesMenu.items = seriesMenu.items ? [].concat(seriesMenu.items) : []
              }
              const exists = seriesMenu.items.some(ci => ci && ci.route === '/content/series/banner')
              if (!exists) {
                seriesMenu.items.push({
                  title: '배너 등록',
                  route: '/content/series/banner',
                  items: null
                })
              }
            }
          } catch (e) {
            // ignore
          }

          // 캐릭터 챗봇 메뉴 추가
          this.items.push({
            title: '캐릭터 챗봇',
            route: null,
            items: [
              {
                title: '배너 등록',
                route: '/character/banner',
                items: null
              },
              {
                title: '캐릭터 리스트',
                route: '/character',
                items: null
              },
              {
                title: '큐레이션',
                route: '/character/curation',
                items: null
              },
              {
                title: '정산',
                route: '/character/calculate',
                items: null
              },
              {
                title: '원작',
                route: '/original-work',
                items: null
              },
            ]
          })
        } else {
          this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
          this.logout();
        }
      } catch (e) {
        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
        this.logout();
      } finally {
        this.isLoading = false
      }
    },

    logout() {
      this.$store.dispatch('accountStore/LOGOUT')
    }
  }
}
</script>

<style scoped>
</style>
