lesson-course-play/src/views/courseListSearch/child-node.tsx

import { defineComponent } from "vue";
import styles from './index.module.less'
import { Cell, Collapse, CollapseItem } from "vant";
import iconVideo from './image/icon-video.png'
import iconSong from './image/icon-song.png'
import iconImage from './image/icon-image.png'
import { handleShowVip } from "@/state";
import { browser } from "@/helpers/utils";
import { useRouter } from "vue-router";

// 获取对应图片
export const getImage = (item: any) => {
  if (item.typeCode === 'VIDEO') {
    return iconVideo;
  } else if (['IMAGE', 'IMG'].includes(item.typeCode)) {
    return iconImage;
  } else if (item.typeCode === 'SONG') {
    return iconSong;
  } else {
    return iconVideo;
  }
};

const ChildNode = defineComponent({
  name: 'child-node',
  props: {
    id: {
      type: String,
      default: ''
    },
    search: {
      type: String,
      default: ''
    },
    isLock: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => []
    },
    collapse: {
      type: String,
      default: ''
    }
  },
  emits: ['update:collapse'],
  setup(props, { emit }) {
    const router = useRouter()
    const toDetail = (item: any) => {
      // 
      if(props.isLock) {
        handleShowVip(props.id, "LESSON")
        return
      }

      if (browser().isApp) {
        postMessage({
          api: 'openWebView',
          content: {
            url: `${location.origin}${location.pathname}#/coursewarePlay?lessonId=${props.id}&source=search&kId=${item.id}&search=${props.search}`,
            orientation: 0,
            isHideTitle: true,
            statusBarTextColor: false,
            isOpenLight: true,
            showLoadingAnim: true
          }
        });
      } else {
        router.push({
          path: '/coursewarePlay',
          query: {
            lessonId: props.id,
            kId: item.id,
            search: props.search,
            source: 'search'
          }
        });
      }
    }

    const formatName = (name: string) => {
      if(!name || !props.search) return name
      const search: any = props.search
      return name.replace(search, `<span style="color: #01C1B5;">${search}</span>`)
    }
    return () => (
      <Collapse
        modelValue={props.collapse}
        onUpdate:modelValue={(val: any) => {
          emit('update:collapse', val);
        }}
        border={false}
        accordion>
        {props.list?.map((point: any) => (
          <CollapseItem
            clickable={false}
            center
            border={false}
            class={styles.collapseChild}
            name={point.id}>
            {{
              title: () => (
                <div
                  class={[
                    styles.itemTitle,
                    Array.isArray(point?.materialList) && point?.materialList.length > 0 ? styles.materialTitle : ''
                  ]}>
                  {point.name}
                </div>
              ),
              default: () => (
                <>
                  {Array.isArray(point?.materialList) &&
                    point.materialList.map((n: any) => (
                      <Cell center isLink clickable={false} onClick={() => toDetail(n)}>
                        {{
                          title: () => <div class={styles.materialSection}>
                            <img src={getImage(n)} class={styles.iconMaterial} />
                            <div v-html={formatName(n.name)}></div>
                          </div>
                        }}
                      </Cell>
                    ))}
                  {Array.isArray(point?.children) && (
                    <ChildNode
                      isLock={props.isLock}
                      search={props.search}
                      id={props.id}
                      list={point.children}
                      collapse={point.collapse}
                      onUpdate:collapse={val => {
                        point.collapse = val;
                      }}
                    />
                  )}
                </>
              ),
              'right-icon': () => (
                  <i class={[styles.arrow, props.collapse === point.id ? styles.arrowActive : '']}></i>
              )
            }}
          </CollapseItem>
        ))}
      </Collapse>
    );
  }
});

export default ChildNode;