<script setup lang="ts">
import { checkPermission } from '@/utils/permission'
import { ElMessage } from 'element-plus'

const prop = defineProps({
  data: {
    type: Array,
    default: () => []
  }
})

const router = useRouter()

const listOptions = {
  columns: [
    { label: '排名', slots: 'table-ranking', align: 'center' },
    { label: '关联使用', slots: 'table-relation', align: 'center' },
    { label: '资源名称', prop: 'name', align: 'center' },
    { label: '资源类型', slots: 'table-type', align: 'center' },
    { label: '所在部门', prop: 'organ_id_name', align: 'center' },
    { label: '更新人', prop: 'created_operator_name', align: 'center' },
    { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right' }
  ],
  data: prop.data.map((item: any) => {
    item.name = `${item.name.slice(0, 10)}...`
    return item
  })
}

const resourceType = (name: string, isGetPath: number) => {
  let path = {}
  if (isGetPath === 1) {
    path = {
      视频: '/resource/video/view',
      课件: '/resource/courseware/view',
      教案: '/resource/lessonplan/view',
      其他资料: '/resource/other/view'
    }
  } else if (isGetPath === 2) {
    path = {
      视频: 1,
      课件: 2,
      教案: 3,
      其他资料: 4
    }
  } else {
    path = {
      视频: 'v1-resource-video-view',
      课件: 'v1-resource-courseware-view',
      教案: 'v1-resource-lesson-plan-view',
      其他资料: 'v1-resource-other-information-view'
    }
  }
  return path[name]
}

const viewDetails = (row: { id: string; resource_type: string }) => {
  if (checkPermission(resourceType(row.resource_type, 3))) {
    router.push({
      path: resourceType(row.resource_type, 1),
      query: {
        id: row.id
      }
    })
  } else {
    ElMessage('暂无权限查阅')
  }
}
</script>
<template>
  <AppList v-bind="listOptions" ref="appList" border stripe>
    <template #table-ranking="{ row }">
      <div :class="`table-ranking active${row.index}`">{{ row.index <= 3 ? '' : row.index }}</div>
    </template>
    <template #table-relation="{ row }">
      <div :class="`table-relation active${row.index}`">{{ row.nums }}<span>次</span></div>
    </template>
    <template #table-type="{ row }">
      <div :class="`table-type active${resourceType(row.resource_type, 2)}`">{{ row.resource_type }}</div>
    </template>
    <template #table-operate="{ row }">
      <el-button @click="viewDetails(row)" style="color: #399ee8" type="primary" link v-if="row.auth_view"
        >查阅</el-button
      >
    </template>
  </AppList>
</template>
<style lang="scss">
.table-ranking {
  font-size: 14px;
  color: #666666;
  margin: 0 auto;
  &.active1 {
    width: 20px;
    height: 26px;
    background: url(/center_resource/home-ranking1.png);
  }
  &.active2 {
    width: 20px;
    height: 26px;
    background: url(/center_resource/home-ranking2.png);
  }
  &.active3 {
    width: 20px;
    height: 26px;
    background: url(/center_resource/home-ranking3.png);
  }
}
.table-type {
  width: 84px;
  line-height: 28px;
  border-radius: 14px;
  text-align: center;
  font-size: 14px;
  margin: 0 auto;
  &.active1 {
    background: #faedf1;
    color: #aa1941;
  }
  &.active2 {
    background: #f5ebda;
    color: #ba8b45;
  }
  &.active3 {
    background: #e9eaf8;
    color: #5b61b5;
  }
  &.active4 {
    background: #dfeff2;
    color: #47a7b9;
  }
  &.active5 {
    background: #faeee2;
    color: #ce893f;
  }
}
.table-relation {
  font-size: 14px;
  span {
    color: #666666;
  }
  &.active1 {
    color: #aa1941;
  }
  &.active2 {
    color: #ba8b45;
  }
  &.active3 {
    color: #5b61b5;
  }
  &.active4 {
    color: #47a7b9;
  }
  &.active5 {
    color: #ce893f;
  }
}
</style>
