<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2023-01-19 14:59:34
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2023-01-31 17:17:37
 * @FilePath: /stu_h5/src/views/pathmap/LevelList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="levelList">
    <ReturnHead
      text="展开路径图"
      :showfile="true"
      :courseId="routerId"
    ></ReturnHead>
    <!-- 学习路径介绍 -->
    <div class="pathdetail">
      <div class="pathName">产品经理学习路径图</div>
      <div class="pathIntro">
        为了提升集团各条线产品经理的专业能力，集团XX组织为产
        品经理设置了统一的学习径为了提升集团各条线产品经理的
        专业能力，集团XX组织为产品经理设置了统一的学习径为了
        提升集团各条线产品经理的专业
      </div>
    </div>
    <!-- 学习路径介绍 -->
    <!-- 关卡列表 -->
    <div class="level">
      <div class="leveltitle">关卡列表</div>
      <div style="width: 100%; display: flex; justify-content: center">
        <div class="levelItem">
          <div class="levelName">
            初级产品经理 - 初级产品经理 - 初级产 品经理-初级啊产品经理 - 初级产
            - 初级产品经理 - 初级产 品经理-初级啊产品经理 - 初级产 -
            初级产品经理 - 初级产 品经理-初级啊产品经理 - 初级产
          </div>

          <div class="levelStatus">
            <img
              style="width: 10px; height: 10px; margin-right: 5px"
              src="../../assets/image/circle.png"
            />
            <div>已完成</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 关卡列表 -->
  </div>
</template>

<script setup>
import { computed, reactive, toRefs, onUnmounted, ref } from "vue";
import ReturnHead from "@/components/ReturnHead.vue";
import { useRequest, request, usePage } from "@/api/request";
import {
  ROUTER_PROCESS,
  STUDY_RECORD,
  ROUTER_DETAILS,
  TASK_LIST,
} from "@/api/api";
import { useRoute, useRouter } from "vue-router";
const {
  query: { routerId, routerName },
} = useRoute();
const { data } = useRequest(TASK_LIST, { routerId: routerId });
console.log("获取路径图", data);
</script>

<style lang="scss">
.levelList {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .pathdetail {
    width: 90%;
    min-height: 173px;
    background-color: #fff;
    margin-top: 10px;
    padding-left: 5%;
    padding-right: 5%;
    .pathName {
      font-size: 14px;
      font-weight: 600;
      color: #04243c;
      line-height: 21px;
      margin-top: 30px;
      margin-bottom: 19px;
    }
    .pathIntro {
      font-size: 13px;
      font-weight: 400;
      color: #333330;
      line-height: 24px;
    }
  }
  .level {
    width: 100%;
    min-height: 173px;
    background-color: #fff;
    margin-top: 10px;
    .leveltitle {
      width: 95%;
      height: 50px;
      border-bottom: 1px solid #f1f2f3;
      display: flex;
      align-items: center;
      padding-left: 5%;
      margin-bottom: 8px;
    }
    .levelItem {
      width: 82%;
      height: 61px;
      background-color: #f2f5f7;
      border-radius: 8px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      padding-left: 5%;
      padding-right: 3%;
      .levelName {
        flex: 1;
        font-size: 14px;
        font-weight: 500;
        color: #333330;
        line-height: 24px;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .levelStatus {
        width: 52px;
        display: flex;
        align-items: center;
        font-size: 11px;
        font-weight: 500;
        color: #22c4a0;
        line-height: 24px;
        margin-left: 10px;
      }
    }
  }
}
</style>
