<script setup lang="ts">
import { useStorage } from '@vueuse/core'
import { getCourseList } from '../api'
import CardListItem from '@/components/base/CardListItem.vue'
import { useMapStore } from '@/stores/map'
import { useGetCategoryList } from '@/composables/useGetCategoryList'
import { useProjectList } from '@/composables/useGetProjectList'
import { useUserStore } from '@/stores/user'

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

const store = useMapStore()

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

// 下拉选择tree 视频分类
let { list: selectTree }: any = useGetCategoryList()
const defaultProps = {
  children: 'children',
  label: 'category_name',
  value: 'id',
}

const appList = ref()

// 列表切换
const isCard = useStorage('isCard', true)
const changeCard = () => {
  isCard.value = !isCard.value
}

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

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: '知识点', prop: 'knowledge_points', 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: 'select',
        prop: 'status',
        label: '状态：',
        options: store.getMapValuesByKey('system_status'),
      },
      { prop: 'classification', label: '类别：', slots: 'filter-type' },
      { type: 'input', prop: 'name', label: '标题：' },
      {
        prop: 'authorized',
        slots: 'filter-department',
      },
    ],
    columns,
  }
})

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

<template>
  <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'"
        v-permission="'v1-resource-courseware-create'"
        to="/resource/courseware/update">
        <el-button type="primary" round>新建课件资源</el-button>
      </router-link>
    </div>
    <AppList v-bind="listOptions" ref="appList">
      <template #header-aside></template>
      <template #filter-type="{ params }">
        <el-tree-select
          node-key="id"
          @change="typeFilter"
          clearable
          :props="defaultProps"
          v-model="params.classification"
          :data="selectTree"
          :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []" />
      </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="`/resource/courseware/update/?id=${row.id}`">
            <el-button plain>编辑</el-button>
          </router-link>
          <router-link v-permission="'v1-resource-courseware-view'" :to="`/resource/courseware/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
            :permission="{ edit: 'v1-resource-courseware-update', view: 'v1-resource-courseware-view' }"
            path="/resource/courseware"
            v-for="(item, index) in data"
            :data="item"
            :key="index"
            :tabIndex="tabValue"></CardListItem>
        </div>
        <!-- <el-empty v-else description="暂无数据" /> -->
      </template>
    </AppList>
  </AppCard>
</template>
<style lang="scss" scoped>
.card-list {
  background: #fafafa;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  padding: 20px;
}
.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>
