<template>
<a-card title="数据源管理" >

  <a-row>
    <a-col></a-col>
  </a-row>

  <a-table
      style="margin-top: 10px;"
      :columns="columns"
      :data-source="state.dataSource"
      :loading="state.loading"
      :pagination="queryState"
      @change="changePage"
    >
    <template #bodyCell="{column, record}">
        <template v-if="column.key === 'action'" >
        </template>
    </template>
  </a-table>
</a-card>
</template>
<script lang='ts' setup >
import { DataSourceController } from '@/controller'
import { reactive, onMounted } from 'vue'

const columns = [
  {
    title: '名称',
    dataIndex: 'title'
  },
  {
    title: '类型',
    dataIndex: 'type'
  },
  {
    title: '描述',
    dataIndex: 'desc'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const queryState = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})

const state = reactive({
  loading: false,
  dataSource: []
})

const changePage = ({ current }) => {
  queryState.page = current
  getDataSource()
}

const getDataSource = async () => {
  state.loading = true
  const { data } = await DataSourceController.page(queryState)
  state.loading = false
  state.dataSource = data
}

onMounted(() => {
  // getDataSource()
})
</script>
<style lang='less' scoped >
</style>
