<template>
  <div class="task-card">
    <div class="task-card__header">
      <div class="task-card__title">{{ title }}</div>
      <div class="task-card__count">{{ count }}</div>
    </div>
    <ul class="task-card__list">
      <li v-for="(task, index) in tasks" :key="index" class="task-card__item">
        <div class="task-card__content">
          <div class="task-card__name">{{ task.name }}</div>
          <!-- <div class="task-card__desc">{{ task.desc }}</div> -->
        </div>
        <div
          class="task-card__status"
          :class="[
            {
              'status-pending': task.status === 'pending',
              'status-processing': task.status === 'processing',
              'status-completed': task.status === 'completed'
            }
          ]"
        >
          {{ task.total }}
        </div>
        <!-- <div
          class="task-card__status"
          :class="[
            {
              'status-pending': task.status === 'pending',
              'status-processing': task.status === 'processing',
              'status-completed': task.status === 'completed'
            }
          ]"
        >
          {{ statusText[task.status] }}
        </div> -->
      </li>
    </ul>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  title: String,
  count: Number,
  tasks: Array
})

const statusText = {
  pending: '待审批',
  processing: '进行中',
  completed: '已完成'
}
</script>

<style lang="less" scoped>
.task-card {
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 10px 20px;

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6e6e6;
  }

  &__title {
    font-size: 16px;
    font-weight: 500;
  }

  &__count {
    background-color: #409eff;
    color: white;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 12px;
  }

  &__list {
    list-style: none;
  }

  &__item {
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:last-child {
      border-bottom: none;
    }
  }

  &__content {
    flex: 1;
  }

  &__name {
    font-size: 14px;
    margin-bottom: 5px;
  }

  &__desc {
    font-size: 12px;
    color: #909399;
  }

  &__status {
    font-size: 16px;
    padding: 2px 8px;
    border-radius: 2px;
  }
}

.status {
  &-pending {
    background-color: #fdf6ec;
    color: #e6a23c;
  }

  &-processing {
    background-color: #ecf5ff;
    color: #409eff;
  }

  &-completed {
    background-color: #f0f9eb;
    color: #67c23a;
  }
}
</style>
