classroom-instruments/src/views/xiaoku-music/index.tsx

import {
  Transition,
  TransitionGroup,
  computed,
  defineComponent,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch
} from 'vue';
import styles from './index.module.less';
import icon_back from './images/icon_back.png';
import icon_separator from './images/icon_separator.png';
import {
  NBreadcrumb,
  NBreadcrumbItem,
  NButton,
  NEmpty,
  NImage,
  NModal,
  NPopselect,
  NSpace,
  NSpin,
  NPopover
} from 'naive-ui';
import TheSearch from '/src/components/TheSearch';
import { IMusicItem } from './type';
import icon_arrow from './images/icon_arrow.png';
import icon_play from './images/icon_play.png';
import icon_pause from './images/icon_pause.png';
import icon_goXiaoku from './images/icon_goXiaoku.png';
import icon_favitor from '/src/common/images/icon-collect-default.png';
import icon_favitorActive from '/src/common/images/icon-collect-active.png';
import icon_default from './images/icon_default.png';
import icon_close from './images/icon-close.png';
import icon_trans from './images/icon_trans.png';
import { useRoute, useRouter } from 'vue-router';
import PlayItem from './component/play-item';
import PlayLoading from './component/play-loading';
import TheNoticeBar from '/src/components/TheNoticeBar';
import { useCatchStore } from '/src/store/modules/catchData';
import {
  api_materialFavorite,
  api_materialFavoriteStatus,
  api_musicSheetPage,
  api_subjectList
} from '../xiaoku-ai/api';
import { useUserStore } from '/src/store/modules/users';
import Musicguide from '@/custom-plugins/guide-page/music-guide';
import TheEmpty from '/src/components/TheEmpty';
import { state } from '/src/state';
import { useResizeObserver } from '@vueuse/core';
import { vaildMusicScoreUrl } from '/src/utils/urlUtils';
import { getInstrumentName, sortMusical } from '/src/utils';

