<script setup lang="ts">
import { getCourseList } from '../api'
import CardListItem from '../components/CardListItem.vue'
import { PictureFilled } from '@element-plus/icons-vue'
import { useProjectList } from '@/composables/useGetProjectList'
import { useUserStore } from '@/stores/user'

// 统计资源数据整合
import Statistics from '../components/Statistics.vue'

// 判断当前用户是不是超级管理员
const user = useUserStore().roles
const isAdmin = !!user.find((item: any) => item.name === '超级管理员')

// 筛选部门列表
const departmentList: any = useProjectList('', '79806610719731712').departmentList

// 资源出处 tab触发
const tabValue = ref('1')
const appList = ref()
const tabChange = () => {
  appList.value.refetch()
}

// 列表切换
let isCard = $ref(true)

// table 数据
const listOptions = computed(() => {
  const columns = [
    {
      label: '课程标题',
      prop: 'name',
      align: 'center',
      computed({ row }: any) {
        return row.name?.length > 10 ? `${row.name.slice(0, 10)}...` : row.name
      }
    },
    { label: '课程分类', prop: 'classification_name', align: 'center' },
    { label: '封面', slots: 'table-cover', width: 150, align: 'center' },
    { label: '资源状态', prop: 'status_name', align: 'center' },
    { label: '审核状态', prop: 'audit_status_name', align: 'center' },
    { label: '更新人', prop: 'updated_operator_name', align: 'center' },
    { label: '更新人部门', prop: 'organ_id_name', align: 'center' },
    { label: '更新日期', prop: 'updated_time', align: 'center' },
    { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' }
  ]
  if (tabValue.value === '2') {
    columns.splice(2, 0, { label: '部门共享', prop: 'department_public_name', align: 'center' })
  }
  if (tabValue.value === '3') {
    columns.splice(2, 0, { label: '平台共享', prop: 'platform_public_name', align: 'center' })
  }
  return {
    remote: {
      httpRequest: getCourseList,
      params: { tab: tabValue, status: '', authorized: '', name: '' }
    },
    filters: [
      { type: 'input', prop: 'name', label: '名称：' },
      {
        prop: 'authorized',
        slots: 'filter-department'
      }
    ],
    columns
  }
})

const typeFilter = () => {
  appList.value.refetch()
}

const changeCard = () => {
  isCard = !isCard
}
</script>

<template>
  <AppCard title="课程统计">
    <Statistics></Statistics>
  </AppCard>
  <AppCard>
    <div class="video-head">
      <el-tabs @tab-change="tabChange" v-model="tabValue">
        <el-tab-pane label="我的课程" name="1"></el-tab-pane>
        <el-tab-pane label="部门课程" name="2"></el-tab-pane>
        <el-tab-pane label="公开课程" name="3"></el-tab-pane>
      </el-tabs>
      <div class="video-head-icon" @click="changeCard">
        <img v-if="!isCard" src="/center_resource/change_card.png" alt="" />
        <img v-else src="/center_resource/change_list.png" alt="" />
      </div>
    </div>
    <div class="video-tool-btn">
      <router-link v-if="tabValue === '1'" to="/course/update-course">
        <el-button type="primary" round>新建课程</el-button>
      </router-link>
    </div>
    <AppList v-bind="listOptions" ref="appList">
      <template #header-aside></template>
      <template #table-cover="{ row }">
        <div style="background: #ccc">
          <el-icon :size="50" color="#fff" v-if="row.cover == ''">
            <PictureFilled></PictureFilled>
          </el-icon>
          <div
            v-else
            :style="`width: 150px;
              display: block;
              height: 83px;
              background-size: cover;
              background-image: url(${row.cover});`"></div>
        </div>
      </template>
      <template v-if="tabValue == '3' && isAdmin" #filter-department="{ params }">
        <div class="name" style="font-size: 14px; color: #606266; padding-right: 12px">部门：</div>
        <el-select @change="typeFilter" clearable v-model="params.authorized">
          <el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </template>
      <template #table-operate="{ row }">
        <el-space>
          <router-link v-if="row.auth_edit" :to="`/course/update-course?id=${row.id}`">
            <el-button plain>编辑</el-button>
          </router-link>
          <router-link v-permission="'v1-resource-video-view'" :to="`/course/my/view?id=${row.id}`">
            <el-button type="primary" plain>查看</el-button>
          </router-link>
        </el-space>
      </template>

      <!-- 卡片 -->
      <template #body="{ data }" v-if="isCard">
        <div class="card-list" v-if="data.length">
          <CardListItem :tabIndex="tabValue" v-for="(item, index) in data" :data="item" :key="index"></CardListItem>
        </div>
        <el-empty v-if="appList?.loading" description="加载中..." />
        <el-empty v-if="data.length === 0 && !appList?.loading" description="暂无数据" />
      </template>
    </AppList>
  </AppCard>
</template>
<style lang="scss" scoped>
.card-list {
  background: #fafafa;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}
.video-head {
  position: relative;
  .video-head-icon {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 30px;
    color: #666;
    cursor: pointer;
  }
}
.video-tool-btn {
  padding: 10px 0 30px 0;
}
</style>
