<template>
  <div class="LearningSystem container-height">
    <div v-if="!isChildRoute">
      <div :style="{height: carouselHeight}">
        <div style="width:100%;position: absolute;top: 60px;left: 0;">
          <el-carousel :height="carouselHeight" style="width: 100%;">
            <el-carousel-item>
              <img
                :src="learnIcon"
                style="width:100%"
                @load="onImageLoad"
              />
            </el-carousel-item>
            <el-carousel-item>
              <img
                :src="learnIcon"
                style="width:100%"
                @load="onImageLoad"
              />
            </el-carousel-item>
            
          </el-carousel>
        </div>
      </div>
      <Breadcrumb />
      <div class="padding12 bg_color_fff border_radius_16 box_shadow_card">
        <div class="typeList flex-between typeborder">
          <div class="gray font_size14 typeName">学习分类：</div>
          <div class="flex_1 gap10">
            <div class="font_size14 typeItem"  :class="{'active':searchFom.categoryId2 === ''}"
            @click="searchFom.categoryId2 = ''; searchFom.categoryId3 = '';getList('init');categoryListTree2=[]"
            :key="-1">
              全部
            </div>
            <div class="font_size14 typeItem" 
             v-for="item in categoryListTree" :key="item.categoryId"
             :class="{'active':searchFom.categoryId2 === item.categoryId}"
             @click="searchFom.categoryId2 = item.categoryId;searchFom.categoryId3 = '';categoryListTree2=[]; getList('init');getCategoryListTreeFn2();">
              {{item.categoryName}}
            </div>
          </div>
        </div>
        <div class="typeList flex-between typeborder">
          <div class="gray font_size14 typeName">教程分类：</div>
          <div class="flex_1 gap10">
            <div class="font_size14 typeItem"  :class="{'active':searchFom.categoryId2 === ''}"
            @click="searchFom.categoryId2 = ''; searchFom.categoryId3 = '';getList('init');categoryListTree2=[]"
            :key="-1">
              全部
            </div>
            <div class="font_size14 typeItem" 
             v-for="item in categoryListTree" :key="item.categoryId"
             :class="{'active':searchFom.categoryId2 === item.categoryId}"
             @click="searchFom.categoryId2 = item.categoryId;searchFom.categoryId3 = '';categoryListTree2=[]; getList('init');getCategoryListTreeFn2();">
              {{item.categoryName}}
            </div>
          </div>
        </div>
        <div class="typeList flex-between">
          <div class="gray font_size14 typeName">技能标签：</div>
          <div class="flex_1 gap10">
            <div class="font_size14 typeItem"  :class="{'active':searchFom.categoryId3 === ''}"
            @click="searchFom.categoryId3 = ''; getList('init');"
            :key="-1">
              全部
            </div>
            <div class="font_size14 typeItem" 
             v-for="item in categoryListTree2" :key="item.categoryId"
             :class="{'active':searchFom.categoryId3 === item.categoryId}"
             @click="searchFom.categoryId3 = item.categoryId; getList('init');">
              {{item.categoryName}}
            </div>
          </div>
        </div>
      </div>
      <!-- 列表 -->
      <div class="course-list mt20">
        <div class="course-grid">
          <div v-for="(item, index) in list" :key="index" class="course-item list_item_animation">
            <div class="bg_color_f5 coverImg" @click.stop.prevent="goDetail(item)" >
              <img :src="item.coverImageUrl" alt="" class="coverImg" />
            </div>
            <div class="padding16">
              <div class="font_size18 bold">
                {{item.courseTitle}}
              </div> 
              <div class="mt10 line1 gray font_size13">
                {{item.courseIntro}}
              </div>
              <div class="flex-center-between mt10">
                <div class="gap5">
                  <img :src="viewIcon" alt="" style="width:16px;height:16px">
                  <div>{{item.viewCount}}{{ $t('common.renkanguo') }}</div>
                </div>
                <div class="gap5 gradient border_radius_4 cursor-pointer xuexi" @click.stop.prevent="goDetail(item)">
                  <img :src="playIcon" alt="" style="width:13px;height:15px">
                  <div>{{$t('common.lijixuexi')}}</div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <!-- 分页 -->
      <!-- 替换原有的分页代码 -->
      <Pagination 
        :total="searchFom.total"
        :page-size="searchFom.pageSize"
        :current-page="searchFom.pageNum"
        @page-change="handlePageChange"
      />
    </div>
    <router-view />
  </div>
