<!--
* @FileDescription: 折叠菜单
* @Author: 王新雷
* @Date:2024-12-01 18:40:50
-->
<template>
   <el-collapse class="courseCollapse" accordion v-model="activeCollapseId">
      <el-collapse-item v-for="item in props.courseList" :key="item.id" :name="item.id" :class="{ isChild: props.isChild }">
         <template #title>
            <div class="courseCollapseHead">
               <div class="courseCollapseHeadArrow" v-if="!props.isChild">
                  <img src="@/img/cloudTextbooks/icon-menu.png" />
               </div>
               <div class="courseCollapseHeadTit" :class="{ materialHead: item.materialList }">
                  {{ item.name }}
               </div>
            </div>
         </template>

         <div class="courseCollapseCon" :class="{ courseListCon: item.materialList }">
            <template v-if="item.materialList">
               <div
                  class="courseList"
                  :class="{ isActive: activeCollapse?.id === i.id && activeCollapse?.knowledgePointId === i.knowledgePointId }"
                  v-for="i in item.materialList"
                  :key="i.id"
                  @click="handleClick(i)"
               >
                  <div class="courseTitleCon" :class="i.typeCode || i.type">
                     <div class="imgIcon"></div>
                     <div class="ellipsisBox">
                        <span v-html="formatName(i.name)"></span>
                     </div>
                     <div class="arrow-more"></div>
                  </div>
               </div>
            </template>
            <searchCollapse
               v-else
               :isChild="true"
               :search="searchStr"
               :courseList="item.children || []"
               :activeCollapse="activeCollapse"
               @handleClick="handleClick"
            />
         </div>
      </el-collapse-item>
   </el-collapse>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"

type materialListType = {
   id: string
   type: string
   typeCode?: string
   name: string
   knowledgePointId: string
}
type courseListType = {
   id: string
   name: string
   materialList: materialListType[] | null
   children: courseListType | null
}[]

const props = defineProps<{
   activeCollapse: undefined | Record<string, any>
   courseList: courseListType
   search?: string
   isChild?: boolean
}>()
const searchStr = ref(props.search)

const emits = defineEmits<{
   (e: "handleClick", value: any): void
}>()
watch(
   () => props.activeCollapse,
   () => {
      activeCollapseId.value = filterActiveId()
   }
)
watch(
   () => props.search,
   () => {
      searchStr.value = props.search
   }
)

const activeCollapseId = ref(filterActiveId())

function formatName(name: string) {
   if (!name || !searchStr.value) return name
   const search: any = searchStr.value
   return name.replace(search, `<span style="color: #F67146;">${search}</span>`)
}

function filterActiveId() {
   const course = props.courseList.find(item => {
      return (props.activeCollapse?.parentData.ids || []).includes(item.id)
   })
   return course?.id || ""
   // return ""
}
function handleClick(value: any) {
   emits("handleClick", value)
}
</script>

