<script setup>
import '@/assets/main.css'
import { useApiClient } from '@/components/apiClient'
import { onMounted, ref, reactive } from 'vue'
import AgentConfigView from '@/components/AgentConfigView.vue'

const apiClient = useApiClient()

async function getAgentInfoDtoList() {
  const response = await apiClient.post('/app-api/agent/getAgentInfoDtoList')
  return response.data
}

let dfxAgentInfoDtoList = ref([])
const agentConfigDto = reactive({})
const agentConfigViewModal = ref(null)

function openAgentConfigView(dfxAgentInfoDto) {
  const dto = JSON.parse(dfxAgentInfoDto.settingsData)
  Object.assign(agentConfigDto, dto)
  agentConfigViewModal.value.open()
}

onMounted(async () => {
  dfxAgentInfoDtoList.value = await getAgentInfoDtoList()
})
</script>

<template>
  <main class="dfx-main container w-100">
    <div class="row">
      <div class="col-12 pt-2 border-bottom">
        <h3 class="h3">에이전트 관리</h3>
      </div>
    </div>
    <div class="row">
      <article class="col-12 pt-3">
        <table class="table table-striped table-bordered align-middle">
          <thead>
            <tr>
              <th scope="col" class="text-center">Agent ID</th>
              <th scope="col" class="text-center">Host</th>
              <th scope="col" class="text-center">port</th>
              <th scope="col" class="text-center">Postman Count</th>
              <th scope="col" class="text-center">Dropbox Count</th>
              <th scope="col" class="text-center">Status</th>
              <th scope="col" class="text-center">Setting</th>
            </tr>
          </thead>
          <tbody class="table-group-divider">
            <tr v-if="dfxAgentInfoDtoList.length > 0" v-for="dfxAgentInfoDto in dfxAgentInfoDtoList" :key="`${dfxAgentInfoDto.agentId}-${dfxAgentInfoDto.hostName}`">
              <td scope="row">{{ dfxAgentInfoDto.agentId }}</td>
              <td>{{ dfxAgentInfoDto.hostName }}</td>
              <td>{{ dfxAgentInfoDto.listenPort }}</td>
              <td class="text-end">{{ dfxAgentInfoDto.postmanCount }}</td>
              <td class="text-end">{{ dfxAgentInfoDto.dropboxCount }}</td>
              <td class="text-center"><i class="bi bi-lightbulb-fill" :class="dfxAgentInfoDto.statusCode == 'STATUS_OK' ? 'text-success' : 'text-secondary'"></i></td>
              <td class="text-center"><button type="button" class="btn btn-primary btn-sm" @click.prevent="openAgentConfigView(dfxAgentInfoDto)">설정</button></td>
            </tr>
            <tr v-else>
              <td scope="row" class="text-center" colspan="7">no datas.</td>
            </tr>
          </tbody>
        </table>
      </article>
    </div>
  </main>
  <agent-config-view modal-id="agentConfigModalView" :dto="agentConfigDto" ref="agentConfigViewModal"></agent-config-view>
</template>

<style></style>
