import React, { useEffect, useState } from 'react';
import { Form, Modal, Table, Input, Select, Tooltip, Button, notification, Image, Menu, Dropdown, Space, Popconfirm } from 'antd';
import { CM_Event_ReloadEventExtendPages, CM_Event_RemoveEventExtendPage } from '@/services/standingBook/api';
import {
    PlusSquareFilled,
    EditTwoTone,
    DeleteOutlined,
} from '@ant-design/icons';
import AddViewModal from './AddViewModal'
import { set } from 'immutable';
const ViewModal = props => {
    const { callBackSubmit = () => { }, visible, onCancel, formObj, title2} = props;
    const [tableData, setTableData] = useState([])
    const [addViewVisible, setAddViewVisible] = 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(()=>{
        console.log(formObj)
       CM_Event_ReloadEventExtendPages({eventName:formObj.name}).then(res=>{
        if (res.msg === 'Ok'||res.msg==='') {
            console.log(res.data)
            setTableData(res.data)
        }
       })
        
    },[visible,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)
    }
    return(
        <Modal  
           title={`${title2}的辅助视图`}
           visible={visible}
           onCancel={onCancel}
           width="1200px"
           onOk={onSumbit}
        >
           <Tooltip title="添加">
                <PlusSquareFilled
                    onClick={() => addView()}
                    style={{
                        color: '#1890FF',
                        fontSize: '25px',
                        verticalAlign: 'middle',
                        marginLeft: '25px',
                        marginBottom: '10px'
                    }}
                />
            </Tooltip>
            <Table
                size="small"
                rowKey='ID'
                bordered
                onRow={record => {
                    return {
                      onDoubleClick: event => {event.stopPropagation(); editView(record)}, //双击
                    };
                  }}
                columns={columns}
                style={{ height: '15rem', overflowY: 'scroll', marginLeft: '25px', marginRight: '25px' }}
                dataSource={tableData}
                pagination={false}
                scroll={{ x: 'max-content'}}
            />
            <AddViewModal
                visible={addViewVisible} 
                title="事件辅助视图配置"
                onClose={()=>setAddViewVisible(false)}
                title2={title2}
                callBackSubmit={okk}
                obj={obj}
                type={type}
                placement="right"
            />
        </Modal>
    )
}
export default ViewModal;