import React, { useState, useEffect } from 'react';
import styles from './incident.less';
import {
    Form,
    Card,
    Space,
    Table,
    Popconfirm,
    Spin,
    Tooltip,
    notification,
    Tree,
    Button,
} from 'antd';

import {
    DoubleLeftOutlined,
    DoubleRightOutlined,
    PlusSquareFilled,
    RightOutlined,
    EditTwoTone,
    DeleteOutlined,
    OrderedListOutlined,
    ApartmentOutlined,
    DesktopOutlined
} from '@ant-design/icons';
import {GetCM_Event_LoadEventTable, CM_Event_RemoveEventTable, CM_Event_ReOrder, GetCM_Event_LoadEventTypeTable} from '@/services/standingBook/api';
import classnames from 'classnames';
import AddModal from './AddModal'
import ProcessModal from './ProcessModal'
import SortModal from './SortModal'
import ViewModal from './ViewModal'


const incident = () => {
    const [treeLoading, setTreeLoading] = useState(false);
    const [treeVisible, setTreeVisible] = useState(true); // 左边列表是否可见
    const [treeData, setTreeData] = useState([]); // 事件表数据
    const [tableData, setTableData] = useState([]); // 事件表
    const [addVisible, setAddvisible] = useState(false);
    const [processVisible, setProcessVisible] = useState(false);
    const [sortVisible, setSortVisible] = useState(false);
    const [viewVisible, setViewVisible] = useState(false)
    const [isType, setIsType] = useState(''); // 弹窗类型
    const [formObj, setFormObj] = useState('');
    const [flag, setFlag] = useState(0); 
    const [title1, setTitle1] = useState('')
    const [title2, setTitle2] = useState('')
    const [select, setSelect] = useState('')
   
    
   
    const [sortData,setSortData] = useState([])
    const [rember, setRember] = useState(0)
    const [rember1, setRember1] = useState()

    const [maxLength, setMaxLength] = useState(0);
    const [pickItem, setPickItem] = useState('');

    const columns = [
        {
            title: '事件名称',
            dataIndex: 'name',
            key: 'name',
            width: 150,
        },
        {
            title: '事件主表',
            dataIndex: 'tableName',
            key: 'tableName',
            width: 200,
            ellipsis: true,
        }
        ,
        {
            title: '编码',
            dataIndex: 'code',
            key: 'code',
            width: 50,
        }
        ,
        {
            title: '摘要字段',
            dataIndex: 'summaryFields',
            key: 'summaryFields',
            width: 200,
            ellipsis: true
        }
        ,
        {
            title: '权限',
            dataIndex: 'roles',
            key: 'roles',
            width: 50,
        }
        ,
        {
            title: '流程',
            dataIndex: 'flowCount',
            key: 'flowCount',
            width: 50,
        }
        ,
        {
            title: '上报',
            dataIndex: 'reportable',
            key: 'reportable',
            width: 50,
        }
        ,
        {
            title: '上报字段',
            dataIndex: 'reportPage',
            key: 'reportPage',
            width: 100,
            render: item => (
                <div
                  ref={r => {
                    if (r) {
                      r.innerHTML = item;
                    }
                  }}
                />
              ),
        }
        ,
        {
            title: '显示字段',
            dataIndex: 'displayFields',
            key: 'displayFields',
            width: 100,
            render: item => (
                <div
                  ref={r => {
                    if (r) {
                      r.innerHTML = item;
                    }
                  }}
                />
              ),
        }

        ,
        {
            title: '编辑',
            dataIndex: 'editable',
            key: 'editable',
            width: 50,
            render: item =>(
                <div
                  ref={r => {
                    if (r) {
                      r.innerHTML = item;
                    }
                  }}
                />
              )
        }
        ,
        {
            title: '编辑字段',
            dataIndex: 'editableFields',
            key: 'editableFields',
            width: 100,
            render: item =>(
                <div
                  ref={r => {
                    if (r) {
                      r.innerHTML = item;
                    }
                  }}
                />
              )     
        }
        ,
        {
            title: '上报方式',
            dataIndex: 'createMode',
            key: 'createMode',
            width: 100,
        }
        ,
        // {
        //     title: '置顶条件',
        //     dataIndex: 'topWhere',
        //     key: 'topWhere',
        //     width: 100,
        //     render: item =>(
        //             <div
        //               ref={r => {
        //                 if (r) {
        //                   r.innerHTML = item;
        //                 }
        //               }}
        //             />
        //           )     
        // }
        // ,
        // {
        //     title: '接口配置',
        //     dataIndex: 'interfaceConfig',
        //     key: 'interfaceConfig',
        //     width: 100,
        //     render:  item =>(
        //         <div
        //           ref={r => {
        //             if (r) {
        //               r.innerHTML = item;
        //             }
        //           }}
        //         />
        //       )     
        // },
        {
            title: '操作',
            key: 'action',
            align: 'center',
            render: record => (
                <Space size="middle">
                   
                    <Tooltip title="编辑事件类型">
                        <EditTwoTone
                            onClick={() => editEventType(record)}
                            style={{ fontSize: '16px' }}
                        />
                    </Tooltip>
                    <Tooltip title="删除事件类型">
                        <Popconfirm
                            placement="bottomRight"
                            title={
                                <p>
                                    即将删除事件类型表，是否确认删除？
                                </p>
                            }
                            okText="确认"
                            cancelText="取消"
                            onConfirm={() => deleteEventType(record)}
                        >
                            <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
                        </Popconfirm>
                    </Tooltip>
                    <Tooltip title="受理流程">
                        <ApartmentOutlined
                            onClick={() => process(record)}
                            style={{ fontSize: '16px', color: '#1890FF' }}
                        />
                    </Tooltip>
                    <Tooltip title="辅助视图">
                        <DesktopOutlined
                            onClick={() => auxiliaryView(record)}
                            style={{ fontSize: '16px', color: '#1890FF'  }}
                        />
                    </Tooltip>
                </Space>
            )

        }
    ]

    useEffect(()=>{
        setTreeLoading(true);
        GetCM_Event_LoadEventTable().then(res =>{
            setTreeLoading(false);
            if(res.msg==='Ok'){
                console.log(res.data)
                // setMaxLength(res.data.root.length + 1)
                let arr = formateArrDataA(res.data, 'businessType')
                console.log(arr)
                let newArr = []
                let newapp = []
                let newabb = []
                let aa= []
                let zz = []
                Object.keys(arr).map((item, index) => {
                    newArr.push(item)
                })
                console.log(arr)
                Object.values(arr).map((item, index) => {
                    newapp.push(item)
                })
                console.log(newapp)
                newapp.map((item, index)=>{
                    console.log(item)
                    item.map((item1, index)=>{
                        newabb.push(item1.root)
                        console.log(item1.root)
                    })
                })
                console.log(newabb)
                newabb.map((item, index)=>{
                    console.log(item)
                    aa.push(item)
                })
                console.log(aa)
                aa.map((item, index)=>{
                    console.log(item)
                    item.map((item1, index)=>{
                        console.log(item1)
                        zz.push({...item1})
                    })     
                })
                console.log(zz)
                let arrr = formateArrDataA(zz, 'businessType')
                console.log(arrr)
                setTableData(arrr)
                setPickItem(newArr[rember])
                setRember1(newArr[0])
                console.log(newArr, 'newArr');
                setTreeData(newArr)
            }
        })
    },[flag])
    useEffect(()=>{
        GetCM_Event_LoadEventTypeTable().then(res => {
            if (res.msg === 'Ok') {
                let arr = []
                res.data.map((item, index)=>{
                    arr.push(item.text)
                })
                setSelect(arr)
            }
        })
    },[])
    const formateArrDataA = (initialArr, name) => {
        console.log(initialArr)
        console.log(name)
        // 判定传参是否符合规则
        if (!(initialArr instanceof Array)) {
            return '请传入正确格式的数组'
        }
        if (!name) {
            return '请传入对象属性'
        }
        //先获取一下这个数组中有多少个"name"
        let nameArr = []
        for (let i in initialArr) {
            if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
                nameArr.push(initialArr[i][`${name}`])
            }
        }
        //新建一个包含多个list的结果对象
        let tempObj = {}
        // 根据不同的"name"生成多个数组
        for (let k in nameArr) {
            for (let j in initialArr) {
                if (initialArr[j][`${name}`] == nameArr[k]) {
                    // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
                    tempObj[nameArr[k]] = tempObj[nameArr[k]] || []
                    tempObj[nameArr[k]].push(initialArr[j])
                }
            }
        }
        for (let keys in tempObj) {
            let arr = []
            tempObj[keys].map((item, index) => {
                tempObj[keys] = arr;
                item.key = index
                arr.push(item)
            })
        }
        return tempObj
    }
    //添加事件
    const addIncident = () => {
        setAddvisible(true)
        setIsType('add')
    }
    //修改事件类型
    const editEventType = record => {
        setFormObj(record);
        setIsType('edit');
        setAddvisible(true);
    }
    //删除事件类型
    const deleteEventType = record => {
        CM_Event_RemoveEventTable(record.ID).then(res =>{
            if (res.msg === '') {
                notification.success({
                    message: '提示',
                    duration: 3,
                    description: '删除成功',
                });
                setFlag(flag + 1);
            } else {
                notification.error({
                    message: '提示',
                    duration: 3,
                    description: res.msg,
                });
            }
        })
    }
    const sort = () => {
        setSortVisible(true);
        console.log(tableData)
        console.log(pickItem)
        console.log(tableData[pickItem])
        setSortData(tableData[pickItem])
    }
    const process = record => {
        setProcessVisible(true);
        setFormObj(record);
        setTitle1(record.name)
    }
    const auxiliaryView = record => {
        setFormObj(record);
        setViewVisible(true)
        setTitle2(record.name)
    }
    const onSubmit =()=>{
       setAddvisible(false)
       setFlag(flag + 1)
    }
    const onOK = prop =>{
        setSortVisible(false) 
        let aa= (prop.str).toString()
        console.log(aa)
        CM_Event_ReOrder(aa).then(res =>{
            if (res.msg === 'Ok') {
                notification.success({
                    message: '提示',
                    duration: 3,
                    description: '调整成功',
                });
                setFlag(flag + 1);
            } else {
                notification.error({
                    message: '提示',
                    duration: 3,
                    description: res.msg,
                });
            }
        })
    }
    const onOK1 =()=>{
        setProcessVisible(false)
    }
    const onOK11 =()=>{
        setViewVisible(false)
    }
    return (
        <div className={styles.incidentContainer}>
            <div className={styles.contentContainers}>
                {/*左侧事件树 */}
                <Spin spinning={treeLoading} tip="loading...">
                    <Card
                        className={classnames({
                            [styles.orgContainer]: true,
                            [styles.orgContainerHide]: !treeVisible,
                        })}
                    >
                        <div>
                            <span
                                style={{
                                    fontSize: '15px ',
                                    fontWeight: 'bold',
                                    
                                }}
                            >
                                事件列表
                            </span>
                            <Tooltip title="添加事件类型">
                                <PlusSquareFilled
                                    onClick={() => addIncident()}
                                    style={{
                                        color: '#1890FF',
                                        fontSize: '25px',
                                        verticalAlign: 'middle',
                                        marginLeft: '58%'
                                    }}
                                />
                            </Tooltip>
                            <hr style={{ width: '100%', color: '#eeecec' }} />
                                {
                                    treeData.length>0 && (treeData.map((item, index) => {
                                        return <div className={classnames({
                                            [styles.listItem]: true,
                                            [styles.pickItem]: item === pickItem,
                                        })} onClick={e => {setPickItem(item);setRember(index);setRember1(item)}} key={index}>{item}（{tableData[item] ? tableData[item].length : ''}） {item === pickItem ? <RightOutlined /> : ''} </div>
                                    })
                                    )}
                        </div>
                        <div className={styles.switcher}>
                            {treeVisible && (
                                <Tooltip title="隐藏机构列表">
                                    <DoubleLeftOutlined onClick={() => setTreeVisible(false)} />
                                </Tooltip>
                            )}
                            {!treeVisible && (
                                <Tooltip title="显示机构列表">
                                    <DoubleRightOutlined onClick={() => setTreeVisible(true)} />
                                </Tooltip>
                            )}
                        </div>
                    </Card>
                </Spin>
                {/*右侧 */}
                <div
                    className={classnames({
                        [styles.userContainer]: true,
                        [styles.userContainerHide]: !treeVisible,
                    })}
                >
                    <div style={{ height: '50px' }}>
                        <span style={{ float: 'right', marginRight: '10px' }}>
                            <Button icon={<OrderedListOutlined className={styles.icon} />} onClick={sort} style={{ marginLeft: '30px', verticalAlign: 'middle', marginTop: '10px' }}>
                                调序
                            </Button>
                        </span>
                    </div>
                    
                    <Table 
                        // rowClassName={setRowClassName}
                        size="small"
                        rowKey='ID'
                        bordered
                        onRow={record => {
                            return {
                              onDoubleClick: event => {event.stopPropagation(); editEventType(record)}, //双击
                            };
                          }}
                        columns={columns}
                        dataSource={tableData[pickItem]}
                        scroll={{ y: 'calc(100vh - 155px)' }}
                        pagination={{
                            showTotal: (total, range) =>
                                `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                            pageSizeOptions: [10, 20, 50, 100],
                            defaultPageSize: 20,
                            showQuickJumper: true,
                            showSizeChanger: true,
                        }}
                    />
                    
                </div>
                {/* Modal弹框 */}
                {/* 添加事件 */}
                <AddModal
                    visible={addVisible}
                    type={isType} 
                    formObj={formObj} 
                    rember1={rember1}
                    maxLength={maxLength}
                    onCancel={() => setAddvisible(false)}
                    treeData={treeData}
                    selectData={select}
                    callBackSubmit={onSubmit}
                />
                <ProcessModal
                    visible={processVisible}
                    formObj={formObj}
                    title1={title1}
                    maxLength={maxLength}
                    onCancel={() => setProcessVisible(false)}
                    callBackSubmit={onOK1}
                />
                <SortModal
                    title="调整顺序"
                    visible={sortVisible}
                    sortData1={sortData}
                    pickItem={pickItem}
                    onCancel={() => setSortVisible(false)}
                    callBackSubmit={onOK}
                />
                <ViewModal
                    formObj={formObj}
                    visible={viewVisible}
                    onCancel={() => setViewVisible(false)}
                    title2={title2}
                    callBackSubmit={onOK11}
                />
            </div>
        </div>

    )
};

export default incident;