<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2023-01-19 14:59:34
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2023-03-09 18:32:57
 * @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="pathdetails">
    <ReturnHead
      text="路径详情"
      :showfile="true"
      :courseId="routerId"
      :gohome="true"
    ></ReturnHead>
    <!-- 学习路径介绍 -->
    <div class="pathdetail">
      <div class="pathName">{{ data?.name }}</div>
      <div class="pathIntro">
        {{ data?.remark ? data?.remark : "-" }}
      </div>
    </div>
    <!-- 学习路径介绍 -->
    <!-- 关卡列表 -->
    <div class="level">
      <div class="leveltitle">关卡列表</div>
      <div style="width: 100%; display: flex; justify-content: center">
        <div class="levelItem" :style="{ height: listheight }">
          <PathDetailImage
            :img="data?.picUrl"
            :routerId="routerId"
            :routerInfo="data"
          ></PathDetailImage>
        </div>
      </div>
    </div>
    <!-- 关卡列表 -->
  </div>
</template>

<script setup>
import { computed, reactive, toRefs, onUnmounted, ref, watch } from "vue";
import ReturnHead from "@/components/ReturnHead.vue";
import PathDetailImage from "@/components/PathDetailImage.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 router = useRouter();
const listheight = document.body.clientHeight - 310 + "px";
const {
  query: { routerId },
} = useRoute();
const { data } = useRequest(ROUTER_PROCESS, { routerId: routerId });
</script>

<style lang="scss">
.pathdetails {
  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: 100%;
      border-radius: 8px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      // padding-left: 5%;
      // padding-right: 3%;
      overflow-x: scroll;
      overflow-y: scroll;
    }
  }
}
</style>
