<template>
  <div class="rk-board container">
    <div v-clickout="() => this.show = false">
      <div class="flex-c cp" @click="show = true">
        <h2 class="mb0 mr5">{{stateOptions.currentApplication.label}}</h2>
        <Icon type="md-link" class="mr10" :size="18"/>
      </div>
      <RkToolDashboard :stateOptions="stateOptions" :show.sync="show"/>
    </div>
    <Icon type="ios-arrow-forward" :size="18" class="grey mr10"/>
    <rk-select v-if='stateOptions.currentEndpoint' :value="stateOptions.currentEndpoint.key" @input="endpointChange" :data="stateOptions.endpoints">
    </rk-select>
    <!-- <select v-if='stateOptions.currentEndpoint' :value="stateOptions.currentEndpoint.key" @change="endpointChange($event)" class="mr15" style="color:#fafafa;background: 0; border: 0; outline: none;">
      <option style="background-color: #2f333c;" v-for="i in stateOptions.endpoints" :key="i.key" :value="i.key">{{i.label}}</option>
    </select> -->
    <span class="grey mr10">|</span>
    <rk-select v-if='stateOptions.currentServer' :value="stateOptions.currentServer.key" @input="serverChange" :data="stateOptions.servers">
    </rk-select>
    <!-- <select  v-if='stateOptions.currentServer' :value="stateOptions.currentServer.key" @change="serverChange($event)" class="grey mr15" style="background: 0; border: 0; outline: none;">
      <option style="background-color: #2f333c;" v-for="i in stateOptions.servers" :key="i.key" :value="i.key">{{i.name}}</option>
    </select> -->
    <button class="rk-board-inspector" @click="$emit('showServer')">inspector</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { State } from '@/store/modules/options.ts';
import { Component, Prop } from 'vue-property-decorator';
import RkToolDashboard from '@/components/rk-tool-dashboard.vue';
import { endpointChange, serverChange } from '@/store/dispatch/dashboard.ts';

@Component({
  components: { RkToolDashboard },
})
export default class RkBoard extends Vue {
  @Prop() stateOptions: State;
  show:Boolean = false;
  endpointChange(e) {
    this.show = this.show;
    endpointChange(e);
  }
  serverChange(e) {
    this.show = this.show;
    serverChange(e);
  }
}
</script>
<style lang="scss">
.rk-board{
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding-top: 20px;
  padding-bottom:  20px;
  color: #fafafa;
  // background-color: #f6f7fb;
  background-color: #333840;
}
.rk-board-service{
  font-weight: 600;
}
.rk-board-inspector{
  cursor: pointer;
  border-radius: 4px;
  background-color: #4477dd;
  border: 0;
  color: #fff;
  outline: none;
  padding: 2px .7em;
  transition: background-color .3s;
  &:hover{
    background-color: #5286f0;
  }
}
</style>