</template>

<script setup>
  import viewIcon from '@/assets/imgs/view.png'
  import playIcon from '@/assets/imgs/bofang.png'
  import learnIcon from '@/assets/imgs/learn.png'

  import CourseCard from '@/components/course-card.vue'
  import Pagination from '@/components/Pagination.vue'

  import { getCategoryListTree } from '@/api/category.js'
  import { getCourseList } from '@/api/course.js'

  import { isLogin } from '@/utils/util.js'
  import { useI18n } from 'vue-i18n' 
  const { t } = useI18n() 


  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter();
  const route = useRoute();
  import { ref, computed, reactive, onMounted, inject } from 'vue'
  //获取参数
  const query = route.query
  const categoryId = ref(query.categoryId || '');
  const activePlatform = ref(query.activePlatform || '');
  //获取当前路由路径
  // const currentPath = ref(router.currentRoute.value.path)
  const isChildRoute = computed(() => {
    return route.matched.length > 1
  });
  // 监听图片加载完成，动态设置轮播图高度
  const carouselHeight = ref('auto')
  const onImageLoad = (event) => {
    const img = event.target
    const aspectRatio = img.naturalWidth / img.naturalHeight
    const containerWidth = img.offsetWidth
    const calculatedHeight = containerWidth / aspectRatio
    carouselHeight.value = calculatedHeight + 'px'
  }

  const openLoginDialog = inject('openLoginDialog')



  // 一级分类列表
  const categoryListTree = ref([]);
  // 二级分类列表
  const categoryListTree2 = ref([]);
  // 活动平台

  // 添加分页相关数据
  const list = ref([]);
  const listTotal = ref(0);
  const searchFom = reactive({
    categoryId1: categoryId.value,
    categoryId2: '',
    categoryId3: '',
    workflowTitle: '',
    pageNum: 1,
    pageSize: 10,
  })

  onMounted(() => {
    getList();
    getCategoryListTreeFn();
  })

   // 列表
  const getList = async (type) => {
    if(type === 'init'){
      searchFom.pageNum = 1
    }
    const res = await getCourseList(searchFom)
    if(res.code === 200){
      list.value = res.rows || [];
      listTotal.value = res.total || 0;
    }
  }
  const handlePageChange = (page) => {
    searchFom.pageNum = page
    // 这里可以添加获取数据的逻辑
    console.log('当前页:', page)
    getList();
  }

  const goDetail = (item) => {
    //判断是否登录
    if(!isLogin({callback: openLoginDialog,t})){
      return;
    }
    //增加参数名称
    router.push({
      path: `/learning-system/detail/${item.courseId}`,
      query: {
        courseId: item.courseId,
        metaTitle: item.courseTitle || '课程详情'
      }
    })
  };

  const getCategoryListTreeFn = () => {
    getCategoryListTree({categoryId: categoryId.value}).then(res => {
      console.log(res)
      categoryListTree.value = res.rows || [];
    })
  };
  const getCategoryListTreeFn2 = () => {
    getCategoryListTree({categoryId: searchFom.categoryId2}).then(res => {
      console.log(res)
      categoryListTree2.value = res.rows || [];
    })
  };

  
</script>

<style scoped lang="scss">
.LearningSystem {
  .typeList{
    padding: 20px 0;
    &.typeborder{
      border-bottom: 1px dashed #DCDFE6;
    }
    .typeName{
      margin-top: 6px;
      width: 80px;
    }
    .typeItem{
      margin: 0 8px;
      cursor: pointer;
      padding: 4px 8px;
      &.active{
        background: rgba(45,113,255,0.1);
        border-radius: 4px 4px 4px 4px;
        
        color: $primary-color;
        font-weight: 600;
      }
    }
  }
  .course-item{
    width: 368px;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    .coverImg{
      width: 100%;
      height: 204px;
    }
  }
  .xuexi{
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
  }
}
</style>
