<!-- 资源课程列表 -->
<script setup lang="ts">
import type { CourseType } from '@/types'
interface Props {
  title: string
  list: CourseType[]
}
const props = withDefaults(defineProps<Props>(), { list: () => [] })

const listOptions = computed(() => {
  return {
    columns: [
      { label: '课程图片', slots: 'table-img', align: 'center', minWidth: '100' },
      { label: '课程名称', prop: 'name', align: 'center', minWidth: '100' },
      { label: '分类名称', prop: 'classification_name', align: 'center', minWidth: '200' },
      { label: '所在章', prop: 'big', align: 'center', minWidth: '200' },
      { label: '所在小节', prop: 'small', align: 'center' },
      { label: '创建日期', prop: 'created_time', align: 'center' },
      { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right' }
    ],
    data: props.list
  }
})
</script>

<template>
  <AppCard :title="title">
    <AppList v-bind="listOptions" ref="appList" stripe>
      <template #table-img="{ row }: { row: CourseType }">
        <img :src="row.cover" style="width: 100px" />
      </template>
      <template #table-operate="{ row }: { row: CourseType }">
        <router-link :to="`/course/my/view?id=${row.id}`" v-if="row.auth_view">
          <el-button style="color: #399ee8" type="primary" link>查看</el-button>
        </router-link>
      </template>
    </AppList>
  </AppCard>
</template>
