GCLS_Page_Learn/src/views/main/components/OldTaskList.vue

<template>
  <div>
    <ul v-for="({ task_list, date_stamp }, i) in taskGroupList" :key="i" class="task-list">
      <li v-if="timeUnit === 'MONTH'" class="date-stamp">
        {{ date_stamp }}
      </li>
      <li
        v-for="{
          id,
          cs_item_name,
          time_type,
          course_id: cid,
          course_name,
          teaching_type,
          time_space_view_txt,
          name
        } in task_list"
        :key="id"
        class="task-item"
        :style="getItemStyle(cid)"
        @click="taskLink_outside(id)"
      >
        <div class="task-item-top">
          <svg-icon icon-class="arrival" :style="getItemIconStyle(cid)" />
          <span class="cs-item-name">
            {{ cs_item_name }} - {{ name }}
            <span v-if="teaching_type === 10" class="enter-live" @click.stop="taskLink(teaching_type, id)">
              {{ $t('Key616') }} >
            </span>
          </span>
          <span
            class="task-button"
            :style="{ 'background-color': buttonColorList.get(time_type) }"
            @click.stop="taskLink(teaching_type, id)"
          >
            {{ $t(getTimeTypeName(time_type)) }}{{ $t('Key289') }}
          </span>
        </div>
        <div class="task-item-bottom">
          <div>
            {{ course_name }}
          </div>
          <div class="time-txt">
            {{ time_space_view_txt }}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { inject } from 'vue';
import { useTaskItem, useTaskLink, buttonColorList, getTimeTypeName } from './TaskList';
import { useRouter } from 'vue-router/composables';

defineProps({
  timeUnit: {
    type: undefined,
    required: true
  },
  taskGroupList: {
    type: Array,
    required: true
  }
});

const $t = inject('$t');
let { getItemStyle, getItemIconStyle } = useTaskItem();

const router = useRouter();
let { taskLink, taskLink_outside } = useTaskLink(router);
</script>

<style lang="scss" scoped>
.task-list {
  li.date-stamp {
    margin-top: 16px;
    margin-bottom: -8px;
    font-weight: 700;
  }

  .task-item {
    padding: 16px 24px;
    margin-top: 16px;
    cursor: pointer;
    border-radius: 8px;

    &-top {
      display: flex;
      margin-bottom: 8px;

      .cs-item-name {
        flex: 1;
        margin-left: 10px;

        .enter-live {
          margin-left: 12px;
          color: #808080;
        }
      }

      .task-button {
        padding: 4px 8px;
        color: #fff;
        border-radius: 8px;
      }
    }

    &-bottom {
      font-size: 14px;
      color: #808080;

      .time-txt {
        margin-top: 8px;
        color: #000;
      }
    }
  }
}
</style>