import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Spin, Table, Popconfirm, Button, Input } from 'antd';
import moment from 'moment';
import FileSaver from 'file-saver';
import BusinessDatabaseModal from '../components/businessDatabaseModal';
const BusinessFilesTable = (props) => {
    const { user, dispatch, actions, clientHeight, resourceCatalogId,
        resourceCatalogPath, isRequesting, metadataModels } = props;
    const { metadataManagement } = actions;
    const SortValues = { 'ascend': 'asc', 'descend': 'desc' };
    const [tableData, setTableData] = useState([]);
    const [tableDataCount, setTableDataCount] = useState(0);//Table数据
    const [updateAtSort, setUpdateAtSort] = useState('descend');
    const [keywords, setKeywords] = useState('');
    const [limit, setLimit] = useState(10);
    const [currentPage, setCurrentPage] = useState(1);
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [selectedRows, setSelectedRows] = useState([]);
    const [modalVisible, setModalVisible] = useState(false);
    const [editData, setEditData] = useState({});

    useEffect(() => {
        setUpdateAtSort('descend');
        onSearch('descend');
    }, []);

    const initData = (query = {}) => {
        dispatch(metadataManagement.getBusinessMetadataRestapis({ catalog: resourceCatalogId, keywords, orderBy: 'updateAt', ...query })).then(res => {
            if (res.success) {
                setTableData(res.payload.data.rows);
                setTableDataCount(res.payload.data.count);
            }
        })
    }
    const onAdd = (record, add) => {
        dispatch(metadataManagement.getMetadataModels({ modelTypes: '接口' })).then(res => {
            if (res.success) {
                if (!add)
                    setEditData({ title: '查看业务元数据', record: { path: '/' + resourceCatalogPath.join('/'), businessMetadata: record.businessMetadataRestapis, ...record, ...record.attributesParam } });
                else
                    setEditData({ add: true, title: '新建业务元数据', record: { businessMetadata: record.businessMetadataRestapis, ...record } });
                setModalVisible(true);
            }
        })
    }
    const confirmDelete = (id) => {
        dispatch(metadataManagement.delBusinessMetadataRestapis(id)).then(res => {
            if (res.success) {
                onSearch(); setModalVisible(false);
            }
        });
    }
    const onTableChange = (pagination, filters, sorter) => {
        let limit = Number.parseInt(pagination.pageSize);
        let offset = Number.parseInt(pagination.current) - 1;
        setCurrentPage(pagination.current);
        setLimit(limit);
        let query = { offset, limit, orderDirection: SortValues[updateAtSort] };
        if (sorter.columnKey === 'updateAt') {
            query.orderDirection = SortValues[sorter.order];
            setUpdateAtSort(sorter.order);
        }
        setSelectedRowKeys([]);
        setSelectedRows([]);
        initData(query);
    }
    const columns = [
        {
            title: '元数据名称',
            dataIndex: 'name',
            key: 'name',
            ellipsis: true,
            fixed: 'left',
            width: '7%',
        }, {
            title: '元数据类型',
            dataIndex: 'type',
            key: 'type',
            fixed: 'left',
            width: '6%',
            render: (text, record, index) => {
                return '接口'
            }
        }, {
            title: '信息资源名称',
            dataIndex: 'resourceName',
            key: 'resourceName',
            ellipsis: true,
            render: (text, record, index) => {
                let data = record.businessMetadataRestapis;
                if (data && data.length)
                    return data[0].resourceName;
                else
                    return ''
            }
        }, {
            title: '信息资源摘要',
            dataIndex: 'resourceAbstract',
            key: 'resourceAbstract',
            ellipsis: true,
            render: (text, record, index) => {
                let data = record.businessMetadataRestapis;
                if (data && data.length)
                    return data[0].resourceAbstract;
                else
                    return ''
            }
        }, {
            title: '信息资源提供方',
            dataIndex: 'resourceProvider',
            key: 'resourceProvider',
            ellipsis: true,
            render: (text, record, index) => {
                let data = record.businessMetadataRestapis;
                if (data && data.length)
                    return data[0].resourceProvider;
                else
                    return ''
            }
        }, {
            title: '信息资源分类',
            dataIndex: 'resourceCategory',
            key: 'resourceCategory',
            ellipsis: true,
            render: (text, record, index) => {
                let data = record.businessMetadataRestapis;
                if (data && data.length)
                    return data[0].resourceCategory;
                else
                    return ''
            }
        }, {
            title: '信息资源标识符',
            dataIndex: 'resourceId',
            key: 'resourceId',
            ellipsis: true,
            render: (text, record, index) => {
                let data = record.businessMetadataRestapis;
                if (data && data.length)
                    return data[0].resourceId;
                else
                    return ''
            }
        }, {
            title: '元数据标识符',
            dataIndex: 'metadataId',
            key: 'metadataId',
            ellipsis: true,
            render: (text, record, index) => {
                let data = record.businessMetadataRestapis;
                if (data && data.length)
                    return data[0].metadataId;
                else
                    return ''
            }
        }, {
            title: '创建者',
            dataIndex: 'createBy',
            key: 'createBy',
            ellipsis: true,
            render: (text, record, index) => {
                let data = record.businessMetadataRestapis;
                if (data && data.length)
                    return data[0].user.username;
                else
                    return ''
            }
        }, {
            title: '最后执行时间',
            dataIndex: 'updateAt',
            key: 'updateAt',
            width: '8%',
            sortOrder: updateAtSort,
            sorter: (a, b) => moment(a.updateAt).valueOf() - moment(b.updateAt).valueOf(),
            sortDirections: ['descend', 'ascend', 'descend'],
            render: (text, record, index) => {
                let data = record.businessMetadataRestapis;
                if (data && data.length)
                    return data[0].updateAt && moment(data[0].updateAt).format('YYYY-MM-DD HH:mm:ss')
                else
                    return ''
            }
        }, {
            title: '操作',
            dataIndex: 'action',
            width: '5%',
            fixed: 'right',
            render: (text, record) => {
                if (record.businessMetadataRestapis.length) {
                    return <div>
                        <a style={{ marginLeft: 10 }} onClick={() => onAdd(record, false)}>查看</a>
                        <Popconfirm
                            title="是否确认删除该业务元数据？"
                            onConfirm={() => confirmDelete(record.businessMetadataRestapis[0].id)}
                        > <a style={{ marginLeft: 10 }}>删除</a></Popconfirm>
                    </div>
                } else
                    return <a style={{ marginLeft: 10 }} onClick={() => onAdd(record, true)}>新建</a>
            }
        }];

    const onSearch = (sort) => {
        setSelectedRowKeys([]);
        setSelectedRows([]);
        setCurrentPage(1);
        initData({ limit, offset: 0, orderDirection: SortValues[sort || updateAtSort] });
    }
    const handleExport = (isAll = false) => {
        let tableHeader = `<tr>`;
        columns.filter(c => c.dataIndex != 'action').map(c => { tableHeader += `<th><div>${c.title}</div></th>`; });
        tableHeader += '</tr>';
        if (isAll) {
            dispatch(metadataManagement.getBusinessMetadataRestapis({ catalog: resourceCatalogId })).then(res => {
                if (res.success) {
                    handleExportTable(tableHeader, res.payload.data.rows);
                }
            })
        } else {
            let data = []
            if (updateAtSort === 'descend') {
                data = selectedRows.sort((a, b) => moment(b.updateAt).valueOf() - moment(a.updateAt).valueOf());
            } else {
                data = selectedRows.sort((a, b) => moment(a.updateAt).valueOf() - moment(b.updateAt).valueOf());
            }
            handleExportTable(tableHeader, data);
        }
    }
    const handleExportTable = (tableHeader, contentData) => {
        let tableContent = '';
        contentData.map(cd => {
            tableContent += `<tr>`;
            tableContent += `<th style="font-weight:600"><div>${cd.name}</div></th>`;
            tableContent += `<th style="font-weight:600"><div>接口</div></th>`;
            let data = cd.businessMetadataRestapis;
            tableContent += `<th style="font-weight:600"><div>${data && data.length && data[0].resourceName || ''}</div></th>`;
            tableContent += `<th style="font-weight:600"><div>${data && data.length && data[0].resourceAbstract || ''}</div></th>`;
            tableContent += `<th style="font-weight:600"><div>${data && data.length && data[0].resourceProvider || ''}</div></th>`;
            tableContent += `<th style="font-weight:600"><div>${data && data.length && data[0].resourceCategory || ''}</div></th>`;
            tableContent += `<th style="font-weight:600"><div>${data && data.length && data[0].resourceId || ''}</div></th>`;
            tableContent += `<th style="font-weight:600"><div>${data && data.length && data[0].metadataId || ''}</div></th>`;
            tableContent += `<th style="font-weight:600"><div>${data && data.length && data[0].user.username || ''}</div></th>`;
            tableContent += `<th style="font-weight:600"><div>${data && data.length && data[0].updateAt &&
                moment(data[0].updateAt).format('YYYY-MM-DD HH:mm:ss') || ''}</div></th>`;

            tableContent += `</tr>`;
        })
        let exportTable = `\uFEFF<table border="1">
            ${tableHeader}
            ${tableContent}
        </table>`;
        let tempStr = new Blob([exportTable], { type: 'text/plain;charset=utf-8' });
        FileSaver.saveAs(tempStr, `接口业务元数据导出.xls`);
    }
    //新建、修改
    const onConfirm = (values) => {
        let obj = {}
        if (editData.add) {
            obj = { createBy: user.id, metadataRestapiId: editData.record.id, ...values }
            dispatch(metadataManagement.postBusinessMetadataRestapis(obj)).then(res => {
                if (res.success) {
                    onSearch(); setModalVisible(false);
                }
            });
        } else {
            obj = { ...values }
            dispatch(metadataManagement.putBusinessMetadataRestapis(editData.record.businessMetadataRestapis[0].id, obj)).then(res => {
                if (res.success) {
                    onSearch(); setModalVisible(false);
                }
            });
        }
    }
    return <Spin spinning={isRequesting}>
        <div style={{ marginBottom: 16 }}>
            {
                tableDataCount == 0 ? <Button disabled={tableDataCount == 0} onClick={() => handleExport()}>导出</Button> :
                    selectedRowKeys && selectedRowKeys.length ?
                        <Button disabled={tableDataCount == 0} onClick={() => handleExport()}>导出</Button>
                        : <Popconfirm title={'是否导出全部？'} onConfirm={() => handleExport(true)} okText="确定" cancelText="取消">
                            <Button disabled={tableDataCount == 0} > 导出</Button>
                        </Popconfirm>
            }
            <Button type='primary' style={{ marginLeft: 16, float: 'right' }} onClick={onSearch}>查询</Button>
            <Input style={{ width: 220, float: 'right' }} placeholder="元数据名称"
                allowClear onPressEnter={onSearch} onChange={e => setKeywords(e.target.value || '')} />
        </div >
        <Table
            scroll={{ y: clientHeight - 320, x: 1700 }}
            rowKey='id'
            columns={columns}
            dataSource={tableData}
            onChange={onTableChange}
            pagination={{
                current: currentPage,
                pageSize: limit,
                total: tableDataCount,
                showSizeChanger: true,
                // showQuickJumper: true,
                showTotal: (total) => { return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / limit)}页，${total}项`}</span> },

            }}
            rowSelection={{
                onChange: (selectedRowKeys, selectedRows) => {
                    setSelectedRowKeys(selectedRowKeys)
                    setSelectedRows(selectedRows);
                },
                selectedRowKeys: selectedRowKeys
            }}
        >
        </Table>
        {
            modalVisible ?
                <BusinessDatabaseModal
                    metadataModels={metadataModels.filter(m => '接口' === m.modelType)}
                    editData={editData}
                    onCancel={() => setModalVisible(false)}
                    onConfirm={onConfirm}
                    resourceCatalogPath={resourceCatalogPath}
                    businessType='接口' /> : ''
        }
    </Spin >
}
function mapStateToProps(state) {
    const { global, auth, businessMetadataRestapis, metadataModels } = state;
    return {
        user: auth.user,
        actions: global.actions,
        clientHeight: global.clientHeight,
        isRequesting: businessMetadataRestapis.isRequesting || metadataModels.isRequesting,
        metadataModels: metadataModels.data
    };
}
export default connect(mapStateToProps)(BusinessFilesTable)