<template>
  <a-card title="资源管理" >
    <a-row justify="start" >
      <a-col>
        <a-space>
          <a-input placeholder="根据用户名称搜索" allowClear v-model:value="queryState.userLabel" ></a-input>
          <a-button type="primary" @click="getUserList">搜索</a-button>
        </a-space>
      </a-col>
    </a-row>
    <a-table
      style="margin-top: 20px;"
      :columns="columns"
      :data-source="state.dataSource"
      :loading="state.loading"
      :pagination="queryState"
      @change="changePage"
    >
    </a-table>
  </a-card>
</template>
<script lang='ts' setup >
import { UserController } from '@/controller'
import { reactive, onMounted } from 'vue'

const columns = [
  {
    title: '资源id',
    dataIndex: 'id'
  },
  {
    title: '资源名称',
    dataIndex: 'label',
    key: 'label'
  },
  {
    title: '资源描述',
    dataIndex: 'description'
  },
  {
    title: '资源路径',
    dataIndex: 'path'
  }
]

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

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

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

const getResourcPage = async () => {
  state.loading = true
  const { data, sum } = await UserController.resourcePage(queryState)
  state.dataSource = data
  state.loading = false
  queryState.total = sum
}
onMounted(() => {
  getResourcPage()
})

</script>
<style lang='less' scoped >
</style>
