<template>
  <card class="card-user" style="max-height:100%">
      <div class="author">
        <img class="avatar border-white" src="@/assets/img/hybrid-1.png" alt="...">
      </div>


  <v-wait for="myRunInstancetutor">
    <template slot="waiting">
      <div>
        <img src="@/assets/loading.gif" />
        Enter Lab_room...
      </div>
    </template>
  </v-wait>

      <b-container fluid>

          <div class="row text-center">
            <div class="col-12">
              <b>Swarmlab hybrid Join</b>
            </div>
          </div>

<br>
        <div class="row" >
          <div class="col-3 text-info" >
              <div class="input-group-prepend">
                <button
                        class="btn btn-outline-success"
                        round
                        type="button"
                        @click="onActionHybrid('stack-start')"
                        v-if="hybridshowdata.bootstrapstackname && hybridshowdata.status"
                >
                  Start Stack
                </button>
              </div>
          </div>
          <div class="col-3 text-info" >
              <div class="input-group-prepend">
                <button
                        class="btn btn-outline-danger"
                        round
                        type="button"
                        @click="onActionHybrid('stack-stop')"
                        v-if="hybridshowdata.bootstrapstackname && hybridshowdata.status"
                >
                 Leave Stack
                </button>
              </div>
          </div>
          <div class="col-3 text-info" >
              <div class="input-group-prepend">
              <!--
                <button
                        class="btn btn-outline-danger"
                        round
                        type="button"
                        @click="onActionHybrid('service-stop')"
                        v-if="hybridshowdata.bootstrapnameid && hybridshowdata.status"
                >
                  Remove Service
                </button>
                -->
              </div>
          </div>
          <div class="col-3 text-info" >
              <div class="input-group-prepend">
                <button
                        class="btn btn-outline-info"
                        round
                        type="button"
                        v-if="hybridshowdata.bootstrapstackname"
                        @click="onActionHybrid('service-info')"
                >
                  Service Info
                </button>
              </div>
          </div>
        </div> <!-- row -->

        <div class="row" 
             v-if="hybridshowdata.bootstrapstackname"
        >
          <div class="col-2 text-info" 
          >
          Instances
          </div>
          <div class="col-3 text-secondary" >
          {{ hybridshowdata.Replicas }}
          </div>
          <div class="col-2 text-info" >
          Image          
          </div>
          <div class="col-4 text-secondary" >
          {{ hybridshowdata.bootstrapimage }}
          </div>
        </div> <!-- row -->
        <div class="row" 
             v-if="hybridshowdata.bootstrapstackname"
        >
          <div class="col-2 text-info" >
          Names
          </div>
          <div class="col-3 text-secondary" >
          {{ hybridshowdata.bootstrapname }}
          </div>
          <div class="col-2 text-info" >
          EndAt
          </div>
          <div class="col-4 text-secondary" >
          {{ hybridshowdata.bootstrapdateend }}
          </div>
        </div> <!-- row -->
        <div class="row" 
             v-if="hybridshowdata.bootstrapstackname"
        >
          <div class="col-2 text-info" >
          Networks
          </div>
          <div class="col-3 text-secondary" >
          {{ hybridshowdata.bootstrapnetwork }}
          </div>
          <div class="col-2 text-info" >
          BeginAt
          </div>
          <div class="col-4 text-secondary" >
          {{ hybridshowdata.bootstrapdatebegin }}
          </div>
        </div> <!-- row -->
        <div class="row" 
             v-if="hybridshowdata.bootstrapstackname"
        >
          <div class="col-2 text-info" >
          Status
          </div>
          <div class="col-3 text-secondary" 
            v-if="hybridshowdata.status"
          >
          <span class="ti-check text-success"> </span>
          </div>
          <div class="col-3 text-secondary" 
            v-else
          >
          <span> </span>
          </div>
          <div class="col-2 text-info" >
          Ports
          </div>
          <div class="col-4 text-secondary" 
            v-if="hybridshowdata.ports!=0"
          >
          {{ hybridshowdata.ports }}
          </div>
          <div class="col-4 text-secondary" 
            v-else
          >
          
          </div>
        </div> <!-- row -->
      </b-container>
   <b-container fluid class="bv-example-row">

		<div class="input-group input-group-sm sm-3">
					
			<input type="text" 
				class="form-control" 
				aria-label="Small" aria-describedby="inputGroup-sizing-sm"
				placeholder="Search By StackName"
				v-model="searchFor"
				@keyup.enter="setFilter"
				>
					
			<div class="input-group-append">
				<button 
					class="btn btn-outline-primary" 
					round
					type="button"
					@click="setFilter">
					Go</button>
			</div>
					
			<div class="input-group-append">
				<button class="btn btn-outline-secondary" 
					round
					type="button"
					@click="resetFilter">
					Reset</button>
			</div>
    </div>
		<div class="white h-100 flex-fixed-width-item"
			<vuetable 
				ref="vuetable"
				:key="vuetablekey"
				:api-url='apiurl'
				:api-mode="true"
				:http-options="httpOptions"
				:fields="fields"
				:item-actions="itemActions"
				:sort-order="sortOrder"
				:show-sort-icons="true"
				:multi-sort="multiSort"
				:per-page="perpage"
				pagination-path="links.pagination"
				:pagination-component="paginationComponent"
				:append-params="moreParams"
				wrapper-class="vuetable-wrapper"
				loading-class="loading"
				detail-row-id="id"
				@vuetable:pagination-data="onPaginationData"
				@vuetable:load-success="loadsuccess"
				:css="css.table"
				 >
        <div slot="actionslocal" slot-scope="props">
          <div class="d-flex justify-content-center">
            <button
              v-if="testactionrowindex[props.rowData.bootstrapnameid]"
              class="ti-thumb-up btn btn-info btn-sm"
              title="Remove Stack"
              disabled
              round
              >
            </button>
            <button
              v-else
              class="ti-thumb-down btn btn-secondary btn-sm"
              title="Remove Stack"
              disabled
              round
              >
            </button>
          </div>
        </div>
        <div slot="actions" slot-scope="props">
          <div class="d-flex justify-content-center">
            <button
              v-if="actionrowindex == props.rowIndex"
              class="ti-more-alt btn btn-secondary btn-sm"
              round
              @click="onAction('run-more', props.rowData, props.rowIndex)">
            </button>
            <button
              v-else
              class="ti-more btn btn-outline-secondary btn-sm"
              round
              @click="onAction('run-more', props.rowData, props.rowIndex)">
            </button>
          </div>
				</div>
			</vuetable>
			<div class="vuetable-pagination ui basic segment grid">
				<vuetable-pagination-info 
					ref="paginationInfo"      
					:css="css.paginationInfo"
      		>
				</vuetable-pagination-info>
				<vuetable-pagination 
					:css="css.pagination"
					ref="pagination"
        	@vuetable-pagination:change-page="onChangePage"
      		>
				</vuetable-pagination>
			</div>
    </div>
   </b-container>
  </card>
