<template>
  <a-card :title="title" :bordered="false" :body-style="{ padding: '2px' }">
    <template #extra
      ><a @click="openUrl('/oa/task')" class="ele-text-placeholder"
        >更多<RightOutlined /></a
    ></template>
    <a-list :size="`small`" :split="false" :data-source="list">
      <template #renderItem="{ item }">
        <a-list-item>
          <div class="app-box">
            <div class="app-info">
              <a
                class="ele-text-secondary"
                @click="openNew('/oa/task/detail/' + item.taskId)"
              >
                <a-typography-paragraph
                  ellipsis
                  :content="`【${item.taskType}】${item.name}`"
                />
              </a>
            </div>
            <a class="ele-text-placeholder">
              <a-tag v-if="item.progress === TOBEARRANGED" color="red"
                >待安排</a-tag
              >
              <a-tag v-if="item.progress === PENDING" color="orange"
                >待处理</a-tag
              >
              <a-tag v-if="item.progress === PROCESSING" color="purple"
                >处理中</a-tag
              >
              <a-tag v-if="item.progress === TOBECONFIRMED" color="cyan"
                >待评价</a-tag
              >
              <a-tag v-if="item.progress === COMPLETED" color="green"
                >已完成</a-tag
              >
              <a-tag v-if="item.progress === CLOSED">已关闭</a-tag>
              <div class="ele-text-danger" v-if="item.overdueDays">
                已逾期{{ item.overdueDays }}天
              </div>
            </a>
          </div>
        </a-list-item>
      </template>
    </a-list>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { openUrl } from '@/utils/common';
  import { Task } from '@/api/oa/task/model';
  import { pageTask } from '@/api/oa/task';
  import { useUserStore } from '@/store/modules/user';
  import {
    CLOSED,
    COMPLETED,
    PENDING,
    PROCESSING,
    TOBEARRANGED,
    TOBECONFIRMED
  } from '@/api/oa/task/model/progress';
  import { RightOutlined } from '@ant-design/icons-vue';

  const props = defineProps<{
    title: string;
  }>();

  const list = ref<Task[]>([]);
  /**
   * 加载数据
   */
  const reload = () => {
    const { title } = props;
    const userStore = useUserStore();
    const where = {
      userId: undefined,
      commander: userStore.info?.userId,
      limit: 6,
      status: 0
    };
    // 加载列表
    pageTask(where).then((data) => {
      if (data?.list) {
        list.value = data.list;
      }
    });
  };
  reload();
</script>

<script lang="ts">
  export default {
    name: 'DashboardArticleList'
  };
</script>

<style lang="less" scoped>
  .app-box {
    display: flex;
    width: 100%;
    justify-content: space-between;
    overflow: hidden;
    .app-info {
      display: flex;
      margin-left: 5px;
      flex-direction: column;
      width: 400px;
    }
  }
</style>
