import React from 'react';
import { connect } from 'react-redux';
import { Spin, Card, Modal, TreeSelect, message } from 'antd';
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect ,ProFormSelect} from '@ant-design/pro-form';

const UserModal = (props) => {
    const { visible, modalType, depData, onVisibleChange, onConfirm, editData ,tableList} = props
    const reg_tel = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
    const onFinish = (values) => {
        if (onConfirm) {
            onConfirm(values);
        }
    }
    const mobile = (value) => {
        if (reg_tel.test(value)) {
            return
        }
        return message('请输入姓名')
    }
    return (
        <Spin spinning={false}>
            <ModalForm
                title={modalType == 'edit' ? '编辑用户' : '新建用户'}
                visible={visible}
                onVisibleChange={onVisibleChange}
                onFinish={onFinish}
                destroyOnClose
                initialValues={
                    modalType == 'edit' ?
                        {
                            contract: editData
                        } :
                        {
                            contract: {
                                enable: true
                            }
                        }
                }
            >
                <ProForm.Group>
                    <ProFormText
                        name={['contract', 'name']}
                        maxLength={24}
                        width="md"
                        label="姓名"
                        required
                        placeholder="请输入姓名"
                        rules={[{ required: true, message: '请输入姓名' }]}
                    />
                    <ProFormText
                        name={['contract', 'phone']}
                        width="md"
                        label="用户名(手机号)"
                        required
                        fieldProps={{
                            maxLength: 11,
                        }}
                        getValueFromEvent={(event) => {
                            return event.target.value.replace(/\D/g, '')
                        }}
                        placeholder="请输入用户名(手机号)"
                        rules={[
                            { required: true, valueType: Number, max: 11 }, { pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/, message: "请输入正确的手机号" }
                        ]}
                    />
                </ProForm.Group>
                <ProForm.Group>
                    <ProFormTreeSelect
                        name={['contract', 'departmentId']}
                        placeholder="请选择所属部门"
                        width="md"
                        label="所属部门"
                        required
                        fieldNames={{
                            title: 'name',
                            key: 'id',
                            children: 'subordinate'
                        }}
                        onSelect={(selectedKeys, { selected, selectedNodes }) => {
                            if (selected) {
                                setDepSelectedKeys(selectedKeys)
                                setDepSelected(selectedNodes[0].name || "")
                                dispatch(getDepUser(selectedKeys[0]))
                            }
                        }}
                        fieldProps={{
                            fieldNames: {
                                label: 'title',
                            },
                            treeDefaultExpandAll: false,
                        }}
                        rules={[{ required: true, message: '请选择所属部门' }]}
                        request={async () => {
                            console.log(depData);
                            return depData
                        }}
                        expandedKeys={["title"]}
                    />
                    < ProFormText
                        name={['contract', 'post']}
                        width="md"
                        label="职位"
                        // required
                        placeholder="请输入职位"
                    />
                </ProForm.Group>
                <ProForm.Group>
                    {/* <ProFormTreeSelect
                        name={['contract', 'structure']}
                        placeholder="请选择结构物"
                        width="md"
                        mode="multiple"
                        label="关注结构物"
                        required
                        // fieldNames={{
                        //     title: 'name',
                        //     key: 'id',
                        //     children: 'subordinate'
                        // }}
                        onSelect={(selectedKeys, { selected, selectedNodes }) => {
                          
                        }}
                        fieldProps={{
                            mode: 'multiple',
                            fieldNames: {
                                label: 'title',
                            },
                            treeDefaultExpandAll: false,
                        }}
                        rules={[{ required: true, message: '请选择结构物' }]}
                        request={async () => {
                            console.log(tableList);
                            const opts = tableList?.map(i=>({title:i.name,value:i.id}))
                            return opts
                        }}
                        expandedKeys={["title"]}
                     /> */}
                      <ProFormSelect
                      width="md"
                            label="关注结构物"
                            name={['contract', 'structure']}
                            mode="multiple"
                            // fieldProps={{//这里使用了select的onChange方法，必须使用这样的写法来进行调用onChange方法
                            //     onChange:(val) => handleChange(val),
                            // }}
                            request={async () => {
                                console.log(tableList);
                                const opts = tableList?.map(i=>({label:i.name,value:i.id}))
                                return opts
                            }}
                            placeholder="请选择结构物"
                            rules={[{ required: true, message: '结构物不能为空' }]}
                        />

                      <ProFormText
                        name={['contract', 'email']}
                        width="md"
                        label="邮箱"
                        // required
                        placeholder="请输入邮箱"
                        rules={[
                            // { required: true, message: '请输入邮箱' },
                            { type: 'email', message: '请输入正确格式的邮箱' },
                        ]}
                    />
                </ProForm.Group>
                <ProForm.Group>
                  
                    {modalType == 'edit' ? null : <ProFormText.Password
                        name={['contract', 'password']}
                        width="md"
                        label="密码"
                        required
                        placeholder="请输入密码"
                        fieldProps={{
                            autocomplete: 'new-password'
                        }}
                        rules={[
                            { required: true, message: '请填写密码' },
                            { min: 6, message: '请填写至少6位密码' },
                        ]}
                    />}
                </ProForm.Group>
                
                <ProForm.Group>
                    <ProFormSwitch
                        name={['contract', 'enable']}
                        width="md"
                        label="是否启用"
                        placeholder="请选择"
                        // defaultChecked
                        valuePropName="checked"
                    />
                </ProForm.Group>
            </ModalForm>
        </Spin>
    )
}

function mapStateToProps(state) {
    const { depMessage } = state;

    const pakData = (dep) => {
        // console.log(dep);
        return dep.map((d) => {
            return {
                title: d.name,
                value: d.id,
                // key: d.id,
                children: pakData(d.subordinate)
            }
        })
    }
    let depData = pakData(depMessage.data || [])

    return {
        loading: depMessage.isRequesting,
        depData,
    };
}

export default connect(mapStateToProps)(UserModal);