<script setup lang="ts">
import type { CollectionType, AllCourseType } from '../types'
import ResourceIcon from '@/components/ResourceIcon.vue'
import { Download } from '@element-plus/icons-vue'
import { saveAs } from 'file-saver'
import { getCollectionList, getCourseList, collectionResource } from '../api'

const tabs = $ref([
  { label: '全部', value: '' },
  { label: '视频', value: '2' },
  { label: '课件', value: '3' },
  { label: '教案', value: '4' },
  { label: '作业', value: '5' },
  { label: '帖子', value: '6' },
  { label: '其它资料', value: '1' }
])

// 收藏列表
const params = reactive({
  type: '',
  course_id: '',
  semester_id: ''
})
let list = $ref<CollectionType[]>([])
function fetchList() {
  getCollectionList(params).then(res => {
    list = res.data.items?.map((item: CollectionType) => {
      item.status = 1
      return item
    })
  })
}

// 所有课程列表
let courseList = $ref<AllCourseType[]>([])
const courseActive = $ref()
function fetchCourseList() {
  getCourseList().then(res => {
    courseList = res.data.items || []
  })
}
function handleCourseChange(data: AllCourseType) {
  params.course_id = data.course_id || ''
  params.semester_id = data.semester?.id || ''
  fetchList()
}
onMounted(() => {
  fetchList()
  fetchCourseList()
})

// 收藏/取消收藏
function toggleCollection(data: CollectionType) {
  collectionResource({
    course_id: data.course_id,
    semester_id: data.semester_id,
    chapter_id: data.chapter_id,
    section_id: data.section_id,
    source_id: data.source_id,
    type: data.type,
    status: data.status ? 0 : 1
  }).then(() => {
    data.status = data.status ? 0 : 1
  })
}
// 是否可以下载
function canDownload(type: number) {
  return [1, 3, 4, 5].includes(type)
}
// 下载资源
function downloadFile(data: CollectionType) {
  data.info.url && saveAs(data.info.url, data.info.name)
}
</script>

<template>
  <AppCard>
    <el-tabs v-model="params.type" @tab-change="fetchList">
      <el-tab-pane v-for="item in tabs" :label="item.label" :name="item.value" :key="item.value"></el-tab-pane>
    </el-tabs>
    <el-select v-model="courseActive" placeholder="所属课程" @change="handleCourseChange" clearable value-key="id">
      <el-option v-for="item in courseList" :key="item.id" :label="item.name" :value="item" />
    </el-select>
    <ul v-if="list.length">
      <li class="collection-item" v-for="item in list" :key="item.id">
        <p>
          <router-link
            :to="`/course/player?course_id=${item.course_id}&chapter_id=${item.chapter_id}&section_id=${item.section_id}&resource_id=${item.source_id}&semester_id=${item.semester_id}`"
            target="_blank"
          >
            <ResourceIcon :resourceType="item.type" />
            {{ item.info.name || item.info.paper_title }}
          </router-link>
        </p>
        <div class="actions">
          <i class="icon-star" :class="!!item.status ? 'is-active' : ''" @click="toggleCollection(item)"></i>
          <i class="icon-download" @click="downloadFile(item)" v-if="canDownload(item.type)"><Download /></i>
        </div>
      </li>
    </ul>
    <el-empty description="暂无数据" v-else />
  </AppCard>
</template>

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

  .actions {
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.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>
