<script setup lang="ts">
/**
 * 文件职责：员工列表区块。
 * 1. 展示员工信息表格与分页。
 * 2. 透出添加、编辑、排班、删除动作。
 */
import type {
  StaffRoleType,
  StaffStatus,
  StoreStaffDto,
} from '#/api/store-staff';

import {
  Button,
  Card,
  Empty,
  Pagination,
  Popconfirm,
  Spin,
} from 'ant-design-vue';

interface Props {
  deletingStaffId: string;
  formatRoleLabel: (value: StaffRoleType) => string;
  formatStatusLabel: (value: StaffStatus) => string;
  getRoleTagClass: (value: StaffRoleType) => string;
  getStatusDotClass: (value: StaffStatus) => string;
  isLoading: boolean;
  isScheduleDisabled: (staff: StoreStaffDto) => boolean;
  maskPhone: (phone: string) => string;
  page: number;
  pageSize: number;
  pageSizeOptions: number[];
  rows: StoreStaffDto[];
  total: number;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'add'): void;
  (event: 'delete', staff: StoreStaffDto): void;
  (event: 'edit', staff: StoreStaffDto): void;
  (event: 'pageChange', payload: { page: number; pageSize: number }): void;
  (event: 'schedule', staff: StoreStaffDto): void;
}>();

/** 分页切换时同步页码和页长。 */
function handlePageChange(page: number, pageSize: number) {
  emit('pageChange', { page, pageSize });
}

/** 点击排班按钮时拦截禁用态。 */
function handleScheduleClick(staff: StoreStaffDto) {
  if (props.isScheduleDisabled(staff)) return;
  emit('schedule', staff);
}
</script>

<template>
  <Card :bordered="false" class="staff-card">
    <template #title>
      <span class="section-title">员工列表</span>
    </template>
    <template #extra>
      <Button type="primary" @click="emit('add')">+ 添加员工</Button>
    </template>

    <Spin :spinning="props.isLoading">
      <slot name="filters"></slot>

      <div class="staff-table-wrap">
        <table class="staff-table">
          <thead>
            <tr>
              <th>员工信息</th>
              <th>角色</th>
              <th>邮箱</th>
              <th>状态</th>
              <th>权限</th>
              <th>入职时间</th>
              <th class="staff-op-column">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-if="props.rows.length === 0">
              <td colspan="7">
                <Empty description="暂无员工" />
              </td>
            </tr>

            <tr
              v-for="staff in props.rows"
              v-else
              :key="staff.id"
              :class="{ 'staff-row-resigned': staff.status === 'resigned' }"
            >
              <td>
                <div class="staff-info">
                  <div
                    class="staff-avatar"
                    :style="{ background: staff.avatarColor || '#1677ff' }"
                  >
                    {{ staff.name.slice(0, 1) }}
                  </div>
                  <div class="staff-main">
                    <div class="staff-name">{{ staff.name }}</div>
                    <div class="staff-phone">
                      {{ props.maskPhone(staff.phone) }}
                    </div>
                  </div>
                </div>
              </td>
              <td>
                <span
                  class="staff-role-tag"
                  :class="props.getRoleTagClass(staff.roleType)"
                >
                  {{ props.formatRoleLabel(staff.roleType) }}
                </span>
              </td>
              <td>{{ staff.email || '--' }}</td>
              <td>
                <span class="staff-status">
                  <span
                    class="staff-status-dot"
                    :class="props.getStatusDotClass(staff.status)"
                  ></span>
                  {{ props.formatStatusLabel(staff.status) }}
                </span>
              </td>
              <td>
                <div
                  v-if="staff.permissions.length > 0"
                  class="staff-permissions"
                >
                  <span
                    v-for="item in staff.permissions"
                    :key="item"
                    class="staff-permission-pill"
                  >
                    {{ item }}
                  </span>
                </div>
                <span v-else class="staff-empty">--</span>
              </td>
              <td>{{ staff.hiredAt }}</td>
              <td>
                <div class="staff-actions">
                  <a class="staff-link" @click="emit('edit', staff)">编辑</a>
                  <a
                    class="staff-link"
                    :class="{
                      'staff-link-disabled': props.isScheduleDisabled(staff),
                    }"
                    @click="handleScheduleClick(staff)"
                  >
                    排班
                  </a>
                  <Popconfirm
                    title="确认删除该员工吗？"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="emit('delete', staff)"
                  >
                    <Button
                      type="link"
                      danger
                      size="small"
                      class="staff-delete-btn"
                      :loading="props.deletingStaffId === staff.id"
                    >
                      删除
                    </Button>
                  </Popconfirm>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staff-pagination" v-if="props.total > 0">
        <Pagination
          :current="props.page"
          :page-size="props.pageSize"
          :total="props.total"
          :page-size-options="props.pageSizeOptions"
          show-size-changer
          :show-total="(total) => `共 ${total} 条`"
          @change="handlePageChange"
          @show-size-change="handlePageChange"
        />
      </div>
    </Spin>
  </Card>
</template>
