TALL-MUI-4/hooks/project/useGetTasks.js

import { computed, nextTick, watch } from 'vue';
import { useStore } from 'vuex';
import { flatten } from 'lodash';
import dayjs from 'dayjs';

export default function useGetTasks() {
  const store = useStore();
  const tasks = computed(() => store.state.task.tasks);
  const timeLineType = computed(() => store.state.task.timeLineType); // 时间轴模式
  const realTasks = computed(() => store.state.task.realTasks); // 真实任务
  const downNextPage = computed(() => store.state.task.downNextPage); // 下一页
  const upNextPage = computed(() => store.state.task.upNextPage); // 下一页
  const currUpTimeNode = computed(() => store.state.task.currUpTimeNode); // 当前查询的时间
  const currDownTimeNode = computed(() => store.state.task.currDownTimeNode); // 当前查询的时间
  const roleId = computed(() => store.state.role.roleId);
  const timeNode = computed(() => store.state.task.timeNode);
  const timeUnit = computed(() => store.state.task.timeUnit);
  const visibleRoles = computed(() => store.state.role.visibleRoles);
  const allTasks = computed(() => store.state.task.allTasks);
  const roleIndex = computed(() => store.state.role.roleIndex);

  const projectId = computed(() => store.getters['project/projectId']);
  const timeGranularity = computed(() => store.getters['task/timeGranularity']);

  const remindData = computed(() => store.state.socket.remindData); // 小红点

  const currRoleRealTasks = computed(() => store.state.task.currRoleRealTasks); // 当前角色的真实任务数据
  const currRoleShowTasks = computed(() => store.state.task.currRoleShowTasks); // 当前角色的展示任务数据
  const currLocationTaskId = computed(() => store.state.socket.currLocationTaskId);

  // 初始化 定期任务
  async function initPlanTasks() {
    // if (timeLineType.value === 1) setNextPlaceholderTasks({});
    uni.$ui.showLoading();
    console.log('查询定期任务11111111111111111');
    await getTasks({}); // 获取初始数据
    // await dataRender({});
  }

  /**
   * 生成getTasks所用的参数
   * @param {object} query getTasks传递的参数
   */
  function generateGetTaskParam(query) {
    return {
      roleId: roleId.value,
      timeNode: query.timeNode || timeNode.value,
      timeUnit: query.timeUnit || timeUnit.value,
      queryType: query.queryType === 0 ? 0 : 1,
      pageNum: query.pageNum || 1,
      pageSize: query.pageSize || uni.$taskConfig.pageCount,
      taskId: query.taskId || currLocationTaskId.value
    };
  }

  /**
   * 根据时间基准点和角色查找定期任务
   * @param {object} query
   * @param {string} query.roleId 角色id
   * @param {string} query.timeNode 时间基准点 默认当前
   * @param {string} query.timeUnit 时间颗粒度 默认天
   * @param {string} query.queryNum 查找颗粒度数量 默认3个
   * @param {number} query.queryType 0向上查找 1向下查找(默认) 下查包含自己，上查不包含
   */
  function getTasks(query) {
    uni.$ui.showLoading();
    store.commit('task/setShowSkeleton', false);

    const params = generateGetTaskParam(query);
    console.log('查询定期任务api', params);
    uni.$catchReq.getTaskByNum(params, (err, data) => {
      store.commit('task/setShowSkeleton', false);
      if (err) {
        // TODO: 提示错误
        console.error('err: ', err);
      } else {
        store.commit('task/setShowScrollTo', true);

        params.queryType === 0 ? store.commit('task/setUpRealTasks', data.list) : store.commit('task/setDownRealTasks', data.list);

        console.log('查询到的真实任务', data.list);
        const index = visibleRoles.value.findIndex(role => role.id === roleId.value);
        console.log('api当前角色id', roleId.value, index);
        const arr = [...allTasks.value];
        arr[index].realTasks = [...realTasks.value];
        arr[index].upNextPage = params.queryType === 0 ? data.nextPage : 1;
        arr[index].downNextPage = params.queryType === 1 ? data.nextPage : 1;
        store.commit('task/setAllTasks', arr);
        console.log('设置当前真实任务', arr[index].realTasks);
        store.commit('task/setCurrRoleRealTasks', arr[index].realTasks); // 设置当前角色的真实任务数据
        params.queryType === 0 ? store.commit('task/setUpNextPage', arr[index].upNextPage) : store.commit('task/setDownNextPage', arr[index].downNextPage); // 下一页

        // 如果第一次渲染但没有空数据则加载空数据
        // if (!currRoleShowTasks.value || !currRoleShowTasks.value.length && timeLineType.value === 1) {
        //   setNextPlaceholderTasks(params);
        // }

        // 数据处理
        dataRender(params);

        // nextTick(() => {
        //   uni.$ui.hideLoading();
        //   console.log('-------------------------------')
        // });
      }
    });
  }

  function dataRender(params) {
    timeLineType.value === 1 ? renderScaleTask(params) : renderConTask(params);
  }

  // 刻度模式数据处理
  async function renderScaleTask(query) {
    const params = generateGetTaskParam(query);
    console.log('当前角色id', roleId.value);
    console.log('当前角色的真实任务', currRoleRealTasks.value);
    let centerData = await showTaskTime(params, currRoleShowTasks.value, currRoleRealTasks.value) || [];
    console.log('需要显示的真实任务', centerData);
    await handleTasksData(params, centerData, currRoleRealTasks.value);
  }

  // 已显示的任务第一个时间和最后一个时间
  async function showTaskTime(params, showTasks, realTasks) {
    /**
     * 1、判断显示任务中是否有真实任务
     *    1-1、有。根据id查找任务
     *    1-2、无。根据时间查找任务
     * 2、查找15个任务
     */

    // 初始值
    // 显示任务中没有真实任务数据
    let centerData = [];
    if (realTasks.length > params.pageSize && params.queryType === 0) {
      centerData = realTasks.slice(realTasks.length - params.pageSize);
    } else {
      centerData = realTasks.slice(0, params.pageSize);
    }

    const firstDetailIndex = showTasks.findIndex(task => task.detailId);
    if (firstDetailIndex > -1) {
      // 显示任务中有真实任务数据
      const firstId = showTasks[firstDetailIndex].id;
      let lastDetailIndex = -1;
      showTasks.forEach((item, index) => {
        if (item.detailId) {
          lastDetailIndex = index;
        }
      })
      const lastId = showTasks[lastDetailIndex].id;

      realTasks.forEach((item, index) => {
        if (params.queryType === 1 && item.id === lastId) {
          centerData = realTasks.slice(index + 1, index + 1 + params.pageSize);
        } else if (params.queryType === 0 && item.id === firstId) {
          centerData = index >= params.pageSize ? realTasks.slice(index - params.pageSize, index) : realTasks.slice(0, index);
        }
      })
    }

    return centerData;
  }

  async function handleTasksData(params, centerData, realTasks) {
    let showTasks = currRoleShowTasks.value; // 显示的数据
    let firstTime = showTasks.length > 0 ? dayjs(+showTasks[0].planStart).subtract(1, timeGranularity.value) : new Date().getTime(); // 显示的数据第一个数据的时间
    let lastTime = showTasks.length > 0 ? dayjs(+showTasks[showTasks.length - 1].planStart).add(1, timeGranularity.value) : new Date().getTime(); // 显示的数据最后一个数据的时间
    let upTargetTime = dayjs(+firstTime).subtract(params.pageSize - 1, timeGranularity.value);
    let downTargetTime = dayjs(+lastTime).add(params.pageSize - 1, timeGranularity.value);
    const nextPage = params.queryType === 0 ? upNextPage.value : downNextPage.value; // 下一页的值

    if (centerData.length) {
      let arr = [];

      centerData.forEach(v => {
        let centerTime = '', // 中间数据+/-15后的数据
            isExceed = false; // 时间跨度是否大于15

        if (params.queryType) {
          isExceed = dayjs(+downTargetTime).isAfter(+v.planStart, timeGranularity.value)
        } else {
          isExceed = dayjs(+upTargetTime).isBefore(+v.planStart, timeGranularity.value)
        }

        if (isExceed) {
          arr.push(v);
        }
      })

      if (!arr.length) {
        params.queryType === 0 ? setPrevPlaceholderTasks(params) : setNextPlaceholderTasks(params);
      } else {
        if (arr.length === centerData.length && centerData.length < params.pageSize && nextPage > 0) {
          getTasks({pageNum: nextPage, queryType: params.queryType});
        } else {
          if (arr.length < centerData.length || (arr.length === centerData.length && centerData.length < params.pageSize && nextPage === 0)) {
            let newArr = [];
            const time = params.queryType === 1 ? lastTime : upTargetTime;
            let currTime = params.queryType === 0 ? upTargetTime : lastTime;


            const firstTime = params.queryType === 0 ? dayjs(+upTargetTime).add(1, timeGranularity.value) : dayjs(+lastTime).subtract(1, timeGranularity.value);
            let firstArr = arr.filter(item => dayjs(+item.planStart).isSame(+firstTime, timeGranularity.value));
            if (firstArr.length) {
              newArr = params.queryType === 0 ? [...firstArr, ...newArr] : [...newArr, ...firstArr];
            }

            for (let i = 0; i < params.pageSize; i++) {
              let termArr = arr.filter(item => dayjs(+item.planStart).isSame(+currTime, timeGranularity.value));

              if (termArr.length === 0) {
                const newTasks = uni.$task.setPlaceholderTasks(+currTime, false, timeGranularity.value, 1);
                newArr = [...newArr, ...newTasks];
              } else {
                newArr = [...newArr, ...termArr];
              }
              currTime = dayjs(+currTime).add(1, timeGranularity.value);
            }

            showTasks = params.queryType === 0 ? [...newArr, ...showTasks] : [...showTasks, ...newArr];
          } else {
            showTasks = params.queryType === 0 ? [...arr, ...showTasks] : [...showTasks, ...arr];
          }
        }

        showTasks = flatten(showTasks); // 1维拍平

        store.commit('task/clearTasks');
        params.queryType === 0 ? store.commit('task/setUpTasks', showTasks) : store.commit('task/setDownTasks', showTasks);
      }
    } else {
      if (nextPage > 0) {
        console.log('数据为空')
        getTasks({pageNum: nextPage, queryType: params.queryType});
      } else {
        params.queryType === 0 ? setPrevPlaceholderTasks(params) : setNextPlaceholderTasks(params);
      }
    }

    uni.$ui.hideLoading();
    console.log('------------')
    // if (showTasks.length > 30) {
    //   showTasks = params.queryType === 0 ? showTasks.slice(0, 80) : showTasks.slice(showTasks.length - 80);
    // }
  }

  // 任务模式
  async function renderConTask(params) {
    let nextPage = params.queryType === 0 ? upNextPage.value : downNextPage.value; // 下一页的值
    let showTasks = currRoleShowTasks.value;
    let centerData = await showTaskTime(params, showTasks, currRoleRealTasks.value) || [];

    if (centerData.length < 15 && nextPage > 0) {
      getTasks({pageNum: nextPage, queryType: params.queryType});
    } else {
      if (params.queryType === 0) {
        showTasks = [...centerData, ...showTasks];
      } else {
        showTasks = [...showTasks, ...centerData];
      }
    }

    if (showTasks.length < 15 && nextPage === 0 && params.queryType === 1) {
      getTasks({pageNum: 1, queryType: 0});
    }

    // if (showTasks.length > 80) {
    //   showTasks = params.queryType === 0 ? showTasks.slice(0, 80) : showTasks.slice(showTasks.length - 80);
    // }

    store.commit('task/clearTasks');
    params.queryType === 0 ? store.commit('task/setUpTasks', showTasks) : store.commit('task/setDownTasks', showTasks);
  }

  // 设置时间轴向上的空数据
  function setPrevPlaceholderTasks() {
    store.commit('task/setTopEnd', true);
    let startTime = '';
    if (!currRoleShowTasks.value || !currRoleShowTasks.value.length) {
      startTime = Date.now(); // 没有任务就应该是时间基准点
    } else {
      startTime = currRoleShowTasks.value[0].planStart - 0; // 有任务就是第一个任务的计划开始时间
    }
    const placeholderTasks = uni.$task.setPlaceholderTasks(startTime, true, timeGranularity.value);
    store.commit('task/setCurrUpTimeNode', startTime);
    store.commit('task/setUpTasks', placeholderTasks);
  }

  // 设置时间轴向下的空数据
  function setNextPlaceholderTasks(params) {
    // store.commit('task/setBottomEnd', true);
    let startTime = '';
    if (!currRoleShowTasks.value || !currRoleShowTasks.value.length) {
      startTime = Date.now();
    } else {
      startTime = dayjs(+currRoleShowTasks.value[currRoleShowTasks.value.length - 1].planStart).add(1, timeGranularity.value).valueOf();
    }

    // if (params.taskId) {
    //   currRoleRealTasks.value.forEach(item => {
    //     if (item.id === params.taskId) {
    //       startTime = Number(item.planStart);
    //     }
    //   })
    // }

    const initData = uni.$task.setPlaceholderTasks(startTime, false, timeGranularity.value);
    store.commit('task/setCurrDownTimeNode', startTime);
    store.commit('task/setDownTasks', initData);
  }

  /**
   * 当日常任务发生变化时
   * 将新获取到的日常任务放在allTasks里
   */
  watch(tasks, () => {
    // 添加到allTasks里
    const index = visibleRoles.value.findIndex(role => role.id === roleId.value);
    const arr = [...allTasks.value];
    arr[index].task = [...tasks.value];
    store.commit('task/setAllTasks', arr);
    store.commit('task/setCurrRoleShowTasks', arr[index].task); // 设置当前角色的展示任务数据
  });

  return {
    initPlanTasks,
    getTasks,
    dataRender
  }
}