<template>
  <div class="library-stack-container">
  
    测试啊
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

// 定义数据类型
interface SearchForm {
  name: string;
  status: string;
}

interface TableItem {
  id: number;
  name: string;
  bookCount: number;
  createdTime: string;
  status: string;
}

// 搜索表单
const searchForm = reactive<SearchForm>({
  name: '',
  status: ''
})

// 表格数据
const tableData = ref<TableItem[]>([
  {
    id: 1,
    name: '主要书库',
    bookCount: 1250,
    createdTime: '2023-08-15',
    status: 'normal'
  },
  {
    id: 2,
    name: '历史文献',
    bookCount: 850,
    createdTime: '2023-08-16',
    status: 'normal'
  },
  {
    id: 3,
    name: '科技资料',
    bookCount: 620,
    createdTime: '2023-08-17',
    status: 'disabled'
  }
])

// 加载状态
const loading = ref(false)

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 生命周期钩子
onMounted(() => {
  // 初始化数据，可以调用API获取数据
  // fetchData()
})

// 搜索方法
const handleSearch = () => {
  console.log('搜索条件:', searchForm)
  currentPage.value = 1
  // fetchData()
}

// 重置搜索
const resetSearch = () => {
  searchForm.name = '';
  searchForm.status = '';
  currentPage.value = 1
  // fetchData()
}

// 编辑
const handleEdit = (row: TableItem) => {
  console.log('编辑', row)
}

// 查看
const handleView = (row: TableItem) => {
  console.log('查看', row)
}

// 删除
const handleDelete = (row: TableItem) => {
  console.log('删除', row)
  // 可以调用删除API
}

// 分页大小变化
const handleSizeChange = (val: number) => {
  pageSize.value = val
  // fetchData()
}

// 页码变化
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // fetchData()
}

// 获取数据方法(实际项目中可以调用API)
/*
const fetchData = async () => {
  loading.value = true
  try {
    // 调用API获取数据
    // const res = await api.getLibraryList({
    //   page: currentPage.value,
    //   pageSize: pageSize.value,
    //   ...searchForm
    // })
    // tableData.value = res.data.list
    // total.value = res.data.total
  } catch (error) {
    console.error('获取数据失败', error)
  } finally {
    loading.value = false
  }
}
*/
</script>

<style scoped lang="scss">
.library-stack-container {
  padding: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .search-container {
    margin-bottom: 20px;
  }

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