import {FC} from 'react';
import {useFetchUserInfo, useField, useOptions} from './hooks';
import {ModalField, ModalSelect} from '@components';

type Props = {
  id: string;
};

const width = '350px';

const UserModalInfo: FC<Props> = function({id}) {
  const {roleOptions, departmentOptions} = useOptions();
  const {control} = useField();
  useFetchUserInfo(id);

  return (
    <>
      <ModalField
        control={control}
        name='userName'
        label='用户名'
        width={width}
      />
      <ModalField
        control={control}
        name='userPassword'
        label='用户密码'
        width={width}
        type='password'
        disabled={Boolean(id)}
      />
      <ModalField
        control={control}
        name='userRealName'
        label='真实姓名'
        width={width}
      />
      <ModalField
        control={control}
        name='userEmail'
        label='邮箱'
        width={width}
        type='email'
      />
      <ModalField
        control={control}
        name='userLandline'
        label='电话'
        width={width}
        type='phone'
      />
      <ModalField
        control={control}
        name='userPhone'
        label='手机'
        width={width}
        type='phone'
      />
      <ModalSelect
        control={control}
        name='userDepartment'
        label='部门'
        width={width}
        data={departmentOptions}
      />
      <ModalSelect
        control={control}
        name='userRole'
        label='角色'
        data={roleOptions}
        width={width}
      />

    </>
  );
};

export default UserModalInfo;
