<script setup lang="ts">
/**
 * 文件职责：员工新增/编辑抽屉。
 * 1. 展示员工基础信息与权限表单。
 * 2. 透出保存与关闭事件。
 */
import type { StaffRoleType, StaffStatus } from '#/api/store-staff';
import type {
  StaffEditorFormState,
  StaffPermissionOption,
  StaffRoleOption,
  StaffStatusOption,
} from '#/views/store/staff/types';

import { Button, Drawer, Select } from 'ant-design-vue';

interface Props {
  form: StaffEditorFormState;
  isSaving: boolean;
  onSetEmail: (value: string) => void;
  onSetName: (value: string) => void;
  onSetPermissions: (value: string[]) => void;
  onSetPhone: (value: string) => void;
  onSetRoleType: (value: StaffRoleType) => void;
  onSetStatus: (value: StaffStatus) => void;
  open: boolean;
  permissionOptions: StaffPermissionOption[];
  roleOptions: StaffRoleOption[];
  statusOptions: StaffStatusOption[];
  submitText: string;
  title: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'submit'): void;
  (event: 'update:open', value: boolean): void;
}>();

/** 判断是否已全选权限。 */
function isAllPermissionChecked() {
  if (props.form.permissions.includes('全部权限')) return true;
  if (props.permissionOptions.length === 0) return false;
  return props.permissionOptions.every((item) =>
    props.form.permissions.includes(item.value),
  );
}

/** 切换单个权限。 */
function togglePermission(value: string, checked: boolean) {
  const basePermissions = props.form.permissions.filter(
    (item) => item !== '全部权限',
  );
  const next = checked
    ? [...new Set([value, ...basePermissions])]
    : basePermissions.filter((item) => item !== value);
  props.onSetPermissions(next);
}

/** 全选/取消全选权限。 */
function toggleAllPermissions(checked: boolean) {
  props.onSetPermissions(
    checked
      ? ['全部权限', ...props.permissionOptions.map((item) => item.value)]
      : [],
  );
}

/** 统一处理角色更新。 */
function handleRoleChange(value: unknown) {
  if (typeof value !== 'string') return;
  props.onSetRoleType(value as StaffRoleType);
}

/** 统一处理状态更新。 */
function handleStatusChange(value: unknown) {
  if (typeof value !== 'string') return;
  props.onSetStatus(value as StaffStatus);
}

/** 处理姓名输入。 */
function handleNameInput(event: Event) {
  props.onSetName((event.target as HTMLInputElement | null)?.value ?? '');
}

/** 处理手机号输入。 */
function handlePhoneInput(event: Event) {
  props.onSetPhone((event.target as HTMLInputElement | null)?.value ?? '');
}

/** 处理邮箱输入。 */
function handleEmailInput(event: Event) {
  props.onSetEmail((event.target as HTMLInputElement | null)?.value ?? '');
}

/** 处理全选权限切换。 */
function handlePermissionAllChange(event: Event) {
  toggleAllPermissions(
    Boolean((event.target as HTMLInputElement | null)?.checked),
  );
}

/** 处理单项权限切换。 */
function handlePermissionItemChange(event: Event, value: string) {
  togglePermission(
    value,
    Boolean((event.target as HTMLInputElement | null)?.checked),
  );
}
</script>

<template>
  <Drawer
    :open="props.open"
    :title="props.title"
    :width="520"
    :mask-closable="true"
    :destroy-on-close="false"
    class="staff-editor-drawer"
    @update:open="(value) => emit('update:open', value)"
  >
    <div class="staff-drawer-form">
      <div class="g-form-group">
        <label class="g-form-label required">姓名</label>
        <input
          :value="props.form.name"
          class="g-input"
          maxlength="20"
          placeholder="请输入员工姓名"
          @input="handleNameInput"
        />
      </div>

      <div class="g-form-group">
        <label class="g-form-label required">手机号</label>
        <input
          :value="props.form.phone"
          class="g-input"
          maxlength="11"
          placeholder="请输入手机号"
          @input="handlePhoneInput"
        />
      </div>

      <div class="g-form-group">
        <label class="g-form-label">邮箱</label>
        <input
          :value="props.form.email"
          class="g-input"
          maxlength="64"
          placeholder="可选"
          @input="handleEmailInput"
        />
        <div class="g-hint">用于接收系统通知</div>
      </div>

      <div class="g-form-grid">
        <div class="g-form-group">
          <label class="g-form-label required">角色</label>
          <Select
            :value="props.form.roleType"
            class="staff-form-select"
            :options="props.roleOptions"
            @update:value="(value) => handleRoleChange(value)"
          />
        </div>

        <div class="g-form-group">
          <label class="g-form-label">状态</label>
          <Select
            :value="props.form.status"
            class="staff-form-select"
            :options="props.statusOptions"
            @update:value="(value) => handleStatusChange(value)"
          />
        </div>
      </div>

      <div class="g-form-group">
        <label class="g-form-label">权限</label>
        <div class="staff-permission-grid">
          <label class="staff-permission-item staff-permission-item-all">
            <input
              :checked="isAllPermissionChecked()"
              type="checkbox"
              @change="handlePermissionAllChange"
            />
            <span>全部权限</span>
          </label>

          <label
            v-for="item in props.permissionOptions"
            :key="item.value"
            class="staff-permission-item"
          >
            <input
              :checked="props.form.permissions.includes(item.value)"
              type="checkbox"
              @change="(event) => handlePermissionItemChange(event, item.value)"
            />
            <span>{{ item.label }}</span>
          </label>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="staff-drawer-footer">
        <Button @click="emit('update:open', false)"> 取消 </Button>
        <Button
          type="primary"
          :loading="props.isSaving"
          @click="emit('submit')"
        >
          {{ props.form.id ? '保存修改' : '新增并保存' }}
        </Button>
      </div>
    </template>
  </Drawer>
</template>
