<template>
  <card class="card-user" style="max-height:100%">

   <div class="row" >
      <div :class="`col-1 order-first`" >
				<button 
					class="btn btn-outline-info btn-sm" 
					round
					type="button"
					@click="setnewview(12,0)">
					+</button>
				<button 
          v-show="!consoleview"
					class="btn btn-warning btn-sm" 
					round
					type="button"
					@click="setnewview(7,5)">
					-</button>
      </div>
      <div :class="`col-10`" >
      </div>
      <div :class="`col-1 order-last float-sm-right`" >
				<button 
					class="btn btn-outline-info btn-sm float-right" 
					round
					type="button"
					@click="setnewview(0,12)">
					+</button>
				<button 
          v-show="!consolemicro"
					class="btn btn-warning btn-sm float-right" 
					round
					type="button"
					@click="setnewview(7,5)">
					-</button>
      </div>
   </div>
<div class="divider py-1 "><hr></div>

    <div class="row" >
      <div :class="`col-${viewmicroservices} order-first`" >
      <br>
        <available-mymicroservices
        v-show="consolemicro"
        :key="componentKeyreloadservice5custom1" 
        >

        </available-mymicroservices>
      </div>

      <div :class="`col-${viewconsole} order-last`" >
      <br>
        <adhoc-view
          v-show="consoleview"
        >

        </adhoc-view>
      </div>
    </div>


  </card>
</template>
<script>
import {mapState, mapGetters, mapActions} from 'vuex'
//import ViewNetwork from "./mynetwork/mytable.vue";
import AdhocView from "./mynetwork/AdhocView.vue";
import card from '@/components/Card.vue'
//import DockerServices from "./mynetwork/dockerservices.vue";
import AvailableMymicroservices from "./mynetwork/availablemicroservicescustom.vue";
export default {
   components: {
 //    ViewNetwork,
     AdhocView,
     card,
  //   DockerServices,
     AvailableMymicroservices
   },
   data () {
      return {
        viewmicroservices: 7,
        viewconsole: 5,
        consoleview: true,
        consolemicro: true,
        componentKeyreloadservice5custom1:1,
        loading: false,
        consoleView: 'off',
        productIndex: 1
      }
    },
  mounted() {
		this.$root.$on('hybrid_refresh_info_deploy_local', () => {
      this.componentKeyreloadservice5custom1 += 1
		})
  },
  beforeDestroy () {
		this.$root.$off('hybrid_refresh_info_deploy_local')
 },
  methods: {
    setnewview(m, c) {
      if(m == 12){
        this.viewmicroservices = m
        this.viewconsole = c
        this.consoleview = false
        this.consolemicro = true
      }
      if(c == 12){
        this.viewmicroservices = m
        this.viewconsole = c
        this.consoleview = true
        this.consolemicro = false
      }
      if(m == 7 || c == 5){
        this.viewmicroservices = m
        this.viewconsole = c
        this.consoleview = true
        this.consolemicro = true
      }
    }
 },

    created () {
      this.setnewview(7, 5)
    }

};
</script>
<style>
</style>

