<script setup>
import {computed, onMounted, ref} from "vue";
import axios from "axios";

const columns = [
  {
    name: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    name: '性别',
    dataIndex: 'gender',
    key: 'gender',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '邮箱',
    key: 'email',
    dataIndex: 'email',
  },
  {
    title: '薪资',
    key: 'salary',
    dataIndex: 'salary',
  },
  {
    title: '操作',
    key: 'action',
  },
];

const data = ref([]);


// pagination
const current = ref(1)
const pageSize = ref(8)
const total = ref(0)
const pagination = computed(() => ({
  total: total.value,
  current: current.value,
  pageSize: pageSize.value,
}));


// load data
const loadTableData = () => {
  const params = {
    page: current.value,
    size: pageSize.value,
  }
  axios({
    method: "get",
    url: "http://127.0.0.1:8889/zdppy_amuserdetail",
    params: params
  }).then((response) => {
    console.log("response.data", response.data);
    const responseData = response.data.data
    console.log("responseData=", responseData)
    data.value = responseData.results;
    total.value = responseData.count;
  })
}

// handle pagination change
const handleTableChange = (pag, filters, sorter) => {
  console.log(pag, filters, sorter)
  current.value = pag.current
  pageSize.value = pag.pageSize
  loadTableData()
};

onMounted(() => {
  loadTableData()
})
</script>

<template>
  <a-table
      :columns="columns"
      :data-source="data"
      :row-key="record => record.id"
      :pagination="pagination"
      @change="handleTableChange"
  >
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          {{ column.name }}
        </span>
      </template>
      <template v-else-if="column.key === 'gender'">
        <span>
          {{ column.name }}
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <a-space wrap>
          <a-button size="small" type="primary" block>编辑</a-button>
          <a-button size="small" block>详情</a-button>
          <a-button size="small" danger block>删除</a-button>
        </a-space>
      </template>
    </template>
  </a-table>
</template>