</template>
<script>
import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
import {Vuetable, VuetablePaginationDropdown} from 'vuetable-2'
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
import CssConfig from 'vuetable-2/src/components/VuetableCssConfig.js'
import card from '@/components/Card.vue'
import {ApiConfig} from "@/config/index";
export default {
  components: {
      card,
	    Vuetable,
			VuetablePagination,
			VuetablePaginationInfo,
			VuetablePaginationDropdown
	},
  props: {
  },
  data() {
   return{
    testactionrowindex:[],  // joined        
    actionrowindex:'',
	  playbookInfo: {},
    hybridshowdata:{},
    token: '',
	  CONFIG: {},
    isstatus:'',
	  playbook: {
			'title':'',
			'name':'',
			'description':''
		},
			container:{
				name:'',
				view:0
			},
			pipeline:{},
 		selected: 'hybrid',
    options: [
      { text: 'Packages', value: 'packages' },
      { text: 'Images', value: 'images' },
      { text: 'Scripts', value: 'scripts' }
    ],
		showModal: false,
		visibility: [],
	 	active:false,
		vuetablekey:0,
		fielddata:{},
		fields: [ 
          {
        name: 'bootstrapname',
        title: '<span class="orange"></span>Name',
        sortField: 'bootstrapname',
        visible:true,
        dataClass: 'text-left text-wrap text-break break-word',
        width: '15%'
      },
      {
        name: 'bootstrapstackname',
        title: '<span class="orange"></span>StackName',
        sortField: 'bootstrapstackname',
        visible:true,
        dataClass: 'left aligned w-25',
        width: '10%'

      },
      {
        name: 'bootstrapstackid',
        title: '<span class="orange"></span>StackID',
        sortField: 'bootstrapstackid',
        visible:true,
        dataClass: 'left aligned w-25',
        width: '15%',
        callback: value => {
          //console.log(this)
          //console.log(this.fielddata)
              for(var i = 0; i < this.fielddata.length; i++) {
                 //call function here
                 var servicename = this.fielddata[i].bootstrapstackid
                 //console.log(JSON.stringify(servicename))
                 if(servicename == value){
                    var obj = {}
                    obj.bootstrapnameid = this.fielddata[i].bootstrapnameid
                    obj.bootstrapstackname = this.fielddata[i].bootstrapstackname
		                this.checkactionrowindex(obj)
                    //console.log(JSON.stringify('status '+JSON.stringify(this.fielddata[i])))

                 }
              }
              return value
        }

      },
      {
        name: '_id',
        title: '<span class="orange"></span>mongo',
        visible:false
      },
      {
        name: 'bootstrapdatebegin5',
        title: '<span class="orange"></span>Begin',
        sortField: 'bootstrapdatebegin5',
        titleClass: 'center aligned',
        visible:true,
        width: '10%'
      },
      {
        name: 'bootstrapusersjoin',
        title: '<span class="orange"></span>Public',
        sortField: 'bootstrapusersjoin',
        titleClass: 'center aligned',
        visible:true,
        width: '5%',
        callback: function(value) {
          if (value == true) {
              var v = '<span class="ti-check text-success"> </span>'
              return v
          }else{
              var v = '<span> </span>'
              return v
          }
        }
      },
      {
        name: 'status',
        title: '<span class="orange"></span>Status',
        sortField: 'status',
        titleClass: 'center aligned',
        visible:true,
        width: '5%',
        callback: function(value) {
          if (value == true) {
              var v = '<span class="ti-check text-success"> </span>'
              return v
          }else{
              var v = '<span> </span>'
              return v
          }
        }
      },
      {
        name: 'ID',
        sortField: 'ID',
        titleClass: 'center aligned',
        dataClass: 'left aligned w-25',
        visible:false,
        width: '15%'
      },
  
      {
          name: '__slot:actionslocal',   // <----
          title: ' Join',
          titleClass: 'center aligned',
          dataClass: 'center aligned',
          width: '5%',
          callback: 'getstatus'
        },
   
      {
          name: '__slot:actions',   // <----
          title: 'Actions',
          titleClass: 'center aligned',
          dataClass: 'center aligned',
          width: '5%'
        }
		],
		apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridbootstrapservicesall",
		//apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridservices",
		css: CssConfig,
    perpage: 10,
    searchFor: '',
		sortOrder: [{
				field: 'pipelinename',
				direction: 'asc'
		}],
    multiSort: true,
    paginationComponent: 'vuetable-pagination',
		itemActions: [
				{ name: 'view-item', label: '', icon: 'glyphicon glyphicon-zoom-in', class: 'btn btn-info', extra: {'title': 'View', 'data-toggle':"tooltip", 'data-placement': "left"} },
				{ name: 'edit-item', label: '', icon: 'glyphicon glyphicon-pencil', class: 'btn btn-warning', extra: {title: 'Edit', 'data-toggle':"tooltip", 'data-placement': "top"} },
				{ name: 'delete-item', label: '', icon: 'glyphicon glyphicon-remove', class: 'btn btn-danger', extra: {title: 'Delete', 'data-toggle':"tooltip", 'data-placement': "right" } }
		],
		moreParams: { 
				'filter':  '',
				'type':  'scripts',
				'tutor':  'yes'
			},
	 
		}
  },
	mounted() {
		this.$root.$on('hybrid_refresh_bootstrap_view', () => {
        Vue.nextTick( () => this.$refs.vuetable.refresh())
		})
	},
	created() {
    var url_string = window.location.href
    var url = new URL(url_string);
    this.token = url.searchParams.get("token");
    console.log("token "+ this.token);

	},
    beforeDestroy () {
		this.$root.$off('hybrid_refresh_bootstrap_view')
 },
  computed: {
		httpOptions() {
			var token = this.token
			    var p="headers: {Authorization: token}}"; //table props -> :http-options="httpOptions"
			    return {headers: {Authorization: 'Bearer ' + token}} //table props -> :http-options="httpOptions"
	  },

	},

  methods: {
		async checkactionrowindex(data){
                var obj = {}
                obj.token = this.token
                obj.bootstrapnameid = data.bootstrapnameid
                obj.bootstrapstackname = data.bootstrapstackname
                  var res1 = await store.dispatch('pipelineLLO/getserviceshybridstatus', obj)
                  var index = data.bootstrapnameid
                  if(res1.data.data == 'yes'){
                    Vue.set(this.testactionrowindex, data.bootstrapnameid, index)
                    console.log('res8 YES  '+JSON.stringify(res1.data))
                  }else{
                    console.log('res8 NO '+JSON.stringify(res1.data))
                    Vue.delete(this.testactionrowindex, data.bootstrapnameid)
                  }
                  //console.log('res8 all '+JSON.stringify(this.testactionrowindex))
        },


   async onActionHybrid(action) {
            //var logconfig = await store.getters['pipelineLLO/getconfig'];
            this.CONFIG = await store.getters['pipelineLLO/getstatusswarmlab'];
             if(this.CONFIG.hybrid == 'Online'){
              this.isstatus = true
             }else{
              this.isstatus = false
             }
        console.log('stack-start1 ' + JSON.stringify(this.CONFIG))
        //console.log('stack-start3 ' + JSON.stringify(logconfig1))
			if(action == 'stack-stop' ){
          var info='<h5>This will leave the stack with the name<b> '+ this.hybridshowdata.bootstrapstackname +'</b> </h5>'
          this.$swal({
            type: 'Info',
            title: 'Info!',
            icon:'warning',
            html: info,
            showCloseButton: true,
            showLoaderOnConfirm: false,
            allowOutsideClick: false,
            cancelButtonText: 'No, cancel!',
            showCancelButton: true,
            showLoaderOnConfirm: false,
            reverseButtons: true,
            focusCancel: true,
            confirmButtonText: 'Ok!'
          }).then((result)=> {
            this.onActionHybrid_stackrm(result);
          })

      }else if(action == 'stack-start' ){
        console.log('stack-start')
        if(this.isstatus == '1'){
          console.log(this.isstatus)
            var log = await store.dispatch("pipelineLLO/hybrid_join",{
              token:this.token,
              node:this.CONFIG.swarmlabid,
              bootstrapstackid:this.hybridshowdata.bootstrapstackid,
              bootstrapnameid:this.hybridshowdata.bootstrapnameid
            })
            Vue.nextTick( () => this.$refs.vuetable.refresh())
        }else{
        }
      }else if(action == 'service-info' ){
            console.log(JSON.stringify(action))
            console.log('CONFIG '+JSON.stringify(this.hybridshowdata))
          var url = this.hybridshowdata.bootstrapurl
          var info=`<h5>You will be redirected to the README page of the repository (OUTSIDE Swarmlab-Hybrid)<br> 
<a href="${url}" target="new">click here to continue</a>
</h5>
<br>
`
          this.$swal({
            type: 'Info',
            title: 'README',
            icon:'info',
            html: info,
            showCloseButton: true,
            showLoaderOnConfirm: false,
            allowOutsideClick: false,
            cancelButtonText: 'No, cancel!',
            showCancelButton: false,
            showLoaderOnConfirm: false,
            reverseButtons: true,
            focusCancel: true,
            confirmButtonText: 'Ok!'
          })
      }

   },
   async onActionHybrid_stackrm(action) {
            console.log(JSON.stringify(action))
        if(action.isConfirmed){
            if(this.isstatus == '1'){
                var log = await store.dispatch("pipelineLLO/hybrid_leave",{
                  token:this.token,
                  node:this.CONFIG.swarmlabid,
                  bootstrapstackid:this.hybridshowdata.bootstrapstackid,
                  bootstrapnameid:this.hybridshowdata.bootstrapnameid
                })
                Vue.nextTick( () => this.$refs.vuetable.refresh())
             }else{
             }
         }
   },
   onError (type,description) {
                    var winfo=description
                    var info='<h5>Bootstrap '+type+'</h5>'
                    this.$swal({
                      type: type,
                      html: info+winfo,
                      showCloseButton: true,
                      showLoaderOnConfirm: false,
                      allowOutsideClick: false,
                      cancelButtonText: 'No, cancel!',
                      showCancelButton: false,
                      showLoaderOnConfirm: false,
                      reverseButtons: true,
                      focusCancel: true,
                      confirmButtonText: 'Ok!'
                      })
    },


		setFilter () {
				this.moreParams = {
						'filter':  this.searchFor,
						'type':    this.selected
				}
        Vue.nextTick( () => this.$refs.vuetable.refresh())
		},
		resetFilter () {
				this.moreParams = {}
				this.searchFor = ''
        Vue.nextTick( () => this.$refs.vuetable.refresh())
		},
   onPaginationData (paginationData) {
      this.$refs.pagination.setPaginationData(paginationData)
			this.$refs.paginationInfo.setPaginationData(paginationData) 
    },
    onChangePage (page) {
      this.$refs.vuetable.changePage(page)
    },
    editRow(rowData) {
      alert("You clicked edit on"+ JSON.stringify(rowData));
		},
    async onAction (action, data, index) {
      this.actionrowindex = index
      //this.$root.$emit('hybrid_show_info',data)
      console.log('index '+this.actionrowindex)
			if(action == 'view-item' ){
			}else if(action == 'run-more' ){
        this.hybridshowdata = data
        console.log('hybrid '+JSON.stringify(data))
			}else if(action == 'delete-item' ){
				this.$swal({
					type: 'info',
					html: info+winfo,
					showCloseButton: true,
					showLoaderOnConfirm: false,
					allowOutsideClick: false,
					 cancelButtonText: 'No, cancel!',
					showCancelButton: true,
					showLoaderOnConfirm: false,
					reverseButtons: true,
					focusCancel: true,
					confirmButtonText: 'Yes, Delete it!'
					})
			}else if(action == 'run-item' ){
			}
    },
    refreshVuetable() {
			this.$nextTick(()=>{
					this.vuetablekey += 1
				})
      },
		playbookinfoShow(value) {
				return this.visibility[value]=true
		},
		playbookinfo(value) {
				return this.playbookInfo=value
		},
		rowClicked(row, event) {
			return {
				html: true,
				title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) },
				content: () => { return 'The date is:<br><em>' + new Date() + '</em>' }
			}
		},
		loadsuccess(response) {
				var data = response.data.data
				this.fielddata=data
				var n = data.length
				n=n-1
			},


  },


  actions: {


	}

};
</script>
<style>
.flex-fixed-width-item {
    flex: 0 0 100px;
		}
.modalinfo {
  z-index: 10000000 !important;
	position:fixed;
}
/* a container with flex-direction column */

.vue-notifyjs.notifications{
  .alert{
   z-index: 100;
  }
  .list-move {
    transition: transform 0.3s, opacity 0.4s;
  }
  .list-item {
    display: inline-block;
    margin-right: 10px;

  }
  .list-enter-active {
    transition: transform 0.2s ease-in, opacity 0.4s ease-in;
  }
  .list-leave-active {
    transition: transform 1s ease-out, opacity 0.4s ease-out;
  }

  .list-enter {
    opacity: 0;
    transform: scale(1.1);

  }
  .list-leave-to {
    opacity: 0;
    transform: scale(1.2, 0.7);
  }
}

pre {
  //background-color: rgb(255, 247, 229);
  background-color: #eff0f1;
	  border: 1px solid blue;
		  //white-space: pre-line;
			}

</style>
