import React, { useEffect, useState } from 'react'
import { Spin, Popconfirm, Select, Row, Col, Button, Input, Table } from 'antd';
import { connect } from 'react-redux';
import ProTable from '@ant-design/pro-table';
import moment from 'moment';
import MemberModal from '../components/memberModal';
import ResetPasswordModal from '../components/resetPassword';
import { useFsRequest, ApiTable } from '$utils';
import './style.less';
function Member(props) {
    const { loading, clientHeight, actions, dispatch, member, user } = props;
    const [pageSize, setPageSize] = useState(10);
    const [currentPage, setCurrentPage] = useState(1);
    const [searchValue, setSearchValue] = useState('')
    const queryData = (search) => {
        const query = {
            limit: search ? 10 : pageSize || 10,
            page: search ? 1 : currentPage || 1,
            name: searchValue,
        }

        dispatch(actions.memberManagement.getUserList(query));
    }


    useEffect(() => {
        queryData();
    }, [pageSize, currentPage]);

    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            render: (text, record, index) => { return index + 1 }
        },
        {
            title: '备份信息',
            dataIndex: 'note',
        },
        {
            title: '备份大小',
            dataIndex: 'size',
        },
        {
            title: '备份时间',
            dataIndex: 'createTime',
        },
        {
            title: '状态',
            dataIndex: 'state',
            render: (text, record) => {
                return <span style={{ color: record?.enabled ? '#87d068' : '#f50' }}>● {record?.enabled ? '正常' : '禁用'}</span>
            }
        },
        {
            title: '操作',
            width: 160,
            key: 'option',
            valueType: 'option',
            render: (text, record) => {
                const options = [];

                options.push(
                    <Popconfirm
                        key="del"
                        placement="top"
                        title={<><div>是否确认删除该用户？</div>
                        </>}
                        onConfirm={() => handleDelete(record.id)}
                        okText="是"
                        cancelText="否"
                    >
                        <a>删除</a>
                    </Popconfirm>)
                user?.username == 'SuperAdmin' && options.push(
                    <Popconfirm
                        key="del"
                        placement="top"
                        title={<><div>是否确认重置该用户密码？</div>
                        </>}
                        onConfirm={() => {
                            dispatch(actions.memberManagement.modifyUser(record.id, { password: 'e10adc3949ba59abbe56e057f20f883e' }, '重置密码'))
                        }}
                        okText="是"
                        cancelText="否"
                    >
                        <a>重置密码</a>
                    </Popconfirm>)


                return options;

            },
        },
    ];

    const handleDelete = (id) => {
        dispatch(actions.memberManagement.deleteUser(id)).then(() => {
            queryData();
        });
    };

    const onFinish = async (values, editData) => {
        if (editData) {
            const dataToSave = { ...values }
            return dispatch(
                actions.memberManagement.modifyUser(editData.id, dataToSave, values?.msg || ''),
            ).then((res) => {
                if (res.success) {
                    queryData();
                    return true;
                } else {
                    return false;
                }
            });
        }

        return dispatch(actions.memberManagement.addUser({
            ...values,
        })).then(res => {
            if (res.success) {
                queryData();
                return true;
            } else {
                return false;
            }
        });
    };

    return <Spin spinning={loading}>
        <Row className='protable-title'>
            <Col span={12}>
                <MemberModal
                    triggerRender={<Button type='primary'>新建</Button>}
                    title="新建用户"
                    onFinish={onFinish}
                    key="addModel"
                />
            </Col>
            <Col span={12} style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
                <span>备份信息： </span> <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
                }
            }
            pagination={{
                size: 'large',
                total: member?.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={member?.rows || []}
            options={false}
        />
    </Spin>

}

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

export default connect(mapStateToProps)(Member);