<template>
  <div class="card worklist_task_wrapper">
    <div class="p-4 border-bottom">
      <div class="row">
        <div class="col-9">
          <h5 class="font-size-15 mb-1">{{ getTaskTitle }}</h5>
          <div class="mb-0">
            <span :class="`badge ${getTaskStatusBadgeColor}`">{{
              task.task_status
            }}</span>
          </div>
          <p class="text-muted mb-0">
            Created : {{ task.timeFormattedString }}
          </p>
        </div>
        <div class="col-3">
          <ul class="list-inline user-chat-nav text-end mb-0">
            <li class="list-inline-item">
              <b-dropdown
                toggle-class="nav-btn"
                menu-class="dropdown-menu-end"
                right
                variant="white"
              >
                <template v-slot:button-content>
                  <i class="bx bx-dots-horizontal-rounded"></i>
                </template>
                <b-dropdown-item>Action</b-dropdown-item>
                <b-dropdown-item>Another action</b-dropdown-item>
                <b-dropdown-item>Something else</b-dropdown-item>
              </b-dropdown>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <slot></slot>
  </div>
</template>
<script>
import { getTaskName } from '../util';
import { BDropdown,BDropdownItem } from 'bootstrap-vue-next'

export default {
  props: {
    task: {
      required: true,
      type: Object,
    },
  },
  computed: {
    getTaskTitle() {
      return getTaskName(this.task.task_type);
    },
    getTaskStatusBadgeColor() {
      switch (this.task.task_status) {
        case 'OPEN':
          return 'bg-info';
        case 'COMPLETED':
          return 'bg-success';
        case 'OVERDUE':
          return 'bg-danger';
      }
      return 'bg-info';
    },
  },
  components: {   
    BDropdown,BDropdownItem
  },
};
</script>