import React, { useState, useEffect } from 'react';
import styles from './maintenance.less'
import {
    Space,
    Table,
    Popconfirm,
    Tooltip,
    Button,
    notification
} from 'antd';
import {CM_XWBPlan_DataList, CM_XWBPlan_RemovePlan} from '@/services/maintenance/api';
import {
    EditTwoTone,
    DeleteOutlined,
    PlusOutlined
} from '@ant-design/icons';
import AddModal from './AddModal'

const maintenance = () => {
    const [addVisible, setAddVisible] = useState(false)
    const [type, setType] = useState('')
    const [formObj, setFormObj] = useState('')
    const [treeLoading, setTreeLoading] = useState(false);
    const [flag, setFlag] = useState(0); 
    const [tableData, setTableData] = useState([])

    const columns = [
        {
            title: '业务名称',
            dataIndex: 'businessName',
            key: 'businessName',
            width: 100,
            align:'center',
        },
        {
            title: '业务类型',
            dataIndex: 'businessType',
            key: 'businessType',
            width: 100,
            ellipsis: true,
            align:'center',
        },
        {
            title: '执行周期',
            dataIndex: 'docycle',
            key: 'docycle',
            width: 100,
            align:'center',
        },
        {
            title: '台账名称',
            dataIndex: 'accountName',
            key: 'accountName',
            width: 200,
            ellipsis: true,
            align:'center',
        },
        {
            title: '反馈名称',
            dataIndex: 'feedbackName',
            key: 'feedbackName',
            width: 200,
            align:'center',
        },
        {
            title: '台账过滤条件',
            dataIndex: 'filterCondition',
            key: 'filterCondition',
            width: 200,
            ellipsis: true,
            align:'center',
        },
        {
            title: '是否送审',
            dataIndex: 'isSubmit',
            key: 'isSubmit',
            width: 100,
            align:'center',
        },
        {
            title: '执行角色',
            dataIndex: 'doRole',
            key: 'doRole',
            width: 200,
            ellipsis: true,
            align:'center',
        },
        {
            title: '预生成天数',
            dataIndex: 'produceDays',
            key: 'produceDays',
            width: 100,
            align:'center',
        },
        {
            title: '在线任务量',
            dataIndex: 'onLines',
            key: 'onLines',
            width: 100,
            ellipsis: true,
            align:'center',
        },
        {
            title: '启停',
            dataIndex: 'doNot',
            key: 'doNot',
            width: 100,
            align:'center',
        },
        {
            title: '操作',
            ellipsis: true,
            key: 'action',
            align: 'center',
            render: (text, record) => (
                <Space>
                    <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>
                </Space>
            ),
        },
        
    ]

    useEffect(()=>{
        setTreeLoading(true);
        CM_XWBPlan_DataList().then(res=>{
            setTreeLoading(false);
            if(res.msg == 'Ok'){
                setTableData(res.data)
            }
        })
    },[flag])

    const add =()=>{
        setAddVisible(true)
        setType('add')
    }
    const editEventType =record=>{
        setAddVisible(true)
        setType('edit')
        setFormObj(record);
    }
    const deleteEventType = record =>{
        CM_XWBPlan_RemovePlan({planId: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 onSubmit =()=>{
        setAddVisible(false)
        setFlag(flag + 1)
    }

    return (
        <div className={styles.maintenanceContainer}>
            <div className={styles.contentContainers}>
                <div style={{ height: '50px', backgroundColor: 'white' }}>
                    <span style={{ float: 'right', marginRight: '10px' }}>
                        <Button icon={<PlusOutlined className={styles.icon} />} onClick={add} style={{ marginLeft: '30px', verticalAlign: 'middle', marginTop: '10px' }}>
                            添加
                        </Button>
                    </span>
                </div>
                <Table
                    // rowClassName={setRowClassName}
                    size="small"
                    rowKey='ID'
                    bordered
                    loading={treeLoading}
                    onRow={record => {
                        return {
                            onDoubleClick: event => { event.stopPropagation(); editEventType(record) }, //双击
                        };
                    }}
                    columns={columns}
                    dataSource={tableData}
                    scroll={{ y: 'calc(100vh - 215px)' }}
                    pagination={{
                        showTotal: (total, range) =>
                            `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                        pageSizeOptions: [10, 20, 50, 100],
                        defaultPageSize: 20,
                        showQuickJumper: true,
                        showSizeChanger: true,
                    }}
                />
                {/* 添加事件 */}
                <AddModal
                    visible={addVisible}
                    type={type}
                    onClose={() => setAddVisible(false)}
                    callBackSubmit={onSubmit}
                    formObj={formObj}
                    placement="right"
                />
            </div>
        </div>
    )
};

export default maintenance