<script setup lang="ts">
interface Props {
  resourceType?: number
  info?: any
}
const props = defineProps<Props>()

function show(fileType: string) {
  const type = props.info?.type || ''
  if (typeof type === 'string') type.includes(fileType)
  return false
}
</script>

<template>
  <div class="icon-resource">
    <img src="@/assets/images/icon_mp4.png" v-if="resourceType === 2" />
    <img src="@/assets/images/icon_work.png" v-else-if="resourceType === 3 || resourceType === 12" />
    <img src="@/assets/images/icon_live.png" v-else-if="resourceType === 6" />
    <img src="@/assets/images/icon_exam.png" v-else-if="resourceType === 9" />
    <img src="@/assets/images/icon_ppt.png" v-else-if="show('pptx')" />
    <img src="@/assets/images/icon_xls.png" v-else-if="show('xlsx')" />
    <img src="@/assets/images/icon_mp3.png" v-else-if="show('mp3')" />
    <img src="@/assets/images/icon_jpg.png" v-else-if="show('jpg')" />
    <img src="@/assets/images/icon_png.png" v-else-if="show('png')" />
    <img src="@/assets/images/icon_pdf.png" v-else-if="show('pdf')" />
    <img src="@/assets/images/icon_doc.png" v-else />
  </div>
</template>

<style lang="scss">
.icon-resource {
  display: inline-block;
  img {
    margin-right: 10px;
    width: 16px;
  }
}
</style>
