classroom-instruments/src/views/classList/work-item/index.tsx

import { computed, defineComponent, ref } from 'vue';
import {
  NImage,
  NDivider,
  NButton,
  NModal,
  useMessage,
  ImageRenderToolbarProps
} from 'naive-ui';
import TheNoticeBar from '/src/components/TheNoticeBar';
import styles from './index.module.less';
import { PageEnum } from '/src/enums/pageEnum';
import nodata from '../images/nomore.png';
import CardPreview from '/src/components/card-preview';
import { checkUrlType, iframeDislableKeyboard } from '/src/utils';
import { useUserStore } from '/src/store/modules/users';
import { vaildMusicScoreUrl } from '/src/utils/urlUtils';

export default defineComponent({
  name: 'work-item',
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const userStore = useUserStore();
    const message = useMessage();
    const previewShow = ref(false);
    const preivewItem = ref({
      type: 'MUSIC',
      content: props.item.musicId,
      title: props.item.musicName
    });
    const reportSrc = ref('');
    const detailVisiable = ref(false);

    // const isDownload = computed(() => {
    //   if (
    //     props.item.fileList?.expireFlag &&
    //     props.item.fileList?.fileType === 'EVALUATION'
    //   ) {
    //     return true;
    //   } else {
    //     return false;
    //   }
    // });
    return () => (
      <div
        class={[
          styles.workItem,
          (props.item.fileList?.expireFlag || !props.item.fileList?.fileType) &&
            styles['work-content-disabled']
        ]}>
        <div
          class={[styles['work-content']]}
          style={{
            cursor: !props.item.fileList?.fileType ? 'default' : 'pointer'
          }}>
          {/* ("文件类型：评测：EVALUATION，IMG:图片，SOUND:音频，VIDEO:视频")
        private String fileType; */}
          {!props.item.fileList?.fileType && (
            <NImage
              src={nodata}
              class={styles.nodata}
              previewDisabled
              objectFit="contain"
            />
          )}

          {props.item.fileList?.fileType === 'IMG' && (
            <NImage
              src={props.item.fileList?.filePath}
              objectFit="contain"
              // renderToolbar={({ nodes }: ImageRenderToolbarProps) => {
              //   return [
              //     nodes.prev,
              //     nodes.next,
              //     nodes.rotateCounterclockwise,
              //     nodes.rotateClockwise,
              //     nodes.resizeToOriginalSize,
              //     nodes.zoomOut,
              //     nodes.close
              //   ];
              // }}
            />
          )}
          {props.item.fileList?.fileType === 'SOUND' && (
            <div
              onClick={() => {
                preivewItem.value.content = props.item.fileList?.filePath;
                preivewItem.value.title = props.item.musicName;
                preivewItem.value.type = 'SONG';
                previewShow.value = true;
              }}>
              <NImage
                src={PageEnum.SONG_DEFAULT_COVER}
                previewDisabled
                objectFit="contain"
              />
            </div>
          )}
          {props.item.fileList?.fileType === 'EVALUATION' &&
            (checkUrlType(props.item.fileList?.content) === 'video' ? (
              <video
                style={{ height: '100%' }}
                src={props.item.fileList?.content}
                onClick={() => {
                  preivewItem.value.content = props.item.fileList?.content;
                  preivewItem.value.title = props.item.musicName;
                  preivewItem.value.type = 'VIDEO';
                  previewShow.value = true;
                }}
              />
            ) : (
              <div
                onClick={() => {
                  preivewItem.value.content = props.item.fileList?.content;
                  preivewItem.value.title = props.item.musicName;
                  preivewItem.value.type = 'SONG';
                  previewShow.value = true;
                }}>
                <NImage
                  src={PageEnum.SONG_DEFAULT_COVER}
                  previewDisabled
                  objectFit="contain"
                />
              </div>
            ))}
          {/* 'https://oss.dayaedu.com/ktqy/1715586967518b42c4fe5.mp4' */}
          {props.item.fileList?.fileType === 'VIDEO' && (
            <video
              style={{ height: '100%' }}
              src={props.item.fileList?.filePath}
              onClick={() => {
                preivewItem.value.content = props.item.fileList?.filePath;
                preivewItem.value.title = props.item.musicName;
                preivewItem.value.type = 'VIDEO';
                previewShow.value = true;
              }}
            />
          )}

          {/* 判断是否过期 */}
          {props.item.fileList?.expireFlag && (
            <div class={styles.expireBg}>文件已过期</div>
          )}

          {props.item.recordId && (
            <NButton
              color="rgba(0,0,0,0.4)"
              textColor="#fff"
              disabled={props.item.fileList?.expireFlag}
              class={styles.reportBtn}
              onClick={() => {
                if (!props.item.recordId) {
                  message.error('暂无评测记录');
                  return;
                }
                const tockn = userStore.getToken;
                reportSrc.value =
                  vaildMusicScoreUrl() +
                  `/instrument/#/evaluat-report?id=${props.item.recordId}&Authorization=${tockn}`;
                detailVisiable.value = true;
              }}>
              评测报告
            </NButton>
          )}
        </div>
        <div class={styles['work-footer']}>
          <div class={styles.trainInfo}>
            <div class={styles.trainName}>
              <span class={[styles.type, styles[props.item.trainingType]]}>
                {props.item.trainingType === 'EVALUATION' ? '评测' : '练习'}
              </span>
              <div class={styles['title-text']}>
                <TheNoticeBar text={props.item.musicName} />
              </div>
            </div>
            <div class={styles.tagList}>
              {props.item.typeList?.map((type: string, index: number) => (
                <>
                  <span>{type}</span>
                  {props.item.typeList.length - 1 > index && (
                    <NDivider vertical />
                  )}
                </>
              ))}
            </div>
          </div>

          {props.item.trainingType === 'EVALUATION' ? (
            <div class={[styles.scoreGroup, styles.scoreGroupEval]}>
              {props.item.trainingTimes}
              <span>分</span>
            </div>
          ) : (
            <div class={[styles.scoreGroup]}>
              {props.item.trainingTimes
                ? parseInt(props.item.trainingTimes / 60 + '')
                : 0}
              <span>分钟</span>
            </div>
          )}
        </div>

        <CardPreview
          v-model:show={previewShow.value}
          item={preivewItem.value}
        />

        <NModal
          v-model:show={detailVisiable.value}
          preset="card"
          class={['modalTitle background', styles.reportModel]}
          title={'评测报告'}>
          <div class={styles.reportContainer} style={{ lineHeight: 0 }}>
            <iframe
              width={'100%'}
              height={'450px'}
              frameborder="0"
              onLoad={(val: any) => {
                iframeDislableKeyboard(val.target);
              }}
              src={reportSrc.value}></iframe>
          </div>
        </NModal>
      </div>
    );
  }
});