import React, { useEffect, useState } from 'react'
import { Spin, Popconfirm, Tree, Row, Col, Button, Input, Table } from 'antd';
import { connect } from 'react-redux';
import ProTable from '@ant-design/pro-table';
import moment from 'moment';
import DataSourceModal from '../components/dataSourceManagementModal';
import { useFsRequest, ApiTable } from '$utils';
import './style.less';
function DataSourceManagement(props) {
    const { loading, clientHeight, actions, dispatch, dataSources, adapters } = props;
    const [pageSize, setPageSize] = useState(10);
    const [currentPage, setCurrentPage] = useState(1);
    const [searchValue, setSearchValue] = useState('')
    const [visible, setVisible] = useState(false);//是否展示新增编辑模态框
    const [editData, setEditData] = useState(null);//模态框编辑数据
    const [refreshTree, setRefreshTree] = useState(1);
    const queryData = (search) => {
        const query = {
            // limit: search ? 10 : pageSize || 10,
            // page: search ? 1 : currentPage || 1,
            name: searchValue
        }

        dispatch(actions.metadataAcquisition.getDataSources(query));
    }
    const { data: treeData = [] } = useFsRequest({
        url: ApiTable.getResourceCatalog,
        refreshDeps: [refreshTree]
    });

    useEffect(() => {
        dispatch(actions.metadataAcquisition.getAdapters())
        queryData();
    }, [pageSize, currentPage]);

    const handleDelete = (id) => {
        dispatch(actions.metadataAcquisition.deleteDataSource(id)).then(() => {
            queryData();
        });
    };

    const columns = [
        {
            title: '数据源名称',
            dataIndex: 'name',
        },
        {
            title: '挂载点',
            dataIndex: 'mountPath',
            render: (text, record) => record?.resourceCatalog?.name
        },
        {
            title: '数据源属性',
            dataIndex: 'type',
            render: (text, record) => record?.type == '备份数据库' ? '备份数据库' : '原数据库'
        },
        {
            title: '适配器类型',
            dataIndex: 'adapter',
            render: (text, record) => {
                const adapterInfo = record?.adapter
                return adapterInfo?.adapterName
            }
        },
        {
            title: '采集方式',
            dataIndex: 'control',
            render: (text, record) => {
                const adapterInfo = record?.adapter
                return adapterInfo?.mode
            }
        },
        {
            title: '工具版本',
            dataIndex: 'length',
            render: (text, record) => {
                const adapterInfo = record?.adapter
                return adapterInfo?.adapterVersion
            }
        },
        {
            title: '修改时间',
            dataIndex: 'time',
            render: (text, record) => moment(record?.time).format('YYYY-MM-DD HH:mm:ss')
        },
        {
            title: '描述',
            dataIndex: 'description',
            ellipsis: true,
            search: false,
        },
        {
            title: '操作',
            width: 160,
            key: 'option',
            valueType: 'option',
            render: (text, record) => {
                const options = [];
                options.push(<a onClick={() => {
                    setVisible(true)
                    setEditData(record)
                }} style={{ marginRight: 8 }}>编辑</a>)
                options.push(
                    <Popconfirm
                        key="del"
                        placement="top"
                        title={<><div>是否确认删除该数据源？</div>
                            <div>(将同步删除数据源下的元数据)</div></>}
                        onConfirm={() => handleDelete(record.id)}
                        okText="是"
                        cancelText="否"
                    >
                        <a>删除</a>
                    </Popconfirm>)
                return options;

            },
        },
    ];

    const onFinish = (values) => {
        const { stepOneValues, stepTwoValues, } = values;
        const adapterInfo = adapters?.find(x => x.adapterName == stepOneValues?.adapterName)
        if (adapterInfo) {
            const dataToSave = {
                name: stepOneValues?.name,
                audited: true,
                adapterId: adapterInfo?.id,
                mountPath: stepOneValues?.mountPath,
                catalogKey: stepOneValues?.catalogKey,
                description: stepOneValues?.description,
                type: stepOneValues?.type,
                config: stepTwoValues,
                time: moment()
            }
            if (editData) {
                dispatch(actions.metadataAcquisition.modifyDataSource(editData?.id, dataToSave)).then(res => {
                    if (res.success) {
                        setVisible(false);
                        setEditData(null);
                        queryData();
                    }
                })
            } else {
                dispatch(actions.metadataAcquisition.addDataSource(dataToSave)).then(res => {
                    if (res.success) {
                        setVisible(false);
                        setEditData(null);
                        queryData();
                    }
                })
            }
        }
    }
    const refresh = () => {
        // queryData();
        setRefreshTree(refreshTree + 1)
    }

    return <Spin spinning={loading}>
        <Row className='protable-title'>
            <Col span={12}><Button type='primary' onClick={() => { setVisible(true) }}>新建</Button></Col>
            <Col span={12} style={{ textAlign: 'right' }}><Input
                value={searchValue} onChange={e => { setSearchValue(e.target.value) }}
                style={{ width: 220, marginRight: 15 }} placeholder="数据源名称" /><Button onClick={() => {
                    setCurrentPage(1)
                    setPageSize(10)
                    queryData(true)
                }} type='primary'>查询</Button></Col>
        </Row>
        <ProTable
            columns={columns}
            dateFormatter="string"
            search={false}
            scroll={
                {
                    scrollToFirstRowOnChange: true,
                    y: clientHeight - 260
                }
            }
            //1490 2256
            pagination={{
                size: 'large',
                total: dataSources?.count,
                showSizeChanger: true,
                // showQuickJumper: true,
                // current: currentPage,
                // pageSize: pageSize || 10,
                defaultPageSize: 10,
                pageSizeOptions: [10, 20, 50],
                // showTotal: (total) => {
                //     return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / pageSize)}页，${total}项`}</span>
                // },
                // onShowSizeChange: (currentPage, pageSize) => {
                //     setCurrentPage(currentPage);
                //     setPageSize(pageSize);

                // },
                // onChange: (page, pageSize) => {
                //     setCurrentPage(page);
                //     setPageSize(pageSize);

                // }
            }}
            dataSource={dataSources?.rows || []}
            options={false}
        />

        {
            visible && <DataSourceModal
                onCancel={
                    () => {
                        setVisible(false)
                        setEditData(null)
                    }
                }
                editData={editData}
                visible={visible}
                onFinish={onFinish}
                treeData={treeData}
                refresh={refresh}
                {...props}
            />
        }
    </Spin>

}

function mapStateToProps(state) {
    const {
        auth, global, datasources, adapters
    } = state;
    return {
        loading: datasources.isRequesting || adapters?.isRequesting,
        clientHeight: global.clientHeight,
        actions: global.actions,
        dataSources: datasources?.data || {},
        adapters: adapters?.data || []
    };
}

export default connect(mapStateToProps)(DataSourceManagement);