<template>
  <div class="main" :style="{height: totalHeight + 'px'}">
    <div class="piyue">
        <div class="playing-area van-hairline--bottom" ref="player" v-if="data?.musics?.length">
            <van-swipe ref="swipe" :show-indicators=false @change="swipped">
                <van-swipe-item v-for="(item, index) in data?.musics">
                  <div class="music-head">
                    <span @click="prev"><van-icon v-if="data?.musics.length > 1" size="16" name="arrow-left" /></span>
                    <div>
                      <div class="music-name" v-if="item.ref_name || item.is_shifan"><van-icon v-if="item.is_shifan" name="star" color="gold" />{{item.ref_name}}</div>
                      <div class="music-desc" v-if="item.ref_desc">{{item.ref_desc}}</div>
                    </div>
                    <span @click="next"><van-icon v-if="data?.musics.length > 1" size="16" name="arrow" /></span>
                  </div>
                  <div class="music">
                    <hty-video v-if="item.resource_type === 'Video'" :ref="setVideoRef" :src="item.resource_url" :height="height"></hty-video>
                    <Suspense><AsyncAudio v-if="item.resource_type === 'Audio'" :src="item.resource_url"></AsyncAudio></Suspense>
                  </div>

                </van-swipe-item>
            </van-swipe>
            <div class="indictators">
                <i v-for="(item, index) in data?.musics" class="indicator" :class="{'active': active === index }"></i>
            </div>
        </div>
        <div class="mark-area" v-if="data?.qupu">
            <lianxi-pigai :readonly="true" :qupu="data?.qupu" :marks="data?.marks || []" />
        </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import HtyVideo from '~/components/hty-video.vue';
import LianxiPigai from "~/components/lianxi-pigai.vue";
import { Swipe, SwipeItem, Icon } from 'vant';
import {RefResourceTypes, RefResource} from '~/types'
import AudioCard from "~/components/audio-card.vue";
import AsyncAudio from "~/components/async-audio.vue";

export default defineComponent({
  name: "course-shifan",
  components: {
    AsyncAudio,
    [AudioCard.name!]: AudioCard,
    [HtyVideo.name!]: HtyVideo,
    [LianxiPigai.name!]: LianxiPigai,
    [Swipe.name!]: Swipe,
    [SwipeItem.name!]: SwipeItem,
    [Icon.name!]: Icon
  },
  props: ["courseSection"],
  setup(props) {
    const swipe = ref()
    const player = ref()
    const videos: HTMLVideoElement[] = []
    const active = ref(0);
    let {clientHeight} = document.body;
    let maxH = clientHeight - 50 - 44 - 64
    const totalHeight = ref(maxH);

    const setVideoRef = (el: HTMLVideoElement) => {
      if (el) {
        if (!videos.includes(el)) {
          videos.push(el);
        }
      }
    }

    const height = computed(() => {
      if (player.value) {
        let h = (player.value as unknown as HTMLDivElement).offsetHeight;
        return (h - 24 - 12) + 'px'
      }
      return 'auto'
    })
    const data = computed(() => {
      let qs = props.courseSection;
      let musics = (qs?.ref_resources || qs?.resources || []).filter((r: RefResource) => r.resource_type !== RefResourceTypes.Picture);
      let qupu = (qs?.ref_resources || qs?.resources || []).find((r: RefResource) => r.resource_type === RefResourceTypes.Picture);
      if (!musics.length) {
        totalHeight.value = maxH / 2
      }
      let marks = qs?.resource_note_group?.resource_notes || [];
      return {
        musics, qupu, title: qs.course_name + '(' + qs.section_name + ')', marks
      }
    })

    const prev = () => {
      swipe.value?.prev();
    }

    const next = () => {
      swipe.value?.next();
    }

    const swipped = (index: number) => {
      active.value = index;
      videos.forEach((v: HTMLVideoElement) => v.stop())
    }

    return {
      data, swipe, prev, next, videos, swipped, setVideoRef, active, totalHeight, height, player
    }
  }
});
</script>

<style scoped lang="less">
.main {
  padding: 0;
  overflow: auto;
  position: relative;
  box-shadow: 0 0 5px 6px #eeeeee;

  .piyue {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.16rem 0;
    height: 100%;
    align-content: center;

    .playing-area {
      position: relative;
      height: calc(49% + 20px);
      width: 94%;
      margin: 0.16rem auto;
      font-size: 0.24rem;
      color: #555;

      .music-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0.12rem;

        .music-name {
          text-align: center;
          height: 0.36rem;
        }
        .music-desc {
          height: 0.48rem;
        }
      }

      .music {
        height: calc(100% - 1rem);
        text-align: center;
      }

      .indictators {
        height: 20px;
        padding-bottom: 5px;
        display: flex;
        justify-content: center;
        align-items: center;

        .indicator  {
          display: inline-block;
          width: 12px;
          height: 6px;
          background: #aaa;
          margin: 0 2px;

          &.active {
            background: var(--van-tag-primary-color);
          }
        }
      }

       + .mark-area {
         height: calc(49% - 20px);
       }
    }

    .mark-area {
      width: 94%;
      margin: auto;
      height: 98%;
    }

  }
}
</style>
