<script setup lang="ts">
import type { Task } from "../../../generated/models";

type TaskItem = Task;

const props = defineProps<{
  item: TaskItem;
}>();

const emit = defineEmits<{
  open: [path: string];
}>();
</script>

<template>
  <van-cell
    :title="
      props.item.text?.trim() ||
      props.item.result?.trim() ||
      `Задача #${props.item.id}`
    "
    center
    is-link
    :class="`task-row task-row-${/success|done|complete|green/i.test(props.item.get_status_class || 'status-default') ? 'success' : /warning|pending|wait|yellow|orange/i.test(props.item.get_status_class || 'status-default') ? 'warning' : /danger|error|red|fail/i.test(props.item.get_status_class || 'status-default') ? 'danger' : 'primary'}`"
    @click="emit('open', `/tasks/${props.item.id}`)"
  >
    <template #icon>
      <van-image
        class="task-avatar"
        round
        width="36"
        height="36"
        :src="
          'employee_from' in props.item
            ? ''
            : (props.item.author?.avatar_small ?? '')
        "
      />
    </template>
    <template #label>
      <div>
        Автор:
        {{ props.item.author?.short_name }}
      </div>

      <div>объект строительства: {{ props.item.project }}</div>
    </template>
    <template #right-icon>
      <van-tag
        plain
        :type="
          /success|done|complete|green/i.test(props.item.get_status_class)
            ? 'success'
            : /warning|pending|wait|yellow|orange/i.test(
                  props.item.get_status_class,
                )
              ? 'warning'
              : /danger|error|red|fail/i.test(props.item.get_status_class)
                ? 'danger'
                : 'primary'
        "
      >
        {{ props.item.deadline }}
      </van-tag>
    </template>
  </van-cell>
</template>

<style scoped>
.task-avatar {
  margin-right: 10px;
}

:deep(.van-cell.task-row-success) {
  background: #f0fdf4;
}

:deep(.van-cell.task-row-warning) {
  background: #fffbeb;
}

:deep(.van-cell.task-row-danger) {
  background: #fef2f2;
}

:deep(.van-cell.task-row-primary) {
  background: #eff6ff;
}

:deep(.van-cell.task-row-default) {
  background: #f8fafc;
}
</style>
