import { defineComponent } from 'vue';
import styles from './index.module.less';
import { useRoute } from 'vue-router';
import Theory from '@/views/courseware-play/component/theory';
import InstrumentInfo from '@/views/courseware-play/component/instrument-info';

export default defineComponent({
  name: 'pptResources',
  setup() {
    const route = useRoute();
    // 获取传递过来的参数
    const queryParams = {
      pptContentType: route.query.pptContentType as string, // ppt传过来的 资源类型
      pptType: route.query.pptType as string, // ppt 传过来的显示类型   modal，preview
      pptId: route.query.pptId as string // ppt传过来的id
    };
    console.log(queryParams, '传过来的参数');
    const pptTypeObj: Record<string, any> = {
      INSTRUMENT: 'instrument',
      MUSICIAN: 'musician',
      MUSIC_WIKI: 'wiki',
      THEORY: 'theory'
    };
    function handleChangeTogge() {
      window.parent.postMessage(
        {
          api: 'changeTogge'
        },
        '*'
      );
    }
    return () => (
      <div class={styles.pptResources} onClick={handleChangeTogge}>
        {['INSTRUMENT', 'MUSICIAN', 'MUSIC_WIKI'].includes(
          queryParams.pptContentType
        ) ? (
          <InstrumentInfo
            type={pptTypeObj[queryParams.pptContentType]}
            id={queryParams.pptId}
          />
        ) : queryParams.pptContentType === 'THEORY' ? (
          <Theory id={queryParams.pptId} />
        ) : (
          ''
        )}
      </div>
    );
  }
});