<script setup lang="ts">
import type { CourseResourceType } from '../types'

import ResourceIcon from '@/components/ResourceIcon.vue'
import { Download } from '@element-plus/icons-vue'
import { saveAs } from 'file-saver'
import { collectionResource } from '../api'

import { useLog } from '@/composables/useLog'
const log = useLog()

const { query } = useRoute()
const courseId = $ref(query.course_id as string)
const chapterId = $ref(query.chapter_id as string)
const semesterId = $ref(query.semester_id as string)
const sectionId = $ref(query.section_id as string)

interface Props {
  data: CourseResourceType
}
const props = defineProps<Props>()

// 跳转链接
const targetUrl = computed(() => {
  const info = props.data.info || {}
  if (props.data.resource_type === 3 || props.data.resource_type === 9) {
    return `/course/exam?course_id=${courseId}&semester_id=${semesterId}&paper_id=${props.data.resource_id}&type=2&paper_title=${props.data.name}`
  } else if (props.data.resource_type === 6) {
    return info.join_url
  } else {
    return `/preview?course_id=${courseId}&semester_id=${semesterId}&resource_id=${props.data.resource_id}&resource_type=${props.data.resource_type}&url=${info.url}`
  }
})
// 是否可以收藏
function canCollection(type: number) {
  return [3, 4, 9, 10, 11].includes(type)
}
// 收藏/取消收藏
function toggleCollection(data: CourseResourceType) {
  // 资源类型: 1章节，2视频，3作业，4其他，6腾讯会议，9考试，10课件，11教案
  // 收藏类型: 1其他， 2视频，3课件，4教案，5作业，6帖子, 7课程资料
  collectionResource({
    course_id: courseId,
    semester_id: semesterId,
    chapter_id: chapterId,
    section_id: sectionId,
    source_id: data.resource_id,
    type: 7,
    status: data.collection_count ? 0 : 1
  }).then(() => {
    data.collection_count = data.collection_count ? 0 : 1
  })
}

// 是否可以下载
// function canDownload(type: number) {
//   // return [4, 10, 11].includes(type)
//   return [4].includes(type)
// }
// 下载资源
function downloadFile(data: CourseResourceType) {
  const { url, name } = data.info
  const urlExtensionName = url?.split('.').pop()
  const nameExtensionName = name?.split('.').pop()
  const filename = nameExtensionName === urlExtensionName ? name : `${name}.${urlExtensionName}`
  url && saveAs(url, filename)

  // 日志上送
  log.upload({
    event: 'file_event',
    action: 'stu_download_file_action',
    data: {
      course_id: courseId,
      resource_id: data.info.id,
      resource_type: data.resource_type,
      download_time: Math.floor(Date.now() / 1000),
      download_name: name,
      download_size: data.info.size
    }
  })
}
</script>

<template>
  <div class="course-resource-item">
    <p>
      <a :href="targetUrl" target="_blank">
        <ResourceIcon :resourceType="data.resource_type" :info="data.info" />
        {{ data.info.name }}
      </a>
    </p>
    <div class="actions">
      <i
        class="icon-star"
        :class="!!data.collection_count ? 'is-active' : ''"
        @click="toggleCollection(data)"
        v-if="canCollection(data.resource_type)"
      ></i>
      <i class="icon-download" @click="downloadFile(data)" v-if="!!data.can_download"><Download /></i>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.course-resource-item {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  border-bottom: 1px solid #e6e6e6;
  p {
    flex: 1;
    line-height: 48px;
  }
  &:hover {
    color: var(--main-color);
  }

  .actions {
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:empty {
      min-width: auto;
    }
  }
}
.icon-star {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(@/assets/images/icon_star.png) no-repeat;
  background-size: contain;
  cursor: pointer;
  &.is-active {
    background: url(@/assets/images/icon_star_hover.png) no-repeat;
    background-size: contain;
  }
}
.icon-download {
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
</style>
