<template>
  <div>
    <div class="gap10">
      <div class="line_vertical"></div>
      <div class="font_size20 bold">{{$t('common.qitakechengtuijian')}}</div>
    </div>
    <div v-for="item in list" :key="item.courseId" class="flex-between mt20">
      <img :src="item.coverImageUrl" alt="" style="width: 160px; height: 90px;" class="border_radius_8">
      <div class="ml10 flex_1">
        <div class="font_size16 bold line1">{{ item.courseTitle }}</div>
         <el-button type="primary" size="mini" plain class="mt5" v-if="item.skillTagName">{{item.skillTagName}}</el-button>
        <div class="font_size12 gray mt5">{{ item.viewCount }} {{ $t('common.renkanguo') }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { getCourseList } from '@/api/course.js'
import { ref, onMounted } from 'vue'

const list = ref([]);
onMounted(() => {
  getList();
});
const getList = async (type) => {
  const res = await getCourseList({
    pageNum: 1,
    pageSize: 5,
  })
  if(res.code === 200){
    list.value = res.rows || [];
  }
};
</script>
<style scoped>

</style>
