<template>
  <div class="kechengmulu">
    <div class="gap10">
      <div class="line_vertical"></div>
      <div class="font_size18 bold">{{$t('common.kechengmulu')}} (1/{{list.length}})</div>
    </div>
    <div class="flex-center-between font_size16 gray list_item" 
    @click="handleCheck(item)"
    :class="{'active': selectedItem.chapterId === item.chapterId}"
    v-for="(item, index) in list" :key="index">
      <div class="gap10">
        <div>{{item.chapterOrderName}}</div>
        <div class="gap5">
          <img :src="muluIcon" alt="" style="width:20px;height:20px" v-show="selectedItem.chapterId === item.chapterId">
          <span>{{item.chapterName}}</span>
        </div>
      </div>
      <div>{{item.chapterTime}}</div>
    </div>
  </div>
</template>
<script setup>
import muluIcon from '@/assets/imgs/mulu.png'
import { getChaptersList } from '@/api/course.js'
import { ref, onMounted, watch, onActivated } from 'vue'
const props = defineProps({
  info: {
    type: Object,
    default: () => ({})
  },
  formPage: {
    type: String,
    default: ''
  }
})
const selectedItem = ref({});//选中的章节


//监听props.info.courseId变化
watch(() => props.info.courseId, (newVal, oldVal) => {
  if(newVal !== oldVal){
    getChaptersListFn();
  }
})

onActivated(() => {
 if(props.info.courseId){
    getChaptersListFn();
  }
})

const list = ref([]);

const getChaptersListFn = () => {
   getChaptersList({id: props.info.courseId}).then(res => {
    if(res.code === 200){
      list.value = res.rows || [];
      if(list.value.length > 0){
        selectedItem.value = list.value[0];
      }
    }
  })
};


const handleCheck = (item) => {
  selectedItem.value = item;
  if(props.formPage === 'LearningSystemDetail'){
    // 学习系统详情页点击章节跳转
    window.location.href = '#/LearningSystemDetail/' + props.info.courseId + '/' + item.chapterId;
  }else{
    // 课程详情页点击章节跳转
    window.location.href = '#/CourseDetail/' + props.info.courseId + '/' + item.chapterId;
  }
}



</script>
<style scoped lang="scss">
  .kechengmulu{
    .list_item{
      cursor: pointer;
      padding: 15px 0;
      border-bottom: 1px solid #DCDFE6;
      &.active{
        color: $primary-color;
        font-weight: 600;
      }
    }

  }

</style>
