import React from 'react';
import { connect } from 'react-redux';
import { ProFormText, ModalForm, ProFormSelect } from '@ant-design/pro-form';

const DeptModal = (props) => {
    const { visible, modalType, onVisibleChange, onConfirm, editData, depts } = props
    let deptOptions = [], sonArr = [];
    depts.map(d => {
        deptOptions.push({
            value: d.id,
            label: d.name
        });

        d.subordinate.map(ds => {
            sonArr.push({
                value: ds.id,
                label: ds.name
            })
        })
    })
    const onFinish = (values) => {
        if (onConfirm) {
            if (modalType === 'edit') {
                values.contract.parentDeptId = values.contract.parentDeptId || null
                onConfirm(values)
            } else {
                onConfirm(values);
            }
        }
    }

    const checkName = (rule, value, callback) => {
        const list = modalType == 'edit' ? deptOptions.concat(sonArr).filter(g => g.value != editData.id) : deptOptions.concat(sonArr)
        if (list.filter(s => s.label == value).length) {
            callback('该名称已存在');
        } else {
            callback();
        }
    }

    return (
        <ModalForm
            width={400}
            title={modalType == 'edit' ? '编辑部门' : '新建部门'}
            visible={visible}
            onVisibleChange={onVisibleChange}
            onFinish={onFinish}
            destroyOnClose
            initialValues={
                modalType == 'edit' ?
                    {
                        contract: editData
                    } :
                    {
                        contract: {
                            enable: true
                        }
                    }
            }
        >
            <ProFormText
                name={['contract', 'name']}
                maxLength={24}
                width="md"
                label="部门名称"
                required
                placeholder="请输入部门名称"
                rules={[{ required: true, message: '请输入部门名称' }, { validator: checkName }]}
            />
            <ProFormSelect
                name={['contract', 'dependence']}
                label="上级部门"
                request={async () => {
                    let t = modalType === 'edit' ? deptOptions.filter(i => i.value !== editData.id) : deptOptions
                    return t
                }}
                disabled={modalType === 'edit' ? editData.subordinate?.length === 0 ? false : true : false}
            />
        </ModalForm>
    )
}

function mapStateToProps(state) {
    return {
    };
}

export default connect(mapStateToProps)(DeptModal);