<template>
    <div class="main">
      <div class="header">
        <div class="title">
          <strong>{{data?.name}}</strong>
          <van-popover v-if="data?.desc" v-model:show="showPopover">
            <div class="desc">{{data?.desc}}</div>
            <template #reference>
              <van-icon name="info" size="16"></van-icon>
            </template>
          </van-popover>
        </div>
        <div class="section">{{data?.section}}</div>
      </div>
      <div class="piyue">
        <div class="playing-area" ref="player">
          <van-swipe ref="swipe" :show-indicators=false @change="swipped">
            <van-swipe-item v-for="(item, index) in data?.videos">
              <div class="video-head">
                <span @click="prev"><van-icon v-if="data?.videos.length > 1" size="16" name="arrow-left" /></span>
                <div>
                  <div class="video-name" v-if="item.ref_name">{{item.ref_name}}</div>
                  <div class="video-desc" v-if="item.ref_desc">{{item.ref_desc}}</div>
                </div>
                <span @click="next"><van-icon v-if="data?.videos.length > 1" size="16" name="arrow" /></span>
              </div>
              <div class="video">
                <hty-video :ref="setVideoRef" :src="item.resource_url" :height="height"></hty-video>
              </div>
            </van-swipe-item>
          </van-swipe>
          <div class="indictators">
            <i v-for="(item, index) in data?.videos" 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="[]" />
        </div>
      </div>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import HtyVideo from '~/components/hty-video.vue';
import LianxiPigai from "~/components/lianxi-pigai.vue";
import useJihua from "../../../store/jihua";
import { Swipe, SwipeItem, Icon, Popover } from 'vant';
import {RefResourceTypes} from '~/types'

export default defineComponent({
  name: "student-course-shifan",
  components: {
    [HtyVideo.name]: HtyVideo,
    [LianxiPigai.name]: LianxiPigai,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Icon.name]: Icon,
    [Popover.name]: Popover
  },
  props: { params: {} },
  setup({params}: any) {
    const {store} = useJihua();
    const swipe = ref()
    const player = ref()
    const videos: HTMLVideoElement[] = []
    const active = ref(0);
    const showPopover = ref(false)

    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 = store.current.course_sections.find(x => x.id === params.qs_id);
      let videos = (qs?.resources || []).filter(r => r.resource_type === RefResourceTypes.Video);
      let qupu = (qs?.resources || []).find(r => r.resource_type === RefResourceTypes.Picture);
      return {
        videos,
        qupu: qupu,
        name: qs?.course_name,
        section: qs?.section_name,
        desc: qs?.course_text
      }
    })

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

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

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

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

<style scoped lang="less">
.desc {
  padding: 0.24rem;
  font-size: 0.24rem;
  color: #777;
}
.main {
  padding: 0;
  overflow: auto;
  position: relative;

  .header {
    text-align: center;
    font-size: 0.32rem;
    padding: 0.16rem;
    height: 1.2rem;
    background: #FFFFFF;
    box-shadow: 0 0 5px 6px #eeeeee;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .section {
      font-size: 0.28rem;
    }
  }


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

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

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

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

      .video {
        height: calc(100% - 1rem);
      }

      .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 {
      width: 94%;
      margin: auto;
      height: calc(49% - 20px);
    }

  }
}
</style>
