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

import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
import styles from './index.module.less';
import {
  NButton,
  // NBreadcrumb,
  // NBreadcrumbItem,
  // NScrollbar,
  NSlider,
  NSpace,
  NSpin
} from 'naive-ui';
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 {
  api_lessonCoursewareDetail_listKnowledge,
  api_lessonCoursewareKnowledgeDetail
} from '/src/views/content-information/api';
import TheEmpty from '/src/components/TheEmpty';
import { PageEnum } from '/src/enums/pageEnum';

export default defineComponent({
  name: 'cotnent-knowledge',
  props: {
    id: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    activeStatus: {
      type: Boolean,
      default: false
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const content = ref(false);
    const musicContentRef = ref();
    const state = reactive({
      fontSize: 18,
      tableList: [] as any,
      selectKey: null,
      details: {} as any
    });

    const getDetail = async () => {
      content.value = true;
      try {
        const { data } = await api_lessonCoursewareKnowledgeDetail({
          id: props.id
        });

        state.details = data;
      } catch {
        //
      }
      content.value = false;
    };

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

    watch(
      () => props.activeStatus,
      () => {
        // if (!props.activeStatus) {
        //   handleChangeAudio('pause');
        // }
      }
    );
    return () => (
      <div
        class={[
          styles.containerDetail,
          props.type === 'preview' && styles.detailPreview
        ]}>
        {/* <div class={styles.detail2}> */}
        <div class={styles.contentWrap}>
          <div class={styles.musicStaff}>
            <NSpin
              show={content.value}
              ref={musicContentRef}
              class={
                !content.value && !state.details?.desc ? styles.empty : ''
              }>
              {state.details?.desc ? (
                <div
                  class={styles.musicContent}
                  v-html={state.details?.desc}
                  style={{ fontSize: state.fontSize + 'px' }}></div>
              ) : (
                ''
              )}
              {!content.value && !state.details?.desc && <TheEmpty />}
            </NSpin>
          </div>

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