<template>
    <div class="lianxis" v-if="total > 0">
        <van-collapse v-model="activeLianxis">
            <van-collapse-item :name="course.id" v-for="course in movements" value-class="lianxi-stats">
                <template #title>
                    <van-tag type="primary" size="medium">{{ course.course_name }}({{ course.section_name }})</van-tag>
                </template>
                <template #value>
                    <strong class="text-primary">{{course.lianxis?.length}}</strong>个练习
                    <template v-if="course.lianxis?.length">
                        <strong :class="{'text-danger': course.not_piyue_count, 'text-success': !course.not_piyue_count}">{{course.not_piyue_count}}</strong>个未批阅
                    </template>
                </template>
                <div class="lianxi" :class="{'van-hairline--bottom lianxi-divider': index < course.lianxis.length - 1}" v-if="course.lianxis?.length" v-for="(lianxi, index) in sorted(course.lianxis)">
                    <div class="lianxi-line">
                        <strong style="color: #4fc08d;">{{ datetime(lianxi.created_at) }}</strong>
                        <span class="line-body">
                          <span class="line-center">
                            <score-show v-if="!lianxi.creator_name" :scores="lianxi.scores"></score-show>
                            <span v-else-if="lianxi.piyue?.id">
                              <van-icon size="10" v-for="n in lianxi.piyue.rating.stars" name="star" color="gold" />
                            </span>
                          </span>
                          <span class="line-tail">
                            <van-tag v-if="lianxi.piyue?.id" type="success" @click="$emit('piyue', lianxi)">
                              已批阅
                              <van-icon name="description" size="12" color="#fff"></van-icon>
                            </van-tag>
                            <template v-else>
                              <van-tag v-if="!removable" type="danger" @click="$emit('piyue', lianxi)">
                                未批阅
                                <van-icon name="records" size="12" color="#fff"></van-icon>
                              </van-tag>
                              <van-tag v-else type="danger">未批阅</van-tag>
                            </template>
                            <van-icon v-if="!lianxi.piyue && removable && is_author(lianxi.created_by)" name="delete" size="20" color="#ee0a24" @click="$emit('remove', lianxi)"></van-icon>
                          </span>
                        </span>
                    </div>
                    <div class="lianxi-line" v-if="lianxi.creator_name">
                      <span>学生：{{lianxi.creator_name}}</span>
                      <score-show v-if="lianxi.scores?.length && lianxi.video?.resource_url" :target="lianxi.video?.resource_url" :horizontal="true" :scores="lianxi.scores"></score-show>
                      <i v-else-if="!lianxi.video" class="text-gray">没有视频</i>
                    </div>
                    <div class="lianxi-line double" v-if="lianxi.text_question">
                      <div>学生留言：</div>
                      <div class="text-area" v-if="lianxi.text_question">{{ lianxi.text_question }}</div>
                    </div>
                    <div class="lianxi-line double" v-if="lianxi.piyue">
                      <span>批阅老师：</span>
                      <span>{{lianxi.piyue.teacher_name}}</span>
                    </div>
                    <div class="lianxi-line double" v-if="lianxi.video">
                        <hty-video :downloadable="removable && is_author(lianxi.created_by)" :src="lianxi.video.resource_url" />
                    </div>
                    <div class="lianxi-line"  v-if="lianxi.audio">
                        <div class="audio-area">
                            <span>练习录音</span>
                            <audio-play @click="play_audio(lianxi)" :playing="playing === lianxi.id"></audio-play>
                            <score-show v-if="lianxi.scores?.length && lianxi.audio?.resource_url" :target="lianxi.audio?.resource_url" :horizontal="true" :scores="lianxi.scores"></score-show>
                            <i class="text-gray" v-else>没有打分</i>
                        </div>
                    </div>
                    <div class="lianxi-line double" v-if="lianxi.qupu">
                        <div>
                          <hty-image :url="lianxi.qupu.resource_url" :task="lianxi.qupu?.tasks?.vals[0]" />
                        </div>
                    </div>
                </div>  
            </van-collapse-item>
        </van-collapse>
    </div>    
    <van-empty v-else description="还没有提交练习" />
