import React from 'react';
import { Select } from 'antd';
import { getSysRole } from '@/service/sysrole';


export default (props) => {
  const { value, onChange, ...leftProps } = props;

  const [list, setList] = React.useState([]);
  const data = React.useMemo(() => (value || []).map(x => x.roleId), [value]);
  const options = React.useMemo(() => list.map(x => ({ label: x.name, value: x.roleId })), [list]);

  const handleChange = (values = []) => {
    if (onChange) {
      const dts = values.map(x => list.filter(y => y.roleId === x)[0]);
      onChange(dts);
    }
  }

  React.useEffect(() => {
    getSysRole({ pageSize: 500 }).then(res => {
      setList(res.records || []);
    })
  }, []);

  return (
    <Select
      mode="multiple"
      allowClear
      value={data}
      onChange={handleChange}
      options={options}
      {...leftProps}
    />
  )
}
