<template>
  <div id="mediaLibraryApp">
    <TableComponent
      :columns="columns"
      :searchColumns="searchColumns"
      :getData="getData"
    />
  </div>
</template>

<script setup>
import TableComponent from './TableComponent.vue';
import { getmediaList } from "@/store/case";
import { ref } from 'vue';
import { ui18n } from '@/i18n'

// 模拟接口数据
const mockData = [
  { id: 1, name: 'John', age: 20 },
  { id: 2, name: 'Jane', age: 25 },
  { id: 3, name: 'Bob', age: 30 },
  // 更多数据...
];

// 定义表格列
const columns = [
  // { prop: 'name', label: '名称', width: 150, },
  { prop: 'fileTypeStr', label: ui18n.t('mediaLibrary.fileTypeStr'),  },
  { prop: 'fileFormat', label: ui18n.t('mediaLibrary.fileFormat'), },
  { prop: 'dictName', label: ui18n.t('mediaLibrary.dictName'), },
  { prop: 'statusStr', label: ui18n.t('mediaLibrary.statusStr'), },
  { prop: 'createTime', label: ui18n.t('mediaLibrary.createTime'), width: 200, },
];

// 定义搜索列
const searchColumns = ref([
]);

// 获取数据的函数
const getData = async (params) => {
  // 这里可以调用后端接口获取数据
  const res =  await getmediaList(params)
  return { list: res.list, totalCount: res.total }
  // .then(res => {
  //   searchColumns.value = res.list
  //   const totalCount = res.total;
  //   return { list, totalCount };
  // });
};
</script>

<style scoped>
#mediaLibraryApp {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  /* color: #2c3e50; */
  width: 100%;
  padding: 20px;
  background-color: #292929;
}
</style>