classroom-instruments/src/views/prepare-lessons/model/source-instrument/detail.tsx

import {
  NBreadcrumb,
  NBreadcrumbItem,
  NButton,
  NImage,
  NSlider,
  NSpace,
  NSpin
} from 'naive-ui';
import { computed, defineComponent, onMounted, reactive, watch } from 'vue';
import styles from './detail.module.less';
// import icon_back from '../../xiaoku-music/images/icon_back.png';
import icon_arrow from '../../../xiaoku-music/images/icon_arrow.png';
import icon_play from '../../../xiaoku-music/images/icon_play.png';
import icon_pause from '../../../xiaoku-music/images/icon_pause.png';
import icon_default from '../../../xiaoku-music/images/icon_default.png';
// import icon_separator from '../../xiaoku-music/images/icon_separator.png';
import iconT from '/src/views/content-information/images/icon-t.png';
import iconAddT from '/src/views/content-information/images/icon-add-t.png';
import iconPlusT from '/src/views/content-information/images/icon-plus-t.png';
import { useRoute, useRouter } from 'vue-router';
import PlayLoading from '../../../xiaoku-music/component/play-loading';
import TheNoticeBar from '/src/components/TheNoticeBar';
import TheEmpty from '/src/components/TheEmpty';
import PlayItem from '../../../xiaoku-music/component/play-item';
import { api_knowledgeWiki_detail } from '/src/views/content-information/api';
import { useSpeak } from '/src/views/content-information/useSpeak';

