import React, { useState, useRef, useEffect } from "react";
import { connect } from "react-redux";
import { Modal, Form, CheckboxGroup, Checkbox,Button } from "@douyinfe/semi-ui";
import { IconAlertCircle } from '@douyinfe/semi-icons';


function memberModal (props) {
    const {
        close,
        cancel,
        visible,
        dispatch,
        pepList,
        actions,
        editObj,
        memberEdit,
        pomsList,
        anxinDelete,
        anxincloudArr
    } = props;
    const { install } = actions;
    const form = useRef();//表单
    const [disablePeople, setDisablePeople] = useState(true); //页码信息
    const [peopleList, setPeopleList] = useState([]); //人员List
    const [departmentId, setDepartmentId] = useState(); //部门id
    const [jurisdiction, setJurisdiction] = useState([
        {
            label: '数据分析师',
            value: 'data_analyst',
            text: '拥有数据、分析、工单、资料相关的权限'
        }, {
            label: '售后运维',
            value: 'after_sale',
            text: '拥有设备、问题、工单、资料相关的权限'
        }, {
            label: '资源管理者',
            value: 'resource_manage',
            text: '拥有资料、设备、工单相关的权限'
        }, {
            label: '客户服务',
            value: 'customer_service',
            text: '拥有服务、工单、资料相关的权限'
        },
    ]); //权限配置
    const [pomsList_, setPomsList_] = useState([])
    //初始化
    useEffect(() => {
        if (editObj.id) {
            let departmentList = []
            for (let i = 0; i < pepList.length; i++) {
                if (pepList[i].id == editObj.departments[0].id) {
                    departmentList = pepList[i].users
                }
            }
            setDepartmentId(editObj.departments[0].id)
            setPeopleList(departmentList)
        }
        setPomsList_(pomsList.filter(p=>p.pepProjectIsDelete != -1))
    }, []);

    function handleOk () {
        //点击弹框确定  右边按钮
        form.current
            .validate()
            .then((values) => {
                let roleArr = JSON.parse(JSON.stringify(values.role))
                if (roleArr.indexOf('admin') != -1) {
                    roleArr.splice(roleArr.indexOf('admin'), 1)
                }
                if (memberEdit) {
                    dispatch(install.postOrganizationUser({ role: roleArr, correlationProject: values.correlationProject, pomsUserId: editObj.id, pepUserId: values.pepUserId, msg: '修改成员' })).then((res) => {//获取项企(PEP)全部部门及其下用户
                        if (res.success) {
                            close();
                        }
                    })
                }
                else {
                    dispatch(install.postOrganizationUser({ role: roleArr, correlationProject: values.correlationProject, pepUserId: values.pepUserId, msg: '新增成员' })).then((res) => {//获取项企(PEP)全部部门及其下用户
                        if (res.success) {
                            close();
                        }
                    })
                }
            })
    }
    function handleCancel () {
        cancel();
        //点击弹框取消  左边按钮
    }
    return (
        <>
            <Modal
                title="成员设置"
                okText="确定"
                cancelText="取消"
                visible={visible}
                onOk={handleOk}
                width={607}
                onCancel={handleCancel}
            >
                <div style={{ margin: "0px 25px" }}>
                    <div style={{ width: '100%', height: 32, background: '#F4F8FF', borderRadius: 2, border: '1px solid #C7E1FF', display: 'flex', alignItems: 'center' }}>
                        <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}><IconAlertCircle style={{ color: '#0F7EFB' }} /></div>
                        <div style={{ color: '#0F7EFB', fontSize: 12, marginLeft: 8 }}>成员成为管理员后，拥有平台所有权限和项目，成员的普通角色会被禁用。</div>
                    </div>
                    <Form
                        allowEmpty
                        labelPosition="left"
                        labelAlign="right"
                        labelWidth="90px"
                        onValueChange={(values, field) => {
                            for (var key in field) {
                                if (key == 'department') {
                                    if (values.department >= 0) {
                                        let departmentList = []
                                        for (let i = 0; i < pepList.length; i++) {
                                            if (pepList[i].id == values.department) {
                                                departmentList = pepList[i].users
                                            }
                                        }
                                        setPeopleList(departmentList)
                                        setDisablePeople(false)
                                        form.current.setValue('pepUserId', undefined);
                                    }
                                    else {
                                        setPeopleList([])
                                        setDisablePeople(true)
                                        form.current.setValue('pepUserId', undefined);
                                    }
                                }
                            }

                        }}
                        getFormApi={(formApi) => (form.current = formApi)}
                    >
                        <div>
                            <Form.Select
                                label="选择部门:"
                                field="department"
                                placeholder="请选择部门"
                                style={{ width: 417 }}
                                rules={[{ required: true, message: "请选择部门" }]}
                                showClear
                                filter
                                initValue={departmentId || ""}
                                disabled={memberEdit}
                            >
                                {
                                    pepList.map((item, index) => {
                                        return (
                                            <Form.Select.Option key={item.id} value={item.id}>
                                                {item.name}
                                            </Form.Select.Option>
                                        )
                                    })
                                }
                            </Form.Select>
                        </div>
                        <div>
                            <Form.Select
                                label="选择人员:"
                                field="pepUserId"
                                filter
                                placeholder="请选择人员"
                                style={{ width: 417 }}
                                rules={[{ required: true, message: "请选择人员" }]}
                                showClear
                                initValue={editObj.pepUserId || ""}
                                disabled={disablePeople}
                            >
                                {
                                    peopleList.map((item, index) => {
                                        return (
                                            <Form.Select.Option key={item.id} value={item.id}>
                                                {item.name}
                                            </Form.Select.Option>
                                        )
                                    })
                                }
                            </Form.Select>
                        </div>
                        <div>
                            <Form.CheckboxGroup
                                field="role"
                                label='权限配置:'
                                showClear
                                initValue={editObj.role || []}
                            >
                                {
                                    jurisdiction.map((item, index) => {
                                        return (
                                            <Checkbox value={item.value} key={index} >
                                                <div style={{ display: 'flex' }}>
                                                    <div style={{ fontSize: 13, color: '#4A4A4A' }}>
                                                        {item.label}
                                                    </div>
                                                    <div style={{ fontSize: 12, color: '#969799', marginLeft: 12 }}>
                                                        {item.text}
                                                    </div>
                                                </div>
                                            </Checkbox>
                                        )
                                    })
                                }
                            </Form.CheckboxGroup>
                        </div>
                        <div>
                            <Form.Select
                                label="关联项目:"
                                field="correlationProject"
                                multiple
                                placeholder="请选择关联项目"
                                initValue={anxincloudArr}
                                style={{ width: 417 }}
                                filter
                                showClear
                                outerBottomSlot={
                                 <p style={{ margin:"6px 26px",}}>
                                      <Button  theme='borderless' onClick={()=>{
                                       form.current.setValue('correlationProject',pomsList_.map(p=> p.id))
                                      }}>全选</Button>
                                 </p>
                                }
                            >
                                {
                                    pomsList_.map((item, index) => {
                                        return (
                                                <Form.Select.Option key={index} value={item.id}>
                                                    {item.pepProjectName || item.name}
                                                </Form.Select.Option>
                                        )
                                    })
                                }
                            </Form.Select>
                        </div>
                        {
                            anxinDelete?.length > 0 ? (
                                <div style={{ display: 'flex' }}>
                                    <div style={{ marginTop: 3 }}>
                                        <img src="/assets/images/install/risk.png" alt="" style={{ height: 24, width: 24, }} />
                                    </div>
                                    <div style={{
                                        background: 'rgba(255, 51, 0, 0.28)', color: '#FF3300',
                                        fontSize: 12, marginLeft: 8, lineHeight: 2, padding: '0px 5px',
                                        border: '1px solid rgba(255,51,0,0.3)', width: 515
                                    }}>
                                        确定后“{anxinDelete.join('、')}”将被系统移除，原因是项目已在【项企】或【映射关系】中被删除！
                                    </div>
                                </div>
                            ) : ('')
                        }
                    </Form>
                </div>
            </Modal>
        </>
    );
}
function mapStateToProps (state) {
    const { auth, global, members } = state;
    return {
        //   loading: members.isRequesting,
        user: auth.user,
        actions: global.actions,
        //   members: members.data,
    };
}

export default connect(mapStateToProps)(memberModal);