<script setup lang="ts">
import type { CourseListItemType } from '../types'
import { useMapStore } from '@/stores/map'
import { topCourse } from '../api'
import { ElMessage } from 'element-plus'

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

const emit = defineEmits(['change'])

const route = useRoute()
let courseId = $ref<string>('')
watchEffect(() => {
  courseId = route.query.course_id as string
})

const mapStore = useMapStore()
// 选课类型
const electiveTypes = mapStore.getMapValuesByKey('system_elective_type')
// 选课类型文本
const electiveTypeText = computed(() => {
  return electiveTypes.find(item => parseInt(item.value) === props.data.elective_type)?.label || ''
})

// 是否选中
const isActive = computed(() => props.data.course_id === courseId)

// 跳转链接
const targetUrlQuery = computed(() => {
  let queryString = `course_id=${props.data.course_id}&semester_id=${props.data.semester_id}`
  if (props.data.section && props.data.section?.watch_video_length) {
    queryString += `&chapter_id=${props.data.section?.chapter_id ?? ''}&section_id=${props.data.section?.section_id ?? ''}&resource_id=${
      props.data.section?.resource_id ?? ''
    }`
  }

  return queryString
})
// 置顶
function handleTop(data: CourseListItemType) {
  topCourse({ id: data.id, status: data.is_top ? 0 : 1 }).then(() => {
    emit('change')
    ElMessage.success('操作成功')
  })
}
</script>

<template>
  <div class="course-item" :class="{ 'is-active': isActive, 'is-top': !!data.is_top }">
    <el-tooltip :content="!!data.is_top ? '取消置顶' : '置顶'">
      <div class="course-item__top" :class="{ 'is-active': !!data.is_top }" @click="handleTop(data)"></div>
    </el-tooltip>
    <router-link :to="`/course/view?${targetUrlQuery}`">
      <div class="course-item-bd">
        <div class="course-item-pic">
          <img :src="data.cover" /><span class="course-item__type">{{ electiveTypeText }}</span>
        </div>
        <div class="course-item-main">
          <h2 class="course-item__name">{{ data.course_alias_name || data.name }}</h2>
        </div>
      </div>
      <div class="course-item-progress">总进度<el-progress :stroke-width="4" :percentage="parseFloat(data.schedule)" /></div>
    </router-link>
    <div class="course-item-ft">
      <div class="course-item-playlist" v-if="data.section?.watch_video_length">
        <p class="t1">
          <el-tooltip :content="data.section.name">{{ data.section.name }}</el-tooltip>
        </p>
        <p class="t2">已观看{{ data.section.schedule }}%</p>
        <router-link :to="`/course/player?${targetUrlQuery}`" target="_blank">
          <el-button type="primary" round>点击观看</el-button>
        </router-link>
      </div>
      <p class="t3" v-else>尚未观看</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.course-item {
  position: relative;
  padding: 12px;
  margin: 14px 0;
  // border: 1px solid #e6e6e6;
  border-radius: 6px;
  background-color: #fafafa;
  &.is-top {
    // --el-border-color-lighter: #fff;
    // background: #eaeaea;
  }
  &:hover,
  &.is-active {
    --el-border-color-lighter: #fff;
    box-shadow: 0px 3px 12px 1px rgba(0, 0, 0, 0.1216);
    background: #fff;
  }
}
.course-item__top {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  background: url('@/assets/images/course_top.png') no-repeat;
  background-size: 16px;
  z-index: 100;
  cursor: pointer;
  &.is-active {
    display: block;
    background: url('@/assets/images/course_top_active.png') no-repeat;
    background-size: 16px;
  }
}
.course-item-bd {
  display: flex;
}
.course-item-pic {
  position: relative;
  width: 108px;
  height: 72px;
  border-radius: 4px;
  overflow: hidden;
  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .course-item__type {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 4px;
    font-size: 10px;
    line-height: 18px;
    color: #dbdbdb;
    background: rgba(0, 0, 0, 0.39);
    border-radius: 0px 4px 0px 4px;
  }
}
.course-item-main {
  flex: 1;
  margin-left: 6px;
  overflow: hidden;
  h2 {
    height: 60px;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
.course-item-progress {
  margin-top: 8px;
  display: flex;
  align-items: center;
  color: #999;
  font-size: 12px;
  :deep(.el-progress) {
    flex: 1;
    margin-left: 5px;
    .el-progress__text {
      font-size: 12px !important;
      min-width: unset;
    }
  }
}
.course-item-ft {
  margin-top: 8px;
  font-size: 12px;
  line-height: 20px;
  color: #535353;
  .t3 {
    color: #999;
  }
}
.course-item-playlist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f4f4f4;
  border-radius: 16px;
  .t1 {
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 10px;
  }
  .t2 {
    padding: 0 10px;
    white-space: nowrap;
  }
  .el-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

:deep(.el-progress-bar__outer) {
  background-color: #efefef;
}
</style>
