import { defineComponent, ref, reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import request from '@/helpers/request';
import MEmpty from '@/components/m-empty';
import styles from './index.module.less';

export default defineComponent({
  name: 'Theory',
  props: {
    id: {
      type: String,
      default: () => ''
    }
  },
  emits: ['close', 'select'],
  setup(props, { emit }) {
    const route = useRoute();
    const forms = reactive({
      detailId: route.query.detailId,
      loading: false,
      dataInfo: {} as any,
      title: ' ',
    });
    const getDetail = async () => {
      forms.loading = true;
      try {
        const { data } = await request.get(
          '/edu-app/lessonCoursewareKnowledgeDetail/detail/' + props.id
        );
        forms.dataInfo = data;
        forms.title = data.name;
      } catch {
        //
      }
      forms.loading = false;
    };
    onMounted(async () => {
      await getDetail();
    });
    return () => (
      <div class={styles.knowledgeBg}>
        <div class={styles.content}>
          {forms.dataInfo?.desc && (
            <div
              v-html={forms.dataInfo.desc}></div>
          )}
          {!forms.dataInfo?.desc && !forms.loading && (
            <div>
              <MEmpty description="暂无内容" style={{ paddingTop: '40px' }} />
            </div>
          )}
        </div>        
      </div>
    );
  }
});
