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

const apiClient = useApiClient()

const dfxAgentMessageDtoList = ref([])
const messageData = ref({})
const messageDataView = ref(null)
const messageDataViewId = 'messageDataListModal'
const searchParameterDto = ref(new SearchParameterDto())

async function retrieveDataList(pageIndex) {
  const totalCountResponse = await apiClient.post('/app-api/agent/getAgentMessageDtoListTotalCount', searchParameterDto.value)
  const totalCount = totalCountResponse.data
  searchParameterDto.value.calculatePageList(pageIndex, searchParameterDto.value.itemCountPerPage, totalCount)
  const response = await apiClient.post('/app-api/agent/getAgentMessageDtoList', searchParameterDto.value)
  dfxAgentMessageDtoList.value = response.data
}

function openDataView(dfxAgentMessageDto) {
  messageData.value = dfxAgentMessageDto
  nextTick(() => {
    messageDataView.value.open()
  })
}

onMounted(async () => {
  await retrieveDataList(1)
})
</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="row">
          <div class="col-1">
            <label for="search-process-status" class="form-label">Status</label>
          </div>
          <div class="col-9">
            <select class="form-select form-select-sm" name="search-process-status" aria-label="Status">
              <option value="">전체</option>
              <option value="PROCESS_RECEIVE">수신</option>
              <option value="PROCESS_DONE">완료</option>
              <option value="PROCESS_FAIL">오류</option>
            </select>
          </div>
          <div class="col-2">
            <button class="btn btn-sm btn-success">조회</button>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <table class="table table-striped table-bordered align-middle fs-7">
              <thead>
                <tr>
                  <th scope="col" class="text-center">Message UUID</th>
                  <th scope="col" class="text-center">Sender (Postman)</th>
                  <th scope="col" class="text-center">Recipient (Dropbox)</th>
                  <th scope="col" class="text-center">Send</th>
                  <th scope="col" class="text-center">Receive</th>
                  <th scope="col" class="text-center">Status</th>
                  <th scope="col" class="text-center">Data count</th>
                  <th scope="col" class="text-center">Data</th>
                </tr>
              </thead>
              <tbody class="table-group-divider">
                <tr v-if="dfxAgentMessageDtoList.length > 0" v-for="dfxAgentMessageDto in dfxAgentMessageDtoList" :key="`${dfxAgentMessageDto.senderAgentId}-${dfxAgentMessageDto.messageUuid}`">
                  <td scope="row" class="text-start">{{ dfxAgentMessageDto.messageUuid }}</td>
                  <td class="text-center">{{ dfxAgentMessageDto.senderAgentId }}({{ dfxAgentMessageDto.senderPostmanId }})</td>
                  <td class="text-center">{{ dfxAgentMessageDto.recipientAgentId }}({{ dfxAgentMessageDto.recipientDropboxId }})</td>
                  <td class="text-center">{{ dfxAgentMessageDto.senderTimeString }}</td>
                  <td class="text-center">{{ dfxAgentMessageDto.recipientTimeString }}</td>
                  <td class="text-center">{{ dfxAgentMessageDto.processStatusCode }}</td>
                  <td class="text-end">{{ dfxAgentMessageDto.messageDataCount }}</td>
                  <td class="text-center"><button type="button" class="btn btn-primary btn-sm" @click.prevent="openDataView(dfxAgentMessageDto)">Data View</button></td>
                </tr>
                <tr v-else>
                  <td scope="row" class="text-center" colspan="8">no datas.</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <pagination :list-function="retrieveDataList" :search-parameter-dto="searchParameterDto" />
      </article>
    </div>
  </main>
  <message-data-view :modal-id="messageDataViewId" :dto="messageData" ref="messageDataView"></message-data-view>
</template>

<style>
.fs-7 {
  font-size: 0.75rem !important;
} /* 예: 12px */
.fs-8 {
  font-size: 0.625rem !important;
} /* 예: 10px */
</style>