</template>
<script lang="ts">
import {computed, defineComponent, ref} from 'vue';
import {Lianxi} from "~/types";
import {Empty, Icon, Tag, Collapse, CollapseItem} from 'vant';
import useAudio from "~/store/audio";
import AudioPlay from '~/components/audio-play.vue';
import HtyImage from '~/components/hty-image.vue'
import HtyVideo from '~/components/hty-video.vue'
import ScoreShow from '~/components/score-show.vue';
import {DateFormatter, formatDate} from "~/utils";
import useUser from '~/store/user';

export default defineComponent({
    name: "lianxi-group",
    components: {
        [Collapse.name]: Collapse,
        [CollapseItem.name]: CollapseItem,
        [Tag.name]: Tag,
        [Empty.name]: Empty,
        [Icon.name]: Icon,
        [AudioPlay.name]: AudioPlay,
        [HtyImage.name]: HtyImage,
        [HtyVideo.name]: HtyVideo,
        [ScoreShow.name]: ScoreShow
    },
    props: ["total", "movements", "removable"],
    emits: ["remove", "piyue"],
    setup() {
        const usingAudio = useAudio();
        const usingUser = useUser();

        const activeLianxis = ref([])
        const datetime = (time: string | Date) => formatDate(time, DateFormatter.DateTime)
        
        const playing = computed(() => usingAudio.store.target)
        const play_audio = ({id, audio}: Lianxi) => {
            if (playing.value === id) {
                usingAudio.stop();
            } else {
              if (audio?.tasks?.vals) {
                let media_id = audio?.tasks?.vals[0]?.task_meta?.media_id
                usingAudio.play({target: id, audio_url: audio?.resource_url, serverId: media_id})
              }
            }
        }

        const sorted = (list: Lianxi[]) => [...list].sort((a, b) => new Date(b.created_at).valueOf() - new Date(a.created_at).valueOf())

        const is_author = (user_id: string) => !user_id || user_id === usingUser.store.current.hty_id;

        return {
            datetime, play_audio, playing, activeLianxis, sorted, is_author
        }
    }
})
</script>
<style lang="less">


.lianxis {
    box-shadow: inset 0 0 3px 8px #f2f3f5;
    padding: 8px;

    .lianxi-stats {
        font-size: 0.24rem;
    }

    .course-right {
        display: inline-flex;
        align-items: center;

        span:first-child {
        margin-right: 5px;
        font-size: 0.2rem;
        }
    }

    :deep(.van-collapse-item__content) {
        padding: var(--van-padding-sm) var(--van-padding-sm);
    }

    .lianxi {

      &.lianxi-divider::after {
        border-color: #79cbe5;
        border-bottom-width: 2px;
      }

        &.hide {
          display: none;
        }

        &:first-child {
          .lianxi-line:first-child {
              padding-top: 0;
          }
        }

        .lianxi-line {
          padding: 0.2rem 0;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          &:not(:last-child) {
              border-bottom: 0.02rem dashed var(--van-border-color);
          }

          .line-body {
            display: inline-flex;
            align-items: center;

            .line-center {
              margin-right: 6px;
            }
          }

          .line-tail {
            display: inline-flex;
            align-items: center;
          }

          .audio-area {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }


          &.double {
              display: block;

              .audio-area {
                margin-bottom: 0.1rem;
              }

              .lianxi-line-label {
              margin-bottom: 0.1rem;
              }
          }

          .text-area {
              background: #e9ecef;
              font-size: 12px;
              width: 100%;
              padding: 0.125rem 0.25rem;
              background-clip: padding-box;
              border-radius: 0.125rem;
          }
        }
    }
}
</style>
