<template>
  <base-nav
    container-classes="container-fluid"
    class="navbar-top navbar-expand"
    :class="{'navbar-dark': type === 'default'}"
  >
    <a href="#" aria-current="page" class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block active router-link-active"> {{$route.name}} </a>
    <!-- Navbar links -->
    <b-navbar-nav class="align-items-center ml-md-auto">
      <!-- This item dont have <b-nav-item> because item have data-action/data-target on tag <a>, wich we cant add -->
      <li class="nav-item d-sm-none">
        <a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
          <i class="ni ni-zoom-split-in"></i>
        </a>
      </li>
    </b-navbar-nav>
    <b-navbar-nav class="align-items-center ml-auto ml-md-0">
      <!--<b-form-input v-model="text" placeholder="Enter your name"></b-form-input> -->
      <b-button :disabled="buttonStates.core" @click="handleClick('core')">CORE</b-button>
      <b-button :disabled="buttonStates.tool" @click="handleClick('tool')">TOOL</b-button>
      <b-button :disabled="buttonStates.hyvis" @click="handleClick('hyvis')">HYVIS</b-button>
      <b-button :disabled="buttonStates.mes" @click="handleClick('mes')">MES</b-button>
      <base-dropdown menu-on-right
                     class="nav-item"
                     tag="li"
                     title-tag="a"
                     title-classes="nav-link pr-0">
        <a href="#" class="nav-link pr-0" @click.prevent slot="title-container">
          <b-media no-body class="align-items-center">
      
                  
                  <div v-if="isConnected">
                      <Socket></Socket>
                  </div>
                  <div v-if="!isConnected">
                      <Circle8></Circle8>
                  </div>                  
                  <!--<span  class="avatar avatar-sm rounded-circle">
                    <img alt="Image placeholder" src="img/theme/ok1.gif">
                  </span>-->
            <b-media-body class="ml-2 d-none d-lg-block">
              <span v-if="isConnected" class="mb-0 text-sm  font-weight-bold"> 통신중</span>
              <span v-else class="mb-0 text-sm  font-weight-bold"> 연결중</span>
            </b-media-body>
          </b-media>
        </a>

        <template>

          <b-dropdown-header class="noti-title">
            <h6 class="text-overflow m-0">Welcome!</h6>
          </b-dropdown-header>
          <b-dropdown-item href="#!">
            <i class="ni ni-single-02"></i>
            <span>My profile</span>
          </b-dropdown-item>
          <b-dropdown-item href="#!">
            <i class="ni ni-settings-gear-65"></i>
            <span>Settings</span>
          </b-dropdown-item>
          <b-dropdown-item href="#!">
            <i class="ni ni-calendar-grid-58"></i>
            <span>Activity</span>
          </b-dropdown-item>
          <b-dropdown-item href="#!">
            <i class="ni ni-support-16"></i>
            <span>Support</span>
          </b-dropdown-item>
          <div class="dropdown-divider"></div>
          <b-dropdown-item href="#!">
            <i class="ni ni-user-run"></i>
            <span>Logout</span>
          </b-dropdown-item>

        </template>
      </base-dropdown>
    </b-navbar-nav>
  </base-nav>
  
</template>
<script>
import { CollapseTransition } from 'vue2-transitions';
import { BaseNav, Modal } from '@/components';
import {Circle8} from 'vue-loading-spinner';
import {Socket} from 'vue-loading-spinner';


export default {
  components: {
    Circle8,
    Socket,
    CollapseTransition,
    BaseNav,
    Modal
  },
  props: {
    type: {
      type: String,
      default: 'default', // default|light
      description: 'Look of the dashboard navbar. Default (Green) or light (gray)'
    }
  },
  computed: {              
    routeName() {
      const { name } = this.$route;
      return this.capitalizeFirstLetter(name);
    },
    socketMessage() {
      return this.$store.getters['websocket/socketMessage'];
    },
    isConnected() {
      return this.$store.state.websocket.socket.isConnected;
    }
  },
  data() {
    return {
      activeNotifications: false,
      showMenu: false,
      searchModalVisible: false,
      searchQuery: '',      
      message: {"COMMAND":"SOCKET_SET","EXECUTE":"INIT_TOOL_SELECT_LIST","WORK_VALUE":"ABC"},      
      buttonStates: {
        core: true,
        tool: false,
        hyvis: false,
        mes: false,
      }      
    };
  },
  created() {
    //this.$connect();
    this.$store.dispatch('websocket/connect');  // 웹소켓 연결
  },  
  methods: {
    capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    },
    toggleNotificationDropDown() {
      this.activeNotifications = !this.activeNotifications;
    },
    closeDropDown() {
      this.activeNotifications = false;
    },
    handleClick(button) {
      // 모든 버튼을 활성화합니다.
      for (let key in this.buttonStates) {
        this.buttonStates[key] = false;
      }
      // 클릭된 버튼만 비활성화합니다.
      this.buttonStates[button] = true;
      this.$store.dispatch('websocket/disconnect');

      switch (button) {
        case 'core':
          this.$store.commit('websocket/SOCKET_INFO_SET','8000');      
          break;
        case 'tool':
          this.$store.commit('websocket/SOCKET_INFO_SET','8001');      
          break;
        case 'hyvis':
          this.$store.commit('websocket/SOCKET_INFO_SET','8002');      
          break;
        case 'mes':
          this.$store.commit('websocket/SOCKET_INFO_SET','8003');      
          break;          
        default:
          alert( "어떤 값인지 파악이 되지 않습니다." );
      }

    },    

  },
};
</script>
