import React, { useEffect, useState } from 'react';
import { Form, Modal, Table, Input, Select, Tooltip, Button, notification, Spin, Image, Menu, Dropdown, Space, Popconfirm } from 'antd';
import { CM_Event_ReloadEventExtendPages, CM_Event_RemoveEventExtendPage } from '@/services/standingBook/api';
import {
    PlusSquareFilled,
    EditTwoTone,
    DeleteOutlined,
    PlusSquareOutlined,
    RollbackOutlined
} from '@ant-design/icons';
import AddViewModal from './AddViewModal'
import { useHistory } from 'react-router-dom';
import { set } from 'immutable';
import styles from './incident.less';
const incidentView = props => {
    const history = useHistory();
    const [tableData, setTableData] = useState([])
    const [addViewVisible, setAddViewVisible] = useState(false)
    const [treeLoading, setTreeLoading] = useState(false)
    const [flag,setFlag] = useState(0)
    const [obj,setObj] = useState('')
    const [type,setType] = useState('')

    const columns = [
        {
            title: () => (<span style={{fontWeight:'bold'}}>视图标签</span>),
            dataIndex: 'WebLabel',
            key: 'WebLabel',
            width: 150,
            ellipsis: true,
            render: item => (
                <div
                    ref={r => {
                        if (r) {
                            r.innerHTML = item;
                        }
                    }}
                />
            )
        }
        ,
        {
            title: () => (<span style={{fontWeight:'bold'}}>视图模块</span>),
            dataIndex: 'WebPage',
            key: 'WebPage',
            width: 150,
            ellipsis: true,
            render: item => (
                <div
                    ref={r => {
                        if (r) {
                            r.innerHTML = item;
                        }
                    }}
                />
            )
        },
        {
            title: () => (<span style={{fontWeight:'bold'}}>视图参数</span>),
            dataIndex: 'WebParam',
            key: 'WebParam',
            width: 150,
            ellipsis: true,
            render: item => (
                <div
                    ref={r => {
                        if (r) {
                            r.innerHTML = item;
                        }
                    }}
                />
            )
        },
        ,
        {
            title: () => (<span style={{fontWeight:'bold'}}>手持视图标签</span>),
            dataIndex: 'MobileLabel',
            key: 'MobileLabel',
            width: 150,
            ellipsis: true,
            render: item => (
                <div
                    ref={r => {
                        if (r) {
                            r.innerHTML = item;
                        }
                    }}
                />
            )
        },
        {
            title: () => (<span style={{fontWeight:'bold'}}>手持视图模块</span>),
            dataIndex: 'MobilePage',
            key: 'MobilePage',
            width: 150,
            ellipsis: true,
            render: item => (
                <div
                    ref={r => {
                        if (r) {
                            r.innerHTML = item;
                        }
                    }}
                />
            )
        },
        ,
        {
            title: () => (<span style={{fontWeight:'bold'}}>手持视图参数</span>),
            dataIndex: 'MobileParam',
            key: 'MobileParam',
            width: 150,
            ellipsis: true,
            render: item => (
                <div
                    ref={r => {
                        if (r) {
                            r.innerHTML = item;
                        }
                    }}
                />
            )
        },
        {
            title: () => (<span style={{fontWeight:'bold'}}>操作</span>),
            key: 'action',
            aligin: 'center',
            width: 50,
            render: record => (
                <Space size="middle">

                    <Tooltip title="编辑用户">
                        <EditTwoTone
                            onClick={() => editView(record)}
                            style={{ fontSize: '16px' }}
                        />
                    </Tooltip>
                    <Tooltip title="删除">
                        <Popconfirm
                            placement="bottomRight"
                            title={
                                <p>
                                    即将删除事件处理流程，是否确认删除？
                                </p>
                            }
                            okText="确认"
                            cancelText="取消"
                            onConfirm={() => deleteView(record)}
                        >
                            <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
                        </Popconfirm>
                    </Tooltip>
                </Space>
            )

        }
    ]

    useEffect(()=>{
        setTreeLoading(true);
       CM_Event_ReloadEventExtendPages({eventName:props.location.state.formObj.name}).then(res=>{
        setTreeLoading(false);
        if (res.msg === 'Ok'||res.msg==='') {
            console.log(res.data)
            setTableData(res.data)
        }
       })
        
    },[flag])

    const onSumbit =()=>{
        callBackSubmit()
    }

    const addView=()=>{
        setType('add')
        setAddViewVisible(true)
    }

    const editView = record =>{
        setType('edit')
        setAddViewVisible(true)
        setObj(record.ID)
    }

    const deleteView= record =>{
        console.log(record)
        CM_Event_RemoveEventExtendPage({eventExtendId: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 okk =()=>{
        setAddViewVisible(false)
        setFlag(flag+1)
    }
    const back = () => {
        let rember = props.location.state.rember;
        history.push({
          pathname: '/bsmanger/workOrder/incident',
          state: { rember },
        });
      };
    return(
            <>
            <Spin tip="loading..." spinning={treeLoading}>
                <div className={styles.containerBox}>
                    <div className={styles.config}>
                        <div className={styles.title}>{`${props.location.state.title2}受理流程和权限`}</div>
                        <div className={styles.btn}>
                            <Button
                                type="primary"
                                icon={<PlusSquareOutlined />}
                                onClick={() => addView()}
                            >
                                新增
                            </Button>

                            <Button type="primary" icon={<RollbackOutlined />} onClick={()=>back()}>
                                返回
                            </Button>
                        </div>
                    </div>
            <Table
                size="small"
                rowKey='ID'
                bordered
                onRow={record => {
                    return {
                      onDoubleClick: event => {event.stopPropagation(); editView(record)}, //双击
                    };
                  }}
                columns={columns}
                style={{overflowY: 'scroll'}}
                dataSource={tableData}
                pagination={false}
                scroll={{ x: 'max-content'}}
            />
            </div>
            </Spin>
            <AddViewModal
                visible={addViewVisible} 
                title="事件辅助视图配置"
                onClose={()=>setAddViewVisible(false)}
                title2={props.location.state.title2}
                callBackSubmit={okk}
                obj={obj}
                type={type}
                placement="right"
            />
        
        </>
    )
}
export default incidentView;