GCLS_Page_Learn/src/views/main/components/TaskList.js

import { ref, computed, inject, onMounted } from 'vue';
import { GetMyTaskList } from '@/api/table';
import { GetMyTaskList_CSItemGroup, GetMyCourseList_TaskBelong } from '@/api/list';
import { GetMyBookBuyStatus_CurTaskCoursewareBook } from '@/api/user';
import { Message } from 'element-ui';
import { CreateEnterLiveRoomSession } from '@/api/live';
import { taskModeList } from '@/store/data';

import store from '@/store';

const colorMatching = [
  {
    main: '#3479FF',
    background: 'rgba(52, 121, 255, 0.05)',
    border: 'rgba(52, 121, 255, 0.15)'
  },
  {
    main: '#754BEE',
    background: 'rgba(117, 75, 238, 0.05)',
    border: 'rgba(117, 75, 238, 0.15)'
  },
  {
    main: '#FF7134',
    background: 'rgba(255, 52, 52, 0.05)',
    border: 'rgba(255, 52, 52, 0.15)'
  },
  {
    main: '#56BD05',
    background: 'rgba(86, 189, 5, 0.05)',
    border: 'rgba(86, 189, 5, 0.15)'
  },
  {
    main: '#00BD84',
    background: 'rgba(0, 189, 132, 0.05)',
    border: 'rgba(0, 189, 132, 0.15)'
  },
  {
    main: '#DF339A',
    background: 'rgba(223, 51, 154, 0.05)',
    border: 'rgba(223, 51, 154, 0.15)'
  },
  {
    main: '#CF7B18',
    background: 'rgba(207, 123, 24, 0.05)',
    border: 'rgba(207, 123, 24, 0.15)'
  }
];

export const buttonColorList = new Map([
  [0, '#63A1FF'],
  [1, '#f90'],
  [2, '#00CD8F']
]);

/**
 * 任务列表
 * @param {ref} calendar
 */
export function useTaskList(calendar) {
  let task_group_list = ref([]);
  const task_mode = store.state.app.config.task_mode;
  let course_id = ref('');
  let timeType = ref(-1);
  let time_unit = computed(() => calendar.value?.time_unit);
  let course_list = ref([]);

  function getMyTaskList() {
    const { curYear, curMonth, focusDate } = calendar.value;
    const data = {
      time_unit: time_unit.value,
      date_stamp: `${curYear}-${curMonth}-${focusDate}`,
      month_stamp: `${curYear}-${curMonth}`,
      time_type: timeType.value,
      course_id: course_id.value
    };
    (task_mode === taskModeList[0] ? GetMyTaskList : GetMyTaskList_CSItemGroup)(data).then(
      ({ task_group_list: list }) => {
        task_group_list.value = list;
      }
    );
  }

  function getMyCourseList_TaskBelong() {
    const { curYear, curMonth, focusDate } = calendar.value;
    GetMyCourseList_TaskBelong({
      time_unit: time_unit.value,
      date_stamp: `${curYear}-${curMonth}-${focusDate}`,
      month_stamp: `${curYear}-${curMonth}`
    }).then(({ course_list: list }) => {
      course_list.value = list;
    });
  }

  // 改变任务时间类型
  function changeTaskTime(time_type) {
    timeType.value = time_type;
    getMyTaskList();
  }

  function init() {
    course_id.value = '';
    getMyTaskList();
    getMyCourseList_TaskBelong();
  }

  onMounted(() => {
    init();
  });

  function changeCourse() {
    getMyTaskList();
  }

  return {
    task_group_list,
    task_mode,
    timeType,
    course_id,
    course_list,
    time_unit,
    changeTaskTime,
    changeCourse,
    init
  };
}

/**
 * 任务列表项相关
 */
export function useTaskItem() {
  let courseIdList = ref([]); // 课程 id 列表，用于颜色显示

  function getItemStyle(id) {
    if (!courseIdList.value.includes(id)) courseIdList.value.push(id);
    const i = courseIdList.value.indexOf(id) % 7;

    return {
      'background-color': colorMatching[i].background,
      color: colorMatching[i].main,
      border: `1px solid ${colorMatching[i].border}`
    };
  }

  function getItemIconStyle(id) {
    if (!courseIdList.value.includes(id)) courseIdList.value.push(id);
    const i = courseIdList.value.indexOf(id) % 7;

    return {
      color: colorMatching[i].main
    };
  }

  return { getItemStyle, getItemIconStyle };
}

/**
 * 任务链接
 */
export function useTaskLink(router) {
  const $t = inject('$t');

  function taskLink(type, task_id) {
    const userType = store.state.user.user_type;
    GetMyBookBuyStatus_CurTaskCoursewareBook({ task_id }).then(({ is_buy_all }) => {
      if (is_buy_all === 'false' && userType === 'STUDENT') {
        return Message.warning($t('Key635'));
      }

      if (type === 10) {
        CreateEnterLiveRoomSession({
          task_id
        }).then(
          ({
            live_room_sys_user_id,
            room_id,
            session_id,
            room_user_id,
            is_remind_quota_lave_online,
            quota_lave_online
          }) => {
            if (is_remind_quota_lave_online === 'true') {
              Message({
                type: 'warning',
                message: `直播配额还剩余${quota_lave_online}小时`,
                duration: 5000
              });
            }
            router.push({
              path: `/live/${userType === 'TEACHER' ? 'teacher' : 'student'}`,
              query: { live_room_sys_user_id, room_id, session_id, task_id, room_user_id }
            });
          }
        );
      } else {
        router.push(`/task_detail/${userType === 'STUDENT' ? 'student' : 'teacher'}/${task_id}`);
      }
    });
  }

  function taskLink_outside(task_id) {
    GetMyBookBuyStatus_CurTaskCoursewareBook({ task_id }).then(({ is_buy_all }) => {
      const userType = store.state.user.user_type;
      if (is_buy_all === 'false' && userType === 'STUDENT') {
        return Message.warning($t('Key635'));
      }
      router.push(`/task_detail/${userType === 'STUDENT' ? 'student' : 'teacher'}/${task_id}`);
    });
  }

  return {
    taskLink,
    taskLink_outside
  };
}

/**
 * 得到任务类型名称
 * @param {Number} type
 * @returns String
 */
export function getTimeTypeName(type) {
  if (type === 0) return 'Key292';
  if (type === 1) return 'Key293';
  if (type === 2) return 'Key294';
  return '';
}