<template>
  <div class="project-gantt">
    <workLoad
      dimension="project"
      :filterData="{
        projectIdList: filterData.projectIdList ? filterData.projectIdList.split(',') : [],
      }"
      :showTotal="true"
      :configColumns="columns"
      :api="queryProjectUserLoadsApi"
      :fieldMapFun="fieldMapFun"
    >
      <template #filter-form>
        <el-form-item label="项目">
          <ProjectSelect
            class="select-width margin-right-12"
            v-model="filterData.projectIdList"
            multiple
          />
        </el-form-item>
      </template>
    </workLoad>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import workLoad from '@/views/task/workLoad/index.vue';
import ProjectSelect from '@/components/common/projectSelect/index.vue';
import { queryProjectUserLoadsApi } from '@/api/project/task';

// 筛选条件：项目
const filterData = reactive<{
  projectIdList: string;
}>({
  projectIdList: '',
});
// 项目配置
const columns = [
  {
    label: '项目',
    width: 180,
    template: function (task: any) {
      return `<div class="gantt-cell-ellipsis" title="${formatProjectName(task)}">${formatProjectName(task)}</div>`;
    },
  },
  {
    label: '人员数量',
    align: 'center',
    onrender: (task: any) => {
      return `${task.workNum}`;
    },
  },
  {
    label: '任务数量',
    align: 'center',
    onrender: (task: any) => {
      return `${task.taskNum}`;
    },
  },
];
const formatProjectName = (data: any) => {
  if (data.relateProjectName) {
    return data.userName + '（参考项目：' + data.relateProjectName + '）';
  } else {
    return data.userName;
  }
};

// 字段映射
const fieldMapFun = (data: any) => {
  const list = data.map((item: any) => {
    return {
      userName: item.projectName, // 显示项目名称--姓名
      userId: item.projectName, // 项目ID
      taskNum: item.taskNum, // 任务数量
      workNum: item.userNum, // 人员数量
      relateProjectName: item.relateProjectName, // 参考项目名称
      taskList: item.taskList || [], // 任务列表
    };
  });
  return list;
};
</script>

<style lang="scss" scoped>
.project-gantt {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .select-width {
    width: 200px;
  }
  .mw200 {
    width: 200px;
  }
}
</style>
