<template>
  <div class="courses" v-show="show">
    <van-collapse v-model="activeCourses">
      <van-collapse-item :name="course.id" :title="`${course.course_name}(${course.section_name})`" v-for="course in dataset">
        <div class="course-row">
          <div class="course-text van-hairline--bottom" v-if="course.course_text">
            <div v-for="line in course.course_text?.split('\n')">{{line}}</div>
          </div>
          <div class="course-text course-cate van-hairline--bottom">
            <span>
              <template v-if="course.course_category_key && course.course_category_name">
              课程体系类型：{{course.course_category_name}}
              </template>
            </span>
            <van-button v-if="canModify" size="mini" type="primary" @click="$emit('modify', course.id)">编辑</van-button>
          </div>
          <div class="course-resource">
            <template v-if="get_qupu(course)">
              <div class="qupu-map-root" v-if="course.resource_note_group">
                <qupu-map :background-url="get_qupu(course).url" :readonly="true" @pause="pause(course, $event)"
                          :marks="course.resource_note_group.resource_notes" />
              </div>
              <hty-image v-else :url="get_qupu(course).url" :task="get_qupu(course).task" :radius="5" />
              <div class="divider"></div>
            </template>
            <upload-progress>
              <multi-video-uploader readonly :addable="false" downloadable :model-value="get_videos(course)" />
            </upload-progress>
            <audio-card readonly :model-value="get_audios(course)"></audio-card>
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
  <van-action-sheet :lock-scroll="false" v-model:show="state.replying" :title="'批注 ' + state.pausing"
                    @closeed="state.replying = false" :close-on-click-overlay="false">
    <comments-sheet :readonly="true" :ref_id="state.mark_id" @remove="state.replying = false"></comments-sheet>
  </van-action-sheet>
</template>

<script lang="ts">
import {defineComponent, reactive, ref} from "vue";
import {CourseSection, RefResourceTypes, ResourceNote} from "~/types";
import {Collapse, CollapseItem, ActionSheet, Button} from 'vant'
import HtyImage from '~/components/hty-image.vue';
import MultiVideoUploader from '~/components/multi-video-uploader.vue';
import UploadProgress from '~/components/upload-progress.vue';
import CommentsSheet from "~/components/comments-sheet.vue";
import QupuMap from "~/components/qupu-map.vue";
import {get_search_params} from '~/utils'
import AudioCard from "~/components/audio-card.vue";

export default defineComponent({
  name: "course-section-group",
  props: ["show", "dataset", "canModify"],
  emits: ["modify"],
  components: {
    [AudioCard.name]: AudioCard,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [HtyImage.name]: HtyImage,
    [UploadProgress.name]: UploadProgress,
    [MultiVideoUploader.name]: MultiVideoUploader,
    [ActionSheet.name]: ActionSheet,
    [CommentsSheet.name]: CommentsSheet,
    [QupuMap.name]: QupuMap,
    [Button.name]: Button
  },
  setup() {

    let {qs} = get_search_params();

    const activeCourses = ref<string[]>([])

    if (qs) {
      activeCourses.value.push(qs as string)
    }

    const state = reactive({pausing: '', replying: false, mark_id: ''})

    const get_qupu = (qs: CourseSection) => {
      let resource  = (qs.ref_resources || qs.resources)?.find(r => r.resource_type === RefResourceTypes.Picture);
      if (resource) {
        return { url: resource.resource_url, task: resource.tasks?.vals[0] }
      }
      return null
    }

    const get_videos = (qs: CourseSection) => {
      return (qs.ref_resources || qs.resources || []).filter(r => r.resource_type === RefResourceTypes.Video);
    }

    const get_audios = (qs: CourseSection) => {
      return (qs.ref_resources || qs.resources || []).filter(r => r.resource_type === RefResourceTypes.Audio);
    }

    const pause = (qs: CourseSection, {serial_no}: ResourceNote) => {
      state.pausing = serial_no;
      state.mark_id = qs.resource_note_group?.resource_notes?.find((x: ResourceNote) => x.serial_no === serial_no)?.id || '';
      state.replying = true;
    }


    return {activeCourses, get_qupu, get_videos, pause, state, get_audios}

  }
})
</script>

<style scoped lang="less">
.courses {
  padding: 8px;
  box-shadow: inset 0 0 3px 8px #f2f3f5;
  .course-row {

    background: transparent;


    .course-name {
      padding: 0.12rem 0.24rem;
      margin-bottom: 0.2rem;
    }

    .course-cate {
      display: flex;
      justify-content: space-between;
    }

    .course-resource {
      padding: 6px;

      .qupu-map-root {
        height: 4rem;
      }

      .divider {
        height: 1px;
        background-color: #f2f3f5;
      }
    }
  }
}
</style>
