<!-- 项目进度 -->
<template>
  <a-card
    :title="title"
    :bordered="false"
    :body-style="{ padding: '14px', height: '358px' }"
  >
    <template #extra>
      <more-icon @remove="onRemove" @edit="onEdit" />
    </template>
    <a-table
      row-key="id"
      size="middle"
      :pagination="false"
      :data-source="projectList"
      :columns="projectColumns"
      :scroll="{ x: 600 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'projectName'">
          <a @click="openUrl('/project?id=' + record.projectId)">{{ record.projectName }}</a>
        </template>
        <template v-else-if="column.key === 'status'">
          <div v-for="(dict, index) in projectStatus" :key="index">
            <a-tag :color="dict.comments" v-if="dict.value === record.status">{{
              dict.label
            }}</a-tag>
          </div>
        </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 MoreIcon from './more-icon.vue';
  import type { ColumnsType } from 'ant-design-vue/es/table';
  import { pageProject } from '@/api/oa/project';
  import { message, SelectProps } from 'ant-design-vue';
  import { listDictionaryData } from '@/api/system/dictionary-data';
  import {getDictionaryOptions, openUrl} from '@/utils/common';
  import type { Project } from '@/api/oa/project/model';

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

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

  const projectColumns = ref<ColumnsType>([
    {
      key: 'index',
      align: 'center',
      width: 38,
      customRender: ({ index }) => index + 1,
      fixed: 'left'
    },
    {
      title: '项目名称',
      key: 'projectName',
      ellipsis: true,
      minWidth: 120
    },
    {
      title: '开始时间',
      dataIndex: 'createTime',
      align: 'center',
      minWidth: 100,
      ellipsis: true
    },
    {
      title: '结束时间',
      dataIndex: 'updateTime',
      align: 'center',
      minWidth: 100,
      ellipsis: true
    },
    {
      title: '状态',
      key: 'status',
      align: 'center',
      width: 90
    },
    {
      title: '进度',
      key: 'progress',
      align: 'center',
      width: 180
    }
  ]);

  // 项目进度数据
  const projectList = ref<Project[]>([]);
  /* 获取字典数据 */
  const projectStatus = getDictionaryOptions('projectStatus');

  /* 查询项目进度 */
  const queryProjectList = () => {
    pageProject({ limit: 5, status: '1' }).then((data) => {
      projectList.value = data.list;
    });
  };

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

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

  queryProjectList();
</script>
