<template>
  <div class="container">
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'subject' }">专题资源</el-breadcrumb-item>
        <el-breadcrumb-item>{{ catalogName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="sub-subject-top">
      <img src="@/assets/images/subject.png" />
      <div class="sub-subject-top-right">
        <div class="title">{{ catalogName }}</div>
        <div class="more">创建时间：{{ createTime }}</div>
        <div class="more">资源数据：{{ resourceNum }}个</div>
      </div>
    </div>

    <el-row :gutter="10" style="margin-top: 10px;">
      <el-col :span="6">
        <el-card>
          <template #header>
            <div class="card--left-header">
              <span class="title">目录</span>
            </div>
          </template>

          <el-table @row-click="handleRowClick" :data="tableData" row-key="id" border default-expand-all
            :show-header="false">
            <el-table-column prop="label" label="label" />
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="18">
        <el-card>
          <template #header>
            <div class="card-right-header">
              <!-- 排序组件 -->
              <JzSort v-model="sortResult" :sortData="sortData" />
              <div class="header-search">
                <el-input v-model="queryParams.fileName" style="width: 300px" placeholder="请输入关键词" clearable
                  @clear="handleClear" />
                <el-button type="primary" :icon="Search" @click="handleQuery" />
              </div>
            </div>
          </template>


          <div class="book-grid">
            <el-card v-for="item in resourceList" @click="goto(item)">
              <div class="book-content">
                <img class="file-type" src="@/assets/images/word.png" alt="">
                <img src="@/assets/images/book.png" alt="">
              </div>

              <template #footer>
                <div class="book-title">{{ item.fileName }}</div>
                <div class="book-des">
                  <div class="book-teacher">
                    <span>{{ item.createBy }}</span>&nbsp;|&nbsp;<span>{{ item.createDept }}</span>
                  </div>
                  <div class="book-view">
                    <span>
                      <el-icon>
                        <View />
                      </el-icon>
                    </span>
                    <span>204</span>
                  </div>
                </div>
              </template>
            </el-card>
          </div>
          <el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="total"
            @current-change="handleCurrentChange" @size-change="handleSizeChange" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { View, Search } from '@element-plus/icons-vue'
import { getTreeList, getResourceList } from '@/apis/catalogResource'
import JzSort from '@/components/JzSort/index.vue'

const router = useRouter()
const route = useRoute()
const catalogId = route.query.catalogId
const catalogName = route.query.catalogName
const createTime = route.query.createTime
const resourceNum = route.query.resourceNum || 0

const queryParams = ref({
  catalogId: catalogId,
  fileName: '',
  pageNum: 1,
  pageSize: 6,
  orderByColumn: '',
  isAsc: ''
})

// 排序初始化数据
const sortData = [
  { label: '上传时间', key: 'createTime' },
  { label: '浏览量', key: 'previewNum' },
  { label: '下载量', key: 'downloadNum' }
];
const sortResult = ref({}); // 排序结果

const tableData = ref([])
const getTreeListData = async () => {
  const res = await getTreeList({ parentId: catalogId })
  tableData.value = res.data

  console.log(tableData.value);
}

const resourceList = ref([])
const total = ref(0)
const getResourceListData = async () => {
  const res = await getResourceList(queryParams.value)
  resourceList.value = res.rows
  total.value = res.total
}

const handleRowClick = (val) => {
  queryParams.value.catalogId = val.id
}

const handleQuery = () => {
  if (!queryParams.value.fileName) {
    ElMessage.error('请输入查询关键字！')
    return
  }
  getResourceListData()
}

const handleClear = () => {
  queryParams.value.fileName = ''
  getResourceListData()
}

onMounted(() => {
  getTreeListData()
  getResourceListData()
})

const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val
  getResourceListData()
}

const handleSizeChange = (val) => {
  queryParams.value.pageSize = val
  getResourceListData()
}


// 监听排序结果
watchEffect(() => {
  queryParams.value.orderByColumn = sortResult.value.key
  queryParams.value.isAsc = sortResult.value.order

  getResourceListData()
})

const goto = (item) => {
  router.push({ path: 'subjectDetail', query: { id: item.id } })
}
</script>

<style lang="scss" scoped>
.container {
  .title {
    font-size: 20px;
    font-weight: bold;
  }

  .more {
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 15px;
    color: #8A8178;
  }

  .bread-container {
    padding: 25px 0;

    :deep(.el-breadcrumb__inner) {
      color: #fff;
      font-size: 16px;
    }

    :deep(.el-breadcrumb__separator) {
      color: #fff;
    }
  }

  .sub-subject-top {
    margin-top: 10px;
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: #E4F2F9;
    border-radius: 10px;

    img {
      margin: 10px 20px 10px 20px;
      border-radius: 5px;
    }
  }

  .card--left-header {
    .title {
      font-size: 20px;
    }
  }

  .card-right-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #919DA3;
  }

  .book-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 7px;

    .book-content {
      position: relative;

      .file-type {
        position: absolute;
        top: 0;
        left: 0;
        width: 25px;
      }
    }

    .book-title {
      font-size: 16px;
      font-weight: bold;
    }

    .book-des {
      display: flex;
      justify-content: space-between;
      color: #919DA3;
      padding: 5px 0;
    }
  }

  .book-page {
    margin-top: 20px;
    display: flex;
    justify-content: end
  }
}
</style>