<template>
  <div class="LearnNote container-height">
    <Breadcrumb />
    <div class="flex-between">
      <div class="detail_right">
        <div class="padding16 bg_color_fff border_radius_10">
          <div class="gap10">
            <div class="line_vertical"></div>
            <div class="font_size20 bold">课程笔记列表</div>
          </div>
          <div class="flex-between mt10 course_List" 
          :class="{'active': item === 1}"
          v-for="item in 5" :key="item">
            <img src="" alt="" style="width: 160px; height: 90px;" class="border_radius_8 bg_color_f5">
            <div class="flex_1 ml20">
              <div class="font_size18 bold">课程笔记标题</div>
              <div class="font_size14 line2 gray mt10">- 本文介绍两款开源的密码破解工具John the Ripp...</div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex_1 ml20 fit_content">
        <noteList />
      </div>
    </div>
  </div>
</template>
<script setup>

import noteList from '@/pages/LearnNote/components/noteList.vue'


import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useAppStore } from '@/pinia/appStore'
const appStore = useAppStore()
const route = useRoute()
const query = route.query;
const learnNoteId = ref(query.learnNoteId || '');
const learnNoteDetail = ref({})
onMounted(() => {
  // getLearnNoteDetailFn();
});
const getLearnNoteDetailFn = async () => {
   getLearnNoteDetail({learnNoteId: learnNoteId.value}).then(res => {
    if(res.code === 200){
      console.log(res)
      learnNoteDetail.value = res.data || {};
    }
  })
};
</script>
<style lang="scss">
.LearnNote{
  .course_List{
    padding: 16px;
    border-radius: 16px;
    &.active{
      background-color: rgba(45, 113, 255, 0.10) ;
    }
  }
}
</style>
