import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux';
import { Col, Row, Modal, Form } from '@douyinfe/semi-ui';
import '../style.less'

const employeeAuthUserModal = (props) => {
    const form = useRef();
    const { dispatch, actions, handleCancelUser, visibleUser, getRoleList, roleList,userRoleList } = props
    const [userValue, setUserValue] = useState([]);

    const handleOk = () => {
        form.current.validate()
            .then((values) => {
                dispatch(actions.humanAffairs.addUserRole(values)).then(e => {
                    if (e.success) {
                        getRoleList()
                        handleCancelUser()
                    }
                })
            })
            .catch((errors) => {
                console.log(errors);
            });
    };
    let message = '该项为必填项';
    let hrUser = JSON.parse(sessionStorage.getItem('hrUser'))
    const seleRole = (value)=>{
        let userValue = []
        userRoleList&&userRoleList.rows&&userRoleList.rows.forEach(e=> {
            if(e.roleId == value){
                userValue.push(e.userId)
            }
        })
        form.current.setValue('userId',userValue)
    }
    return (
        <>
            <Modal
                title='角色添加用户'
                visible={visibleUser}
                onOk={handleOk}
                onCancel={handleCancelUser}
                closeOnEsc={true}
                maskClosable={false}
            >
                <Form
                    getFormApi={(formApi) => (form.current = formApi)}
                    labelPosition={'left'}
                    labelAlign={'right'}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                >
                    <Row>
                        <Col span={24}>
                            {/* <Form.Input
                                field='name'
                                label="选择角色"
                                // initValue={eidtRole?.name || ""}
                                rules={[
                                    { required: true, message },
                                ]}
                            /> */}
                            <Form.Select
                                field="roleId"
                                label='选择角色'
                                style={{ width: '100%' }}
                                onChange = {seleRole}
                                rules={[
                                    { required: true, message },
                                ]}>
                                {
                                    roleList && roleList.rows.map(e => {
                                        return (
                                            <Form.Select.Option value={e.id}>{e.name}</Form.Select.Option>
                                        )
                                    })
                                }
                            </Form.Select>
                            <Form.Select
                                filter
                                multiple
                                autoClearSearchValue={false}
                                field="userId"
                                label='选择用户'
                                style={{ width: '100%' }}
                                rules={[
                                    { required: true, message },
                                ]}>
                                {
                                    hrUser.userListArr.map(e => {
                                        return (
                                            <Form.Select.Option value={e.id}>{e.name}</Form.Select.Option>
                                        )
                                    })
                                }
                            </Form.Select>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        </>
    )
}

function mapStateToProps(state) {
    const { auth, global, roleList } = state;
    return {
        user: auth.user,
        actions: global.actions,
        roleList: roleList.data,
    };
}

export default connect(mapStateToProps)(employeeAuthUserModal);