<style lang="scss" scoped>
.courseCollapse.el-collapse {
   --el-collapse-border-color: #f2f2f2;
   --el-collapse-header-height: 56px;
   border: none;
   & > :deep(.el-collapse-item) {
      margin-bottom: 12px;
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      padding: 0 20px;
      > .el-collapse-item__wrap {
         border-bottom: none;
      }
      > .el-collapse-item__wrap > .el-collapse-item__content {
         padding-bottom: 0px;
      }
      > .el-collapse-item__header {
         border-bottom-color: transparent;
         &.is-active {
            border-bottom-color: #f2f2f2 !important;
         }
      }
      &:last-child {
         > .el-collapse-item__wrap {
            border-bottom: none;
         }
         > .el-collapse-item__header {
            border-bottom: none;
         }
      }
      .el-collapse-item__arrow {
         // display: none;
         svg {
            display: none;
         }
         background: url("@/img/coursewarePlay/arrow-up.png") no-repeat;
         background-size: 100% 100%;
         transform: rotate(180deg);

         &.is-active {
            background: url("@/img/coursewarePlay/arrow-up.png") no-repeat;
            background-size: 100% 100%;
            transform: rotate(0deg);
         }

         // .headArrow,
         // .headArrowActive {
         //    width: 14px;
         //    height: 14px;
         // }
         // .headArrow {
         //    background: url("@/img/coursewarePlay/jtr.png") no-repeat;
         //    background-size: 100% 100%;
         // }
         // .headArrowActive {
         //    display: none;
         //    background: url("@/img/coursewarePlay/jtb.png") no-repeat;
         //    background-size: 100% 100%;
         // }
      }
      &.is-active > .el-collapse-item__header {
         > .courseCollapseHead {
            .courseCollapseHeadTit {
               color: #333333;
               font-weight: 600;
            }
            .courseCollapseHeadArrow {
               > .headArrow {
                  display: none;
               }
               > .headArrowActive {
                  display: block;
               }
            }
         }
      }
      &.isChild {
         margin-bottom: 0;

         .el-collapse-item__wrap {
            border-bottom: none;
         }
         .el-collapse-item__header {
            border-bottom: none;
         }
         .courseCollapseHead {
            .courseCollapseHeadTit {
               color: #333333;
               font-size: 15px;
            }
            .materialHead {
               display: flex;
               align-items: center;
               &::before {
                  content: "";
                  display: inline-block;
                  border-radius: 50%;
                  width: 4px;
                  height: 4px;
                  background: #f67146;
                  margin-right: 6px;
               }
            }
            .courseCollapseHeadArrow {
               .headArrow {
                  background: url("@/img/coursewarePlay/jtr1.png") no-repeat;
                  background-size: 100% 100%;
               }
            }
         }
      }
   }
   .courseCollapseHead {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: none;
      .courseCollapseHeadTit {
         text-align: left;
         margin-left: 0;
         flex-grow: 1;
         font-weight: 400;
         font-size: 16px;
         color: #777777;
         overflow: hidden;
      }
      .courseCollapseHeadArrow {
         flex-shrink: 0;
         font-size: 0;
         > img {
            width: 36px;
            height: 40px;
            margin-right: 8px;
            vertical-align: middle;
         }
         .headArrow,
         .headArrowActive {
            width: 14px;
            height: 14px;
         }
         .headArrow {
            background: url("@/img/coursewarePlay/jtr.png") no-repeat;
            background-size: 100% 100%;
         }
         .headArrowActive {
            display: none;
            background: url("@/img/coursewarePlay/jtb.png") no-repeat;
            background-size: 100% 100%;
         }
      }
   }

   .courseCollapseCon {
      padding-left: 0;
      padding-right: 0;

      &.courseListCon {
         padding-left: 0;
      }
      .courseList {
         display: flex;
         justify-content: space-between;
         align-items: center;
         // padding: 0 10px 0 24px;
         padding: 0;
         // margin-bottom: 6px;
         cursor: pointer;
         // &.isActive {
         // background: #f0f0f0;
         // border-radius: 7px;
         // .courseTitleCon {
         //    color: #f67146;
         //    font-weight: 600;
         // }
         // }
         .courseTitleCon {
            padding: 4px 0 20px 10px;
            flex-grow: 1;
            overflow: hidden;
            margin-right: 8px;
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            > .ellipsisBox {
               flex-grow: 1;
               overflow: hidden;
            }
            > .imgIcon {
               flex-shrink: 0;
               width: 32px;
               height: 32px;
               margin-right: 10px;
            }
            &.VIDEO .imgIcon {
               background: url("@/img/cloudTextbooks/icon-video.png") no-repeat;
               background-size: 100% 100%;
            }
            &.IMG .imgIcon {
               background: url("@/img/cloudTextbooks/icon-img.png") no-repeat;
               background-size: 100% 100%;
            }
            &.SONG .imgIcon {
               background: url("@/img/cloudTextbooks/icon-song.png") no-repeat;
               background-size: 100% 100%;
            }

            .arrow-more {
               flex-shrink: 0;
               width: 12px;
               height: 12px;
               background: url("@/img/cloudTextbooks/icon-sin-arrow.png") no-repeat;
               background-size: 100% 100%;
            }
         }
         .iconArrow {
            display: flex;
            flex-shrink: 0;
            width: 13px;
            height: 13px;
            > img {
               width: 100%;
               height: 100%;
            }
         }
      }
   }

   .isChild {
      padding: 0;
      .courseCollapseHeadTit {
         padding-left: 0;
      }
   }
}
</style>
