<script setup lang="ts">
import { computed } from 'vue';
import { commonStatusOptions } from '@/constants/business';
import TableSearchFields from '@/components/custom/table-search-fields.vue';
import { $t } from '@/locales';

defineOptions({ name: 'UserSearch' });

interface Props {
  roleOptions: Api.SystemManage.RoleSimple[];
  disabled?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false
});

interface Emits {
  (e: 'reset'): void;
  (e: 'search'): void;
}

const emit = defineEmits<Emits>();

const model = defineModel<Api.SystemManage.UserSearchParams>('model', { required: true });

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const fields = computed<any[]>(() => [
  {
    key: 'nickname',
    label: $t('page.system.user.nickName'),
    type: 'input',
    placeholder: $t('page.system.user.form.nickName')
  },
  {
    key: 'mobile',
    label: $t('page.system.user.userPhone'),
    type: 'input',
    placeholder: $t('page.system.user.form.userPhone')
  },
  {
    key: 'status',
    label: $t('page.system.user.userStatus'),
    type: 'select',
    placeholder: $t('page.system.user.form.userStatus'),
    options: commonStatusOptions.map(o => ({
      label: $t(o.label as App.I18n.I18nKey),
      value: o.value
    }))
  },
  {
    key: 'company',
    label: '所属公司',
    type: 'dict',
    dictCode: 'system_user_company',
    placeholder: '请选择所属公司'
  },
  {
    key: 'roleId',
    label: $t('page.system.user.userRole'),
    type: 'select',
    placeholder: $t('page.system.user.form.userRole'),
    options: props.roleOptions.map(r => ({
      label: r.name,
      value: r.id
    }))
  }
]);
</script>

<template>
  <TableSearchFields
    v-model="model"
    :fields="fields"
    :columns="3"
    :disabled="disabled"
    @search="emit('search')"
    @reset="emit('reset')"
  />
</template>
