<template>
  <q-card flat bordered>
    <q-card-section class="bg-secondary text-white px-2 py-1">
      <div class="text-h6">{{ $t('home.card.doneTask.title') }}</div>
    </q-card-section>
    <q-card-section class="p-0">
      <q-markup-table flat dense style="height: 150px; overflow-y: auto">
        <tbody>
          <tr v-for="item in unCompletedTasksRef" :key="item.id" @click="handleTask(item)">
            <td width="100%">{{ item.businessDescription }}</td>
            <td width="100px">{{ item.previousAssignee }}, {{ item.createTimeAndNowDiff }}{{ $t(item.createTimeAndNowDiffUnit) }}{{ $t('before') }}</td>
          </tr>
        </tbody>
      </q-markup-table>
    </q-card-section>
  </q-card>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { axios, Environment, SessionManager, I18nMessageManager, AuthenticationManager, Tools } from '@/platform';

const unCompletedTasksRef = ref([]);
const unCompletedTasksTotalCountRef = ref();

const findUnCompletedTasks = () => {
  axios.get(Environment.apiContextPath('/api/flowable/process/query/task')).then((response) => {
    unCompletedTasksRef.value = response.data.content || [];
    unCompletedTasksTotalCountRef.value = response.data.totalElements;
  });
};

findUnCompletedTasks();
</script>
