<!-- 项目进度 -->
<template>
  <a-card
    title="全部待处理"
    :bordered="false"
    :body-style="{ padding: '14px', height: '315px' }"
  >
    <template #extra>
      <more-icon @remove="onRemove" @edit="onEdit" />
    </template>
    <a-table
      row-key="taskId"
      size="middle"
      :pagination="false"
      :customRow="customRow"
      :data-source="taskList"
      :columns="taskColumns"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'content'">
          <a @click="openUrl('/oa/task/detail/' + record.taskId)">{{
            record.content
          }}</a>
        </template>
        <template v-else-if="column.key === 'status'">
          <a-tag v-if="record.progress === TOBEARRANGED" color="red"
            >待安排</a-tag
          >
          <a-tag v-if="record.progress === PENDING" color="orange"
            >待处理</a-tag
          >
          <a-tag v-if="record.progress === PROCESSING" color="purple"
            >处理中</a-tag
          >
          <a-tag v-if="record.progress === TOBECONFIRMED" color="cyan"
            >待评价</a-tag
          >
          <a-tag v-if="record.progress === COMPLETED" color="green"
            >已完成</a-tag
          >
          <a-tag v-if="record.progress === CLOSED">已关闭</a-tag>
        </template>
        <template v-else-if="column.key === 'progress'">
          <a-progress :percent="record.progress * 2" :steps="5" />
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import type { ColumnsType } from 'ant-design-vue/es/table';
  import { pageTask } from '@/api/oa/task';
  import { openUrl } from '@/utils/common';
  import type { Task } from '@/api/oa/task/model';
  import {
    CLOSED,
    COMPLETED,
    PENDING,
    PROCESSING,
    TOBEARRANGED,
    TOBECONFIRMED
  } from '@/api/oa/task/model/progress';
  import { toDateString } from 'ele-admin-pro';

  defineProps<{
    title?: string;
  }>();

  const emit = defineEmits<{
    (e: 'remove'): void;
    (e: 'edit'): void;
  }>();

  const taskColumns = ref<ColumnsType>([
    {
      key: 'index',
      align: 'center',
      width: 48,
      customRender: ({ index }) => index + 1,
      fixed: 'left'
    },
    {
      title: '工单类型',
      dataIndex: 'taskType',
      width: 120
    },
    {
      title: '问题描述',
      dataIndex: 'content',
      key: 'content',
      ellipsis: true
    },
    {
      title: '问题描述',
      dataIndex: 'content',
      key: 'content',
      ellipsis: true
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      width: 120
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
      width: 120,
      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
    }
  ]);

  // 项目进度数据
  const taskList = ref<Task[]>([]);

  /* 查询项目进度 */
  const queryTaskList = () => {
    pageTask({ limit: 5, status: 0 }).then((data) => {
      if (data) {
        taskList.value = data.list;
      }
    });
  };

  const onRemove = () => {
    emit('remove');
  };

  const onEdit = () => {
    emit('edit');
  };

  queryTaskList();

  /* 自定义行属性 */
  const customRow = (record: Task) => {
    return {
      // 行点击事件
      onClick: () => {
        // console.log(record);
      },
      // 行双击事件
      onDblclick: () => {
        window.open('/oa/task/detail/' + record.taskId);
        // openInfo(record);
      }
    };
  };
</script>
