import MHeader from '@/components/m-header';
import MSticky from '@/components/m-sticky';
import { defineComponent, onMounted, reactive } from 'vue';
import { useEventListener, useWindowScroll } from '@vueuse/core';
import styles from './index.module.less';
import { Image } from 'vant';
import request from '@/helpers/request';
import { useRoute } from 'vue-router';
import AudioPlayer from '../components/audio-player';
import banner from '../images/banner1.png';
import MEmpty from '@/components/m-empty';

export default defineComponent({
  name: 'instrument-detail',
  setup() {
    const route = useRoute();
    const forms = reactive({
      titleOpacity: 0,
      background: 'transparent',
      color: '#fff',
      detail: {} as any,
      musicList: [] as any,
      loading: false
    });

    const getDetail = async () => {
      forms.loading = true;
      try {
        const { data } = await request.get(
          '/edu-app/knowledgeWiki/detail/' + route.query.id
        );
        data.intros = data.intros.replace(
          /<video/gi,
          '<video style="width: 100% !important;" controlslist="nodownload"'
        );
        forms.detail = data || {};
        forms.musicList = data.knowledgeWikiResources.map((item: any) => {
          return {
            id: item.id,
            name: item.name,
            url: item.url
          };
        });
      } catch {}
      forms.loading = false;
    };
    onMounted(() => {
      useEventListener(document, 'scroll', () => {
        const { y } = useWindowScroll();
        forms.titleOpacity = y.value > 100 ? 1 : y.value / 100;
      });

      getDetail();
    });
    return () => (
      <div class={styles.detail}>
        <div class={styles.bgSection}>
          <img class={styles.bg} src={forms.detail.avatar || banner} />
        </div>
        <MSticky position="top">
          <MHeader
            border={false}
            background={`rgba(255,255,255, ${forms.titleOpacity})`}
            color={`rgba(51,51,51, ${forms.titleOpacity})`}
            title={forms.detail.name || ''}></MHeader>
        </MSticky>

        <div class={styles.container}>
          <div class={styles.instrumentLogo}>
            <Image class={styles.logo} fit="cover" src={forms.detail.avatar} />
          </div>

          <div class={styles.title}>{forms.detail.name}</div>
          <div class={styles.content} v-html={forms.detail.intros}></div>

          {!forms.loading && !forms.detail.intros && (
            <MEmpty description="暂无内容" />
          )}
        </div>

        <MSticky position="bottom">
          {forms.musicList.length > 0 && (
            <AudioPlayer musicList={forms.musicList} />
          )}
        </MSticky>
      </div>
    );
  }
});