classroom/src/views/coursewarePlay/component/points.tsx

import { defineComponent, reactive, watch } from "vue"
import styles from "./point.module.scss"
import icons from "../image/icons.json"
const { iconMulv, iconArrow, iconImage, iconImageActive, iconVideo, iconVideoActive, iconSong, iconSongActive } = icons
import iconZhibo from "../image/icon-load.gif"
import { Collapse, CollapseItem, Icon, Image } from "vant"
export default defineComponent({
   name: "points-list",
   props: {
      data: {
         type: Array,
         default: () => []
      },
      tabActive: {
         type: String,
         default: ""
      },
      itemActive: {
         type: String,
         default: ""
      }
   },
   emits: ["handleSelect"],
   setup(props, { emit }) {
      const pointData = reactive({
         active: props.tabActive[0] || "",
         childActive: props.tabActive[1] || ""
      })
      watch(
         () => props.tabActive,
         () => {
            pointData.active = props.tabActive[0] || ""
            pointData.childActive = props.tabActive[1] || ""
         }
      )

      console.log(pointData.active, "pointData.active", props.data, props.tabActive)

      // 获取对应图片
      const getImage = (item: any) => {
         if (item.type === "VIDEO") {
            return props.itemActive == item.id ? iconVideoActive : iconVideo
         } else if (["IMAGE", "IMG"].includes(item.type)) {
            return props.itemActive == item.id ? iconImageActive : iconImage
         } else if (item.type === "SONG") {
            return props.itemActive == item.id ? iconSongActive : iconSong
         } else {
            return props.itemActive == item.id ? iconVideoActive : iconVideo
         }
      }
      return () => (
         <div class={styles.container}>
            <div class={styles.pointHead}>
               <img src={require("../image/kcml.png")} />
               课程目录
            </div>
            <div class={styles.content}>
               <Collapse
                  class={styles.collapse}
                  modelValue={pointData.active}
                  onUpdate:modelValue={(val: any) => {
                     pointData.active = val
                  }}
                  accordion
               >
                  {props.data.map((item: any, index: number) => {
                     return (
                        <CollapseItem center border={false} class={index > 0 ? styles.borderTop : ""} isLink={false} title={item.name} name={item.id}>
                           {{
                              default: () => (
                                 <>
                                    {Array.isArray(item?.materialList) &&
                                       item.materialList.map((n: any) => {
                                          return (
                                             <div
                                                class={[styles.item, props.itemActive == n.id ? styles.itemActive : ""]}
                                                onClick={() => {
                                                   emit("handleSelect", {
                                                      itemActive: n.id,
                                                      tabActive: item.id,
                                                      tabName: item.name
                                                   })
                                                }}
                                             >
                                                <Image src={getImage(n)} class={styles.itemImage} />
                                                <span style={{ width: "80%" }} class="van-ellipsis">
                                                   {n.name}
                                                </span>
                                                <Icon name={iconZhibo} />
                                             </div>
                                          )
                                       })}

                                    {Array.isArray(item?.children) && (
                                       <Collapse
                                          class={[styles.collapse, pointData.active === item.id ? styles.childActive : ""]}
                                          modelValue={pointData.childActive}
                                          onUpdate:modelValue={(val: any) => {
                                             pointData.childActive = val
                                          }}
                                          accordion
                                       >
                                          {item?.children.map((child: any) => {
                                             return (
                                                <CollapseItem
                                                   center
                                                   border={false}
                                                   isLink={false}
                                                   title={child.name}
                                                   name={child.id}
                                                   class={styles.childCollapseItem}
                                                >
                                                   {{
                                                      default: () => (
                                                         <>
                                                            {Array.isArray(child?.materialList) &&
                                                               child.materialList.map((n: any) => {
                                                                  return (
                                                                     <div
                                                                        class={[styles.item, props.itemActive == n.id ? styles.itemActive : ""]}
                                                                        onClick={() => {
                                                                           emit("handleSelect", {
                                                                              itemActive: n.id,
                                                                              tabActive: child.id,
                                                                              tabName: child.name
                                                                           })
                                                                        }}
                                                                     >
                                                                        <Image src={getImage(n)} class={styles.itemImage} />
                                                                        <span style={{ width: "73%" }} class="van-ellipsis">
                                                                           {n.name}
                                                                        </span>
                                                                        <Icon name={iconZhibo} />
                                                                     </div>
                                                                  )
                                                               })}
                                                         </>
                                                      ),
                                                      icon: () => <img class={styles.arrow} src={iconArrow} />
                                                   }}
                                                </CollapseItem>
                                             )
                                          })}
                                       </Collapse>
                                    )}
                                 </>
                              ),
                              icon: () => <img class={styles.arrow} src={iconArrow} />
                           }}
                        </CollapseItem>
                     )
                  })}
               </Collapse>
            </div>
         </div>
      )
   }
})