<template>
    <div class="employee-list">
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :pagination="pagination"
        row-key="employeeId"
        @change="handleTableChange"
      >
        <!-- 自定义渲染列 -->
        <template #status="{ text }">
          <a-tag :color="getStatusColor(text)">{{ text }}</a-tag>
        </template>
        <template #enabled="{ text }">
          <a-tag :color="text ? 'green' : 'red'">
            {{ text ? '启用' : '禁用' }}
          </a-tag>
        </template>
        <template #operation="{ record }">
          <a-button type="link" @click="handleEdit(record)">编辑</a-button>
          <a-divider type="vertical" />
          <a-button type="link" danger @click="handleDelete(record)">删除</a-button>
        </template>
      </a-table>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { message, Tag as ATag, Divider as ADivider } from 'ant-design-vue';
  import axios from 'axios';
  import { localStg } from '@/utils/storage';
  import { apiRequestGet } from '@/utils/api';
  // 表格列配置
  const columns = [
    {
      title: '员工ID',
      dataIndex: 'employeeId',
      key: 'employeeId',
      width: 100,
    },
    {
      title: '员工编号',
      dataIndex: 'employeeNo',
      key: 'employeeNo',
      width: 120,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width: 120,
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      width: 120,
    },
    {
      title: '职位',
      dataIndex: 'position',
      key: 'position',
      width: 120,
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department',
      width: 100,
    },
    {
      title: '联系电话',
      dataIndex: 'contact_phone',
      key: 'contact_phone',
      width: 150,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      slots: { customRender: 'status' },
      width: 120,
    },
    {
      title: '是否启用',
      dataIndex: 'enabled',
      key: 'enabled',
      slots: { customRender: 'enabled' },
      width: 120,
    },
    {
      title: '操作',
      key: 'operation',
      slots: { customRender: 'operation' },
      width: 150,
    },
  ];
  
  // 表格数据源
  const dataSource = ref([]);
  // 加载状态
  const loading = ref(false);
  // 分页配置
  const pagination = ref({
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total) => `共 ${total} 条`,
  });
  
  // 获取状态对应的颜色
  const getStatusColor = (status) => {
    switch (status) {
      case 'ACTIVE':
        return 'green';
      case 'SUSPENDED':
        return 'red';
      case 'ON_LEAVE':
        return 'orange';
      default:
        return 'gray';
    }
  };
  
  // 获取员工列表数据
  const fetchData = async () => {
    loading.value = true;
    try {
      // 请求远端接口
      const token = localStg.get('token');
      let params = {
          page: pagination.value.current,
          size: pagination.value.pageSize,
        }
      const response = await apiRequestGet('/employees/allEmployees', params);
  
      if (response.data.success) {
        dataSource.value = response.data.data;
        pagination.value.total = response.data.data.length; // 假设接口返回总条数
      } else {
        message.error(response.data.errorMsg || '获取数据失败');
      }
    } catch (error) {
      message.error('请求失败: ' + error.message);
    } finally {
      loading.value = false;
    }
  };
  
  // 表格分页、排序、筛选变化时触发
  const handleTableChange = (paginationData) => {
    pagination.value.current = paginationData.current;
    pagination.value.pageSize = paginationData.pageSize;
    fetchData();
  };
  
  // 编辑操作
  const handleEdit = (record) => {
    console.log('编辑员工:', record);
    message.info(`编辑员工 ID: ${record.employeeId}`);
  };
  
  // 删除操作
  const handleDelete = (record) => {
    console.log('删除员工:', record);
    message.info(`删除员工 ID: ${record.employeeId}`);
  };
  
  // 组件挂载时加载数据
  onMounted(() => {
    fetchData();
  });
  </script>
  
  <style scoped>
  </style>