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

const apiClient = useApiClient()

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

let dfxCryptoKeyDtoList = ref([])
const cryptoKeyDto = reactive({})

async function generateNewKey() {}

async function saveList() {}

onMounted(async () => {
  dfxCryptoKeyDtoList.value = await getCryptoKeyDtoList()
})
</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">
        <div class="d-flex flex-row-reverse">
          <button type="button" class="btn btn-primary btn-sm m-1" @click="saveList">Save</button>
          <button type="button" class="btn btn-success btn-sm m-1" @click="generateNewKey">Generate new Key</button>
        </div>
        <table class="table table-striped table-bordered align-middle">
          <thead>
            <tr>
              <th scope="col" class="text-center">선택</th>
              <th scope="col" class="text-center">Key</th>
              <th scope="col" class="text-center">Hash</th>
              <th scope="col" class="text-center">Algorithm</th>
              <th scope="col" class="text-center">Mode</th>
              <th scope="col" class="text-center">Target agent</th>
              <th scope="col" class="text-center">Applied at</th>
              <th scope="col" class="text-center">Data encryption</th>
            </tr>
          </thead>
          <tbody class="table-group-divider">
            <tr v-if="dfxCryptoKeyDtoList.length > 0" v-for="(cryptoKeyDto, index) in dfxCryptoKeyDtoList" :key="index">
              <td scope="row" class="text-center"><input type="checkbox" class="form-check-input" v-model="cryptoKeyDto.selected" /></td>
              <td class="text-center">{{ cryptoKeyDto.keyValue }}</td>
              <td class="text-center">{{ cryptoKeyDto.hashValue }}</td>
              <td class="text-center">{{ cryptoKeyDto.algorithmName }}</td>
              <td class="text-center">{{ cryptoKeyDto.modeName }}</td>
              <td class="text-center">{{ cryptoKeyDto.targetAgentHostId }}</td>
              <td class="text-center">{{ cryptoKeyDto.applyTs }}</td>
              <td class="text-center">{{ cryptoKeyDto.dataEncryptionYn }}</td>
            </tr>
            <tr v-else>
              <td scope="row" class="text-center" colspan="8">no datas.</td>
            </tr>
          </tbody>
        </table>
      </article>
    </div>
  </main>
</template>

<style></style>
