'use strict';
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { connect } from 'react-redux';
import { Spin, TreeSelect, Modal, Form, Select, Input } from 'antd';
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect, ProFormSelect } from '@ant-design/pro-form';
import { getDepUser } from '../../../organization/actions/user'
import { appointTask } from '../../actions/appointTask'
import moment from 'moment'
import { v4 as uuidv4 } from 'uuid';

const { TextArea } = Input;

const NominateModal = (props) => {
    const { queryData, recordId, visible, user, onCancel, depMessage, loading, depUser, clientHeight, depData, onVisibleChange, dispatch } = props
    const [depId, setDepId] = useState(0)
    const [depUsers, setDepUsers] = useState()
    // const [value, setValue] = useState(undefined);
    const [selectedUserId, setSelectedUserId] = useState(null);
    const [form] = Form.useForm();

    const handleTreeSelectChange = async (value) => {
        setSelectedUserId(null)
        setDepId(value)
        // 根据选择的部门ID获取对应的用户数据
        //setDepUsers([])
        const res = await dispatch(getDepUser(value))
        const copy = res.payload.data.filter(user => {
            if (user.isAdmin) {
                return user
            }
        })
        let processedUsers = copy.map((item) => {
            return {
                label: item.name,
                value: item.id,
            }
        })
        setDepUsers(processedUsers)
        form.resetFields(['nameId'])

    }
    const handleFinish = () => {
        form.validateFields().then(values => {
            dispatch(appointTask({ recordId: recordId, performerId: values.nameId, handleAdvice: values.handleOpinions, handleState: '已指派' })).then((res) => {
                if (res.success) {
                    setSelectedUserId(null)
                    queryData()
                    onCancel()
                    setDepUsers([])
                    form.resetFields()
                }
            })
        })

    }

    const cancelHandler = () => {
        // form.resetFields()
        // setDepUsers([])
        onCancel()
    }
    return (
        <Spin spinning={false}>
            <Modal
                title='指派'
                visible={visible}
                onVisibleChange={onVisibleChange}
                onCancel={cancelHandler}
                destroyOnClose onOk={handleFinish}>
                <Form form={form}>
                    <div style={{ display: 'flex' }}>
                        <div style={{ marginRight: 30 }}>
                            <Form.Item label='部门:' name='departmentId' rules={[{ required: true, message: '请选择部门' }]}>
                                <TreeSelect
                                    style={{ width: '160px' }}
                                    // value={value}
                                    dropdownStyle={{
                                        maxHeight: 400,
                                        overflow: 'auto',
                                    }}
                                    placeholder="选择部门"
                                    //allowClear
                                    treeDefaultExpandAll={false}
                                    treeData={depData}
                                    onSelect={handleTreeSelectChange}
                                />

                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item label='指派人:' name='nameId' rules={[{ required: true, message: '选择指派人' }]}>
                                <Select placeholder="请选择指派人" style={{
                                    width: '160px',
                                }} options={depUsers}
                                    onChange={(value) => setSelectedUserId(value)}
                                >
                                </Select>

                            </Form.Item>
                        </div>
                    </div>
                    <Form.Item label='处理意见:' name='handleOpinions'>
                        <TextArea />
                    </Form.Item>
                </Form>
            </Modal>
        </Spin>
    )
}

function mapStateToProps(state) {
    const { auth, depMessage, depUser, global } = 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,
    // };
    return {
        user: auth.user,
        clientHeight: global.clientHeight,
        loading: depMessage.isRequesting,
        //depMessage: depMessage.data || [],
        depUser: depUser.data || [],
        depData
    }
}
export default connect(mapStateToProps)(NominateModal);