export default defineComponent({
  name: 'instrument-detail',
  props: {
    id: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    activeStatus: {
      type: Boolean,
      default: false
    },
    contentType: {
      type: String,
      default: ''
    }
  },
  setup(props, { expose }) {
    const route = useRoute();
    const speakMusicContent =
      'musicContent' + new Date().getTime() + Math.floor(Math.random() * 100);
    const selectionCouser =
      'selectionCouser' +
      new Date().getTime() +
      Math.floor(Math.random() * 100);
    const speak = useSpeak(speakMusicContent, selectionCouser);
    const forms = reactive({
      page: 1,
      rows: 20,
      status: true,
      name: '', // 关键词
      type: props.contentType
    });
    const data = reactive({
      loading: false,
      finshed: false,
      reshing: false,
      details: {} as any,
      list: [] as any,
      listActive: 0,
      playState: 'pause' as 'play' | 'pause',
      showPlayer: false,
      showPreivew: false,
      previewUrl: '',
      showCloseBtn: true,
      fontSize: 18 // 默认18
    });

    /** 选中的item */
    const activeItem = computed(() => {
      return data.list[data.listActive] || {};
    });

    watch(
      () => data.playState,
      () => {
        if (data.playState === 'play') {
          speak.onCloseSpeak();
        }
      }
    );

    /** 播放曲目 */
    const handlePlay = (item: any) => {
      const index = data.list.findIndex((_item: any) => _item.id === item.id);
      if (index > -1) {
        if (data.listActive === index) {
          data.playState = data.playState === 'play' ? 'pause' : 'play';
        } else {
          data.playState = 'play';
        }
        data.showPlayer = true;
        data.listActive = index;
      }
    };

    /** 音频控制 */
    const handleChangeAudio = (
      type: 'play' | 'pause' | 'pre' | 'next' | 'favitor'
    ) => {
      if (type === 'play') {
        data.playState = 'play';
      } else if (type === 'pause') {
        data.playState = 'pause';
      } else if (type === 'pre') {
        if (data.list[data.listActive - 1]) {
          handlePlay(data.list[data.listActive - 1]);
        }
      } else if (type === 'next') {
        if (data.list[data.listActive + 1]) {
          handlePlay(data.list[data.listActive + 1]);
        }
      }
    };

    const getDetail = async () => {
      data.loading = true;
      let res = {} as any;
      try {
        res = await api_knowledgeWiki_detail({
          id: props.id || route.query.id
        });
      } catch (error) {
        console.log(error);
      }
      if (data.reshing) {
        data.list = [];
        data.reshing = false;
      }

      data.finshed = true;
      data.list = res.data.knowledgeWikiResources || [];
      data.list.forEach((item: any) => {
        item.audioFileUrl = item.url;
        item.musicSheetName = item.name;
      });
      const knowledgeWikiCategories = res.data.knowledgeWikiCategories || [];
      res.data.knowledgeName =
        knowledgeWikiCategories.length > 0
          ? knowledgeWikiCategories[0].knowledgeWikiCategoryTypeName
          : '';
      res.data.intros = res.data.intros.replace(
        /<video/gi,
        '<video class="video-music" style="width: 100% !important;" controlslist="nodownload"'
      );
      // 使用 DOMParser 解析 HTML 字符串
      const parser = new DOMParser();
      const doc = parser.parseFromString(res.data.intros, 'text/html');

      // 提取并分割 HTML 文档中的内容
      const result = document.createElement("div")
        result.classList.add("html-to-dom")
        result.appendChild(speak.processNode(doc.body))
      document
        .querySelector('#' + speakMusicContent)
        ?.appendChild(result);

      data.details = res.data;
      data.loading = false;
    };

    const onStopAll = (type: 'play' | 'pause' | 'pre' | 'next' | 'favitor') => {
      handleChangeAudio(type);
      speak.onCloseSpeak();
      try {
        // 暂停视频
        const doms = document.querySelectorAll('.video-music');
        if (doms && doms.length > 0) {
          doms.forEach((dom: any) => {
            dom.pause();
          });
        }
      } catch {
        //
      }
    };

    onMounted(() => {
      getDetail();
    });

    watch(
      () => props.activeStatus,
      () => {
        if (!props.activeStatus) {
          onStopAll('pause');
        }
      }
    );

    expose({
      handleChangeAudio: onStopAll
    });
    return () => (
      <div
        class={[
          styles.container,
          props.type === 'preview' && styles.containerPreview,
          props.type === 'modal' && styles.containerModal
        ]}>
        <div class={[styles.wrap, data.showPlayer ? styles.wrapBottom : '']}>
          <div class={styles.content}>
            <div class={styles.contentWrap}>
              <div class={[styles.musicList, 'musicList-container']}>
                <div class={styles.wrapList}>
                  <div class={styles.instrumentGroup}>
                    <NImage
                      class={[
                        styles.instrumentImg,
                        forms.type === 'MUSICIAN' && styles.otherImg
                      ]}
                      src={data.details?.avatar}
                      objectFit="cover"
                    />

                    <p class={styles.instrumentName}>{data.details.name}</p>
                    <p class={styles.instrumentTag}>
                      {data.details.knowledgeName}
                    </p>
                  </div>

                  <div class={styles.titlec}>
                    <i class={styles.icon2}></i>代表作
                  </div>

                  {data.list.map((item: any, index: any) => {
                    return (
                      <div class={styles.itemContainer}>
                        <div
                          class={[
                            styles.item
                            // data.listActive === index && styles.active
                          ]}
                          onClick={(e: Event) => {
                            e.stopPropagation();
                            handlePlay(item);
                          }}>
                          <div class={styles.img}>
                            <NImage
                              lazy
                              objectFit="cover"
                              previewDisabled={true}
                              src={item.titleImg || icon_default}
                              onLoad={e => {
                                (e.target as any).dataset.loaded = 'true';
                              }}
                            />
                            <PlayLoading
                              class={[
                                data.listActive === index &&
                                data.playState === 'play'
                                  ? ''
                                  : styles.showPlayLoading
                              ]}
                            />
                          </div>
                          <div class={styles.title}>
                            <div class={styles.titleName}>
                              <TheNoticeBar
                                text={item.name}
                                style={{ marginRight: '12px' }}
                              />
                            </div>
                          </div>

                          <NButton
                            color="#259CFE"
                            textColor="#fff"
                            round
                            class={styles.btn}
                            type="primary"
                            onClick={(e: Event) => {
                              e.stopPropagation();
                              handlePlay(item);
                            }}>
                            播放
                            <img
                              src={
                                data.listActive === index &&
                                data.playState === 'play'
                                  ? icon_pause
                                  : icon_play
                              }
                            />
                          </NButton>

                          <img class={styles.arrow} src={icon_arrow} />
                        </div>
                      </div>
                    );
                  })}
                  {!data.finshed && (
                    <div class={styles.loadingWrap}>
                      <NSpin show={true}></NSpin>
                    </div>
                  )}
                  {!data.loading && data.list.length === 0 && (
                    <div class={styles.empty}>
                      <TheEmpty description="暂无代表作"></TheEmpty>
                    </div>
                  )}
                </div>
              </div>

              <div class={styles.musicStaff}>
                <div class={styles.musicTitle}>
                  <div class={styles.musicTitleLeft}>
                    <i
                      class={
                        forms.type === 'MUSICIAN' ? styles.icon3 : styles.icon1
                      }></i>
                    {forms.type === 'MUSICIAN' ? '个人简介' : '乐器简介'}
                  </div>

                  <div class={styles.musicTitleRight}>
                    {speak.isSpeak.value ? (
                      <span
                        class={styles.textClose}
                        onClick={speak.onCloseSpeak}>
                        <i class={styles.icon}></i>关闭朗读
                      </span>
                    ) : (
                      <span
                        class={styles.textRead}
                        onClick={() => {
                          speak.onAllSpeak();
                          handleChangeAudio('pause');
                        }}>
                        <i class={styles.icon}></i>全文朗读
                      </span>
                    )}
                  </div>
                </div>
                <div
                  class={styles.musicContent}
                  id={speakMusicContent}
                  style={{ fontSize: data.fontSize + 'px' }}>
                  {/* 选中的内容 */}
                  <div
                    id={selectionCouser}
                    class={[
                      styles.selectionCouser,
                      !speak.showDom.value && styles.hide
                    ]}>
                    <span
                      class={styles.textStart}
                      onClick={() => {
                        speak.onTextStart();
                        handleChangeAudio('pause');
                      }}>
                      开始朗读<i class={styles.icon}></i>
                    </span>
                    <span
                      class={styles.textReadOnly}
                      onClick={() => {
                        speak.onTextReadOnly();
                        handleChangeAudio('pause');
                      }}>
                      只读这段<i class={styles.icon}></i>
                    </span>
                  </div>
                </div>
              </div>

              <div class={styles.changeSizeSection}>
                <img src={iconT} class={styles.iconT} />
                <img
                  src={iconAddT}
                  class={styles.iconAddT}
                  onClick={() => {
                    if (data.fontSize >= 32) return;
                    data.fontSize += 1;
                  }}
                />
                <NSlider
                  v-model:value={data.fontSize}
                  vertical
                  placement="left"
                  min={12}
                  max={32}
                />
                <img
                  src={iconPlusT}
                  class={styles.iconPlusT}
                  onClick={() => {
                    if (data.fontSize <= 12) return;
                    data.fontSize -= 1;
                  }}
                />
              </div>
            </div>
          </div>
        </div>

        {data.list.length !== 0 && (
          <PlayItem
            type={props.type}
            show={data.showPlayer}
            playState={data.playState}
            item={activeItem.value}
            onChange={value => handleChangeAudio(value)}
            onShow={(status: boolean) => {
              data.showPlayer = status
            }}
          />
        )}
      </div>
    );
  }
});