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 EmployeeAuthModal = (props) => {
    const form = useRef();
    const { dispatch, actions, handleCancel, eidtTit, visible, getRoleList, eidtRole } = props

    const handleOk = () => {
        form.current.validate()
            .then((values) => {
                if (eidtRole == null) {
                    dispatch(actions.humanAffairs.addRole(values)).then(e => {
                        if (e.success) {
                            getRoleList()
                            handleCancel()
                        }
                    })
                } else {
                    values.id = eidtRole.id
                    dispatch(actions.humanAffairs.editRole(values)).then(e => {
                        if (e.success) {
                            getRoleList()
                            handleCancel()
                        }
                    })
                }
            })
            .catch((errors) => {
                console.log(errors);
            });
    };
    let message = '该项为必填项';
    return (
        <>
            <Modal
                title={eidtTit}
                visible={visible}
                onOk={handleOk}
                onCancel={handleCancel}
                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 },
                                ]}
                            />
                        </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)(EmployeeAuthModal);