export default defineComponent({
  name: 'XiaokuMusic',
  setup() {
    const catchStore = useCatchStore();
    const user = useUserStore();
    const route = useRoute();
    const router = useRouter();
    const forms = reactive({
      page: 1,
      rows: 20,
      status: true,
      name: '', // 关键词
      musicSheetCategoriesId: route.query.id || ''
    });
    const data = reactive({
      loading: false,
      finshed: false,
      reshing: false,
      tags: [] as any[],
      tagIndex: 0,
      list: [] as unknown as IMusicItem[],
      listActive: 0,
      musicInstrumentIndex: 0,
      playState: 'pause' as 'play' | 'pause',
      showPlayer: false,
      previewModal: false,
      showPreivew: false,
      previewUrl: '',
      showCloseBtn: true,
      iframeSrc: '',
      showMusicImg: 'staff' as 'staff' | 'first' | 'fixed', // 显示哪种曲谱
      trackList: [] as any, // 可筛选的分轨信息
      showTransBtn: true, // 是否显示转谱按钮
      trackName: '切换声轨' as any // 分轨名字
    });
    const showGuide = ref(false);
    const userStore = useUserStore();
    let musicsrc = '';
    const getSubjects = async () => {
      // const res = await api_subjectList();
      // if (Array.isArray(res?.data)) {
      const tempSubjectList = catchStore.getSubjectInstruments;
      const subjectList = sessionStorage.getItem('musicSubjectList')
        ? JSON.parse(sessionStorage.getItem('musicSubjectList') as any)
        : [];
      const resultList: any[] = [];
      tempSubjectList.forEach((item: any) => {
        const hasItem = subjectList.find((s: any) => s.id === item.id);
        if (hasItem) {
          resultList.push(item);
        }
      });
      data.tags = [
        { name: '全部', id: 0, value: 0, label: '全部' },
        ...resultList
      ];
      // }
    };
    const getList = async () => {
      data.loading = true;
      let res = {} as any;
      try {
        res = await api_musicSheetPage({
          ...forms,
          // musicSubject: data.tagIndex ? data.tagIndex : ''
          musicalInstrumentId: data.tagIndex ? data.tagIndex : ''
        });
      } catch (error) {
        console.log(error);
      }

      // console.log(res, 'data', data.reshing, 'musicSubject');
      if (data.reshing) {
        data.list = [];
        data.reshing = false;
      }

      if (res?.code === 200 && Array.isArray(res?.data?.rows)) {
        data.list = [...data.list, ...res.data.rows];
        data.finshed = res.data.rows.length < forms.rows;
      } else {
        data.finshed = true;
      }
      if (data.list[data.listActive]) {
        getFavitor(data.list[data.listActive]);
      }
      data.loading = false;
      setTimeout(() => {
        showGuide.value = true;
      }, 500);
    };

    const handleGetList = () => {
      data.listActive = 0;
      data.showPlayer = false;
      data.playState = 'pause';
      forms.page = 1;
      data.finshed = false;
      getList();
    };
    const spinRef = ref();
    const handleResh = () => {
      if (data.loading || data.finshed) return;
      forms.page = forms.page + 1;
      getList();
    };

    // ifram事件处理
    const iframeHandle = (ev: MessageEvent) => {
      if (ev.data?.api === 'api_fingerPreView') {
        data.showCloseBtn = !ev.data.state;
      }
    };

    onMounted(async () => {
      // 获取声部列表
      await catchStore.getSubjects();
      // musicList-container
      useResizeObserver(
        document.querySelector('.musicList-container') as HTMLElement,
        (entries: any) => {
          const entry = entries[0];
          const { height } = entry.contentRect;
          // console.log(height, 'height - 11');
          document.documentElement.style.setProperty(
            '--xiaoku-music-height',
            height + 'px'
          );
        }
      );

      getSubjects();
      await getList();
      const obv = new IntersectionObserver(entries => {
        if (entries[0].intersectionRatio > 0) {
          handleResh();
        }
      });
      obv.observe(spinRef.value);
      analyzeXml();
      window.addEventListener('message', iframeHandle);
    });
    onUnmounted(() => {
      window.removeEventListener('message', iframeHandle);
    });
    /** 查看收藏状态 */
    const getFavitor = async (item: any) => {
      const res = await api_materialFavoriteStatus({
        type: 'MUSIC',
        materialId: item.id
      });
      if (res?.code === 200) {
        item.favitor = res.data;
      }
    };

    /** 改变模仿的曲谱 */
    const handleChange = (item: IMusicItem) => {
      const index = data.list.findIndex(_item => _item.id === item.id);
      if (index > -1) {
        data.listActive = index;
      }
      getFavitor(item);
    };

    const selectChildObj = (item: any) => {
      const obj: any = {};

      item?.forEach((child: any) => {
        if (child.id === data.tagIndex) {
          obj.selected = true;
          obj.name = child.name;
        }
      });
      return obj;
    };
    /** 选中的item */
    const activeItem = computed(() => {
      if (data.list[data.listActive]) {
        // const origin = /(localhost|192)/.test(location.host)
        //   ? 'https://dev.kt.colexiu.com'
        //   : location.origin;
        // console.log(
        //   data.list[data.listActive].xmlFileUrl,
        //   'data.list[data.listActive]'
        // );
        musicsrc = `${vaildMusicScoreUrl()}/instrument?modelType=practise&id=${
          data.list[data.listActive].xmlFileUrl
        }&Authorization=${userStore.getToken}/#/preview`;
      } else {
        musicsrc = '';
      }

      return data.list[data.listActive] || {};
    });

    /** 收藏曲谱 */
    const handleFavitor = () => {
      data.list[data.listActive].favitor = !data.list[data.listActive].favitor;
      api_materialFavorite({
        favoriteFlag: data.list[data.listActive].favitor,
        type: 'MUSIC',
        materialId: data.list[data.listActive].id
      });
    };

    /** 播放曲目 */
    const handlePlay = (item: IMusicItem) => {
      const index = data.list.findIndex(_item => _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 musicalInstruments = computed(() => {
      const details: any = data.list[data.listActive];
      const musics = details?.musicalInstruments || [];
      const temp: any = [];
      musics.forEach((item: any, index: number) => {
        temp.push({
          label: item.name,
          value: index
        });
      });
      return temp;
    });
    const isEnsemble = computed(() => {
      const details: any = data.list[data.listActive];
      const musics: any = details?.musicalInstruments;
      if (musics && musics.length > 1) {
        return true;
      } else {
        return false;
      }
    });

    const musicIframeLoad = () => {
      const token = userStore.getToken;
      const details = data.list[data.listActive];
      // const origin = /(localhost|192)/.test(location.host)
      //   ? 'https://test.lexiaoya.cn'
      //   : location.origin;
      // console.log(
      //   origin,
      //   'origin',
      //   `${origin}/instrument/?id=${details.id}&modelType=practise&modeType=json&Authorization=${token}&isPreView=true&part-index=${data.musicInstrumentIndex}`
      // );
      const musicRenderType =
        data.showMusicImg === 'first'
          ? 'firstTone'
          : data.showMusicImg === 'fixed'
          ? 'fixedTone'
          : data.showMusicImg === 'staff'
          ? 'staff'
          : 'firstTone';
      data.iframeSrc = `${vaildMusicScoreUrl()}/instrument/?id=${
        details.id
      }&modelType=practise&modeType=json&Authorization=${token}&isPreView=true&part-index=${
        data.musicInstrumentIndex
      }&musicRenderType=${musicRenderType}`;
    };

    /** 音频控制 */
    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]);
        }
      } else if (type === 'favitor') {
        handleFavitor();
      }
    };

    const _actions = [
      {
        value: 'staff',
        label: '五线谱'
      },
      {
        value: 'first',
        label: '首调'
      },
      {
        value: 'fixed',
        label: '固定调'
      }
    ];

    // 解析xml，获取分轨信息
    const analyzeXml = async () => {
      const details: any = data.list[data.listActive];
      if (details.musicalInstruments?.length > 1) {
        if (details.xmlFileUrl) {
          const res = await fetch(details.xmlFileUrl).then(response =>
            response.text()
          );
          filterTracks(res);
        }
      } else {
        // showMusicImg: 'first' as 'staff' | 'first' | 'fixed',
        const { defaultScore, transferFlag } =
          details.musicalInstruments[0] || {};
        let musicImgType: 'staff' | 'first' | 'fixed' = 'staff';
        musicImgType =
          defaultScore === 'STAVE'
            ? 'staff'
            : defaultScore === 'JIAN'
            ? 'fixed'
            : defaultScore === 'FIRST'
            ? 'first'
            : 'staff';
        data.showMusicImg = musicImgType;
        data.showTransBtn = transferFlag;
      }
    };

    // 过滤出能切换的分轨
    const filterTracks = (xml: any) => {
      const xmlParse = new DOMParser().parseFromString(xml, 'text/xml');
      const partList =
        xmlParse
          .getElementsByTagName('part-list')?.[0]
          ?.getElementsByTagName('score-part') || [];
      const partListNames = Array.from(partList).map(
        item =>
          item.getElementsByTagName('part-name')?.[0]?.textContent?.trim() || ''
      );
      const parts: any = xmlParse.getElementsByTagName('part');

      /** 第一分谱如果是约定的配置分谱则跳过 */
      if (partListNames[0]?.toLocaleUpperCase?.() === 'COMMON') {
        partListNames.shift();
      }
      // 根据后台已选择的分轨筛选出能切换的声轨
      const multiTracksSelection: any =
        data.list[data.listActive]?.multiTracksSelection;
      const canSelectTracks = multiTracksSelection
        ? multiTracksSelection?.split(',')
        : [];
      const arr = partListNames
        .map((item: any, index: number) => {
          // 该声轨能否被选
          const canselect =
            canSelectTracks.length == 0 || canSelectTracks.includes(item)
              ? true
              : false;
          // console.log(canselect,index)
          const instrumentName = getInstrumentName(item);
          const sortId = sortMusical(instrumentName, index);
          return {
            label: item + (instrumentName ? `(${instrumentName})` : ''),
            value: index,
            sortId,
            canselect,
            track: item
          };
        })
        .filter((item: any) => item.canselect)
        .sort((a: any, b: any) => a.sortId - b.sortId);
      data.trackList = arr;
      let track = arr.find(
        (item: any) => item.value === data.musicInstrumentIndex
      )?.track;
      track = track
        .replace(/[0-9]+/g, '')
        .replace(/\s/g, '')
        .toLocaleLowerCase();
      let musicRenderType: 'staff' | 'first' | 'fixed' = 'first';
      let canTrans = true;
      data.list[data.listActive]?.musicalInstruments.forEach((item: any) => {
        if (item.code.toLocaleLowerCase() === track) {
          musicRenderType =
            item.defaultScore === 'STAVE'
              ? 'staff'
              : item.defaultScore === 'JIAN'
              ? 'fixed'
              : item.defaultScore === 'FIRST'
              ? 'first'
              : 'first';
          canTrans = item.transferFlag;
        }
      });
      data.showTransBtn = canTrans;
      data.showMusicImg = musicRenderType;
    };
    watch(
      () => data.listActive,
      async () => {
        data.musicInstrumentIndex = 0;
        analyzeXml();
      }
    );
    watch(
      () => data.musicInstrumentIndex,
      async () => {
        data.trackName =
          data.trackList.find(
            (item: any) => item.value === data.musicInstrumentIndex
          )?.label || '切换声轨';
        musicIframeLoad();
      }
    );
    // 合奏曲谱转换时，更新曲谱信息
    watch(
      () => data.showMusicImg,
      () => {
        if (isEnsemble.value) {
          musicIframeLoad();
        }
      }
    );

    const musicImg = computed(() => {
      let imgs: any = [];
      if (data.showMusicImg === 'first') {
        const img = activeItem.value?.musicFirstImg;
        imgs = img ? img.split(',') : [];
      } else if (data.showMusicImg === 'fixed') {
        const img = activeItem.value?.musicJianImg;
        imgs = img ? img.split(',') : [];
      } else if (data.showMusicImg === 'staff') {
        const img = activeItem.value?.musicImg || activeItem.value?.musicSvg;
        imgs = img ? img.split(',') : [];
      }
      return imgs;
    });
    return () => (
      <div class={styles.container}>
        <NSpace align="center" wrapItem={false} size={16}>
          <img
            style={{ cursor: 'pointer' }}
            src={icon_back}
            class={styles.iconBack}
            onClick={() => router.push({ path: '/xiaoku-ai' })}
          />
          <NBreadcrumb separator="">
            <NBreadcrumbItem
              onClick={() => router.push({ path: '/xiaoku-ai' })}>
              全部列表
            </NBreadcrumbItem>
            <img class={styles.separator} src={icon_separator} />
            <NBreadcrumbItem>{route.query.name}</NBreadcrumbItem>
          </NBreadcrumb>
        </NSpace>
        <div class={[styles.wrap, data.showPlayer ? styles.wrapBottom : '']}>
          <div class={styles.content}>
            <div class={styles.tools}>
              <NSpace
                style={{ width: '100%' }}
                size={[24, 12]}
                wrapItem={false}>
                <div
                  {...{
                    id: 'music-0'
                  }}>
                  <NSpace
                    style={{ width: '100%' }}
                    size={[24, 12]}
                    wrapItem={false}>
                    {data.tags.map(item =>
                      item.instruments && item.instruments.length > 1 ? (
                        <NPopselect
                          options={item.instruments}
                          trigger="hover"
                          v-model:value={data.tagIndex}
                          onUpdate:value={() => {
                            // onSearch();
                            data.reshing = true;
                            document
                              .querySelector('.musicList-container')
                              .scroll(0, 0);
                            handleGetList();
                          }}
                          key={item.value}
                          class={[styles.popSelect1]}>
                          <NButton
                            round
                            textColor={
                              selectChildObj(item.instruments).selected
                                ? '#fff'
                                : '#000'
                            }
                            color={
                              selectChildObj(item.instruments).selected
                                ? '#198CFE'
                                : '#fff'
                            }
                            type={
                              selectChildObj(item.instruments).selected
                                ? 'primary'
                                : 'default'
                            }
                            class={[
                              styles.textBtn,
                              selectChildObj(item.instruments).selected &&
                                styles.textBtnActive
                            ]}>
                            {selectChildObj(item.instruments).name || item.name}
                            <i class={styles.iconArrow}></i>
                          </NButton>
                        </NPopselect>
                      ) : (
                        <NButton
                          round
                          textColor={
                            data.tagIndex === item.value ? '#fff' : '#000'
                          }
                          color={
                            data.tagIndex === item.value ? '#198CFE' : '#fff'
                          }
                          type={
                            data.tagIndex === item.value ? 'primary' : 'default'
                          }
                          onClick={() => {
                            data.tagIndex = item.value || 0;
                            data.reshing = true;
                            document
                              .querySelector('.musicList-container')
                              .scroll(0, 0);
                            handleGetList();
                          }}>
                          {item.name}
                        </NButton>
                      )
                    )}
                  </NSpace>
                </div>
              </NSpace>
              <TheSearch
                style={{ marginLeft: 'auto' }}
                round
                border={false}
                onSearch={val => {
                  forms.name = val;
                  data.reshing = true;
                  handleGetList();
                }}
              />
            </div>

            <div class={styles.contentWrap}>
              <div class={[styles.musicList, 'musicList-container']}>
                <div class={[styles.wrapList, 'music-wrap-list']}>
                  {data.list.map((item: IMusicItem, index) => {
                    return (
                      <div class={styles.itemContainer}>
                        <div
                          class={[
                            styles.item,
                            data.listActive === index && styles.active
                          ]}
                          onClick={() => {
                            handleChange(item);
                            musicIframeLoad();
                          }}>
                          <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.musicSheetName} />
                            </div>
                            <div class={styles.titleDes}>{item.composer}</div>
                          </div>
                          {index == 0 ? (
                            <NButton
                              color="#259CFE"
                              textColor="#fff"
                              {...{ id: 'music-1' }}
                              round
                              class={styles.btn}
                              type="primary"
                              onClick={(e: Event) => {
                                e.stopPropagation();
                                handlePlay(item);
                                if (
                                  data.listActive === index &&
                                  data.playState === 'play' &&
                                  isEnsemble.value
                                ) {
                                  musicIframeLoad();
                                }
                              }}>
                              试听
                              <img
                                src={
                                  data.listActive === index &&
                                  data.playState === 'play'
                                    ? icon_pause
                                    : icon_play
                                }
                              />
                            </NButton>
                          ) : (
                            <NButton
                              color="#259CFE"
                              textColor="#fff"
                              round
                              class={styles.btn}
                              type="primary"
                              onClick={(e: Event) => {
                                e.stopPropagation();
                                handlePlay(item);
                                if (
                                  data.listActive === index &&
                                  data.playState === 'play' &&
                                  isEnsemble.value
                                ) {
                                  musicIframeLoad();
                                }
                              }}>
                              试听
                              <img
                                src={
                                  data.listActive === index &&
                                  data.playState === 'play'
                                    ? icon_pause
                                    : icon_play
                                }
                              />
                            </NButton>
                          )}

                          <img class={styles.arrow} src={icon_arrow} />
                        </div>
                      </div>
                    );
                  })}

                  <div
                    ref={spinRef}
                    class={[
                      styles.loadingWrap,
                      data.finshed && styles.showLoading
                    ]}>
                    <NSpin show={true}></NSpin>
                  </div>

                  {!data.loading && data.list.length === 0 && (
                    <div class={styles.empty}>
                      <TheEmpty></TheEmpty>
                    </div>
                  )}
                </div>
              </div>

              <div class={styles.musicStaff}>
                <div class={styles.musicName}>
                  {activeItem.value.musicSheetName}
                </div>

                <img
                  id="music-2"
                  style={{
                    display: activeItem.value.id ? '' : 'none'
                  }}
                  class={[styles.goBtn]}
                  src={icon_goXiaoku}
                  onClick={() => {
                    handleChangeAudio('pause');
                    // const origin = /(localhost|192)/.test(location.host)
                    //   ? 'https://test.lexiaoya.cn'
                    //   : location.origin;
                    // 默认进页面显示对应的曲谱
                    let lineType = 'staff';
                    if (data.showMusicImg === 'first') {
                      lineType = 'firstTone';
                    } else if (data.showMusicImg === 'fixed') {
                      lineType = 'fixedTone';
                    } else if (data.showMusicImg === 'staff') {
                      lineType = 'staff';
                    }
                    const src = `${vaildMusicScoreUrl()}/instrument?v=${+new Date()}&platform=pc&showGuide=true&id=${
                      activeItem.value.id
                    }&Authorization=${
                      user.getToken
                    }&musicRenderType=${lineType}&showGuide=true&part-index=${
                      data.musicInstrumentIndex
                    }`;
                    if (
                      window.matchMedia('(display-mode: standalone)').matches
                    ) {
                      state.application = window.matchMedia(
                        '(display-mode: standalone)'
                      ).matches;
                      data.previewModal = true;
                      data.previewUrl = src;
                      data.showPreivew = false;
                    } else {
                      window.open(src);
                    }
                  }}
                />
                <div
                  class={styles.rightBtns}
                  style={{ display: activeItem.value.id ? '' : 'none' }}>
                  {isEnsemble.value && (
                    <NPopselect
                      options={data.trackList}
                      trigger="hover"
                      v-model:value={data.musicInstrumentIndex}
                      onUpdate:value={async (val: any) => {
                        //
                      }}
                      // key={item.id}
                      class={[styles.popSelect]}>
                      <NButton round class={[styles.textBtn]}>
                        {data.trackName}
                        <i class={styles.iconArrow}></i>
                      </NButton>
                    </NPopselect>
                  )}
                  {/* 转谱按钮 */}
                  {data.showTransBtn && (
                    <NPopselect
                      options={_actions}
                      trigger="hover"
                      v-model:value={data.showMusicImg}
                      onUpdate:value={async (val: any) => {
                        data.showMusicImg = val;
                        // musicIframeLoad();
                      }}
                      // key={item.id}
                      class={[styles.popTrans]}>
                      <img class={[styles.transBtn]} src={icon_trans} />
                    </NPopselect>
                  )}
                  <div class={styles.favitor} onClick={() => handleFavitor()}>
                    <Transition name="favitor" mode="out-in">
                      {activeItem.value.favitor ? (
                        <img src={icon_favitorActive} key="1" />
                      ) : (
                        <img src={icon_favitor} key="2" />
                      )}
                    </Transition>
                  </div>
                </div>

                <div class={styles.staffImgs}>
                  {isEnsemble.value ? (
                    <iframe
                      id="staffIframeRef"
                      style={{
                        width: '100%',
                        height: '100%',
                        paddingTop: '20px'
                        // opacity: loading.value ? 0 : 1
                      }}
                      src={data.iframeSrc}
                      onLoad={musicIframeLoad}></iframe>
                  ) : (
                    <>
                      {/* <TransitionGroup name="van-fade"> */}
                      {musicImg.value.length > 0 ? (
                        musicImg.value.map((item: string) => {
                          return <img src={item} key={item} />;
                        })
                      ) : (
                        <TheEmpty></TheEmpty>
                      )}
                      {/* </TransitionGroup> */}
                    </>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
        {data.list.length !== 0 && (
          <PlayItem
            show={data.showPlayer}
            playState={data.playState}
            item={activeItem.value}
            onChange={value => handleChangeAudio(value)}
          />
        )}
        {showGuide.value ? <Musicguide></Musicguide> : null}

        <NModal
          v-model:show={data.previewModal}
          onUpdate:show={(val: any) => {
            if (!val) {
              data.previewUrl = '';
            }
          }}
          class={styles.previewWindow}
          showIcon={false}
          displayDirective="show">
          <NSpin show={data.showPreivew} style="--n-opacity-spinning: 1;">
            <img
              style={{ display: data.showCloseBtn ? '' : 'none' }}
              src={icon_close}
              class={styles.previewClose}
              onClick={() => {
                data.previewModal = false;
                data.previewUrl = '';
              }}
            />

            <iframe
              class={styles.previewIframe}
              onLoad={() => {
                data.showPreivew = false;
              }}
              frameborder="0"
              src={data.previewUrl}></iframe>
          </NSpin>
        </NModal>
      </div>
    );
  }
});