<template>
  <div>
  <div class="columns is-multiline mx-0" v-if="data">
    <div class="column is-12" v-for="v in data">
    <div>
      <div class="field is-grouped is-grouped-multiline">
        <div class="control">
          <span class="icon-text has-text-warning">
          <span class="fsb-20">{{ v.name }}</span>
          </span>
        </div>
        <div class="control">
          <a class="ml-4" @click="refresh(v)">
            <SvgIcon v-bind="{name: 'refresh.svg', type: 'findata', size: 17}"></SvgIcon>
          </a>
        </div>
      </div>
  </div>
    <DockerContainer class="mt-2" :ref="`c${v.id}`" v-bind="{ssh: v.id, vpagename: v.vpagename}" />
    </div>
  </div>
  <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
</div>
</template>
<script>
import DockerContainer from "@/components/server/DockerContainer"
export default {
  components: {DockerContainer}, 
  data() {
    return {
      data: undefined,
      showmodal: undefined
    }
  },
  async created() {
    let found = this.$findapi('ssh')
    let rs = await this.$getapi([found])
    this.data = this.$copy(rs[0].data.rows)
    this.data.map((v,i)=>{
      v.vpagename = `pagedata7.7.${i+1}`
    })
  },
  methods: {
    refresh(v) {
      this.$refs[`c${v.id}`][0].getApi()
    },
    terminal(row) {
      this.showmodal = {component: 'docker/CheckStatus', title: 'Open SSH', vbind: { row: row}, height: '200px', width: '500px'}
    },
    command(row) {
      this.showmodal = {component: 'server/ExecuteCmd', title: 'Chạy câu lệnh', width: '50%', height: '600px', vbind: {sshid: row.id, path: '/home/stackops/'}}
    },
    ssh(v) {
      let cmd = `sshpass -p "${v.password}" ssh -p ${v.port} ${v.username}@${v.host}`
      this.$copyToClipboard(cmd)
    }
  }
}
</script>