import { useEffect, useState } from 'react';
import { Table, Form, Input, Button, Row, Col, TreeSelect } from 'antd';
import './index.less';
import { organizationData } from '@utils/index'
import apiObj from '@api/index';
const { post, api } = apiObj;

const { SHOW_PARENT } = TreeSelect;
function UserList(props) {
    useEffect(() => {
        getHospitalTree();
        //刷新列表
        getTableData();

    }, []);
    const {checkedIds,setChecked} = props;
    const [size, setSize] = useState(15);       //每页显示条数
    const [current, setCurrent] = useState(1);       //每页显示条数
    const [total, setTotal] = useState(0);       //每页显示条数
    const [dataSource, setDataSource] = useState([]);   //列表数据
    const [treeData,setTreeData] = useState([]);

    //获取当前用户组织
    function getHospitalTree() {
        post(api.getHospitalTree).then((res) => {
            if (res.data.code === 200) {
                const data = res.data.data;
                let arr = data ? data : []
                arr = organizationData(arr)
                setTreeData(arr)
            }
        })
    }
    function onChange(){

    }
    //获取表格数据
    function getTableData(param = {}) {
        post(api.getHospitalUser, param).then((res) => {
            if (res.data.code === 200) {
                const data = res.data.data;
                setTotal(data.total);
                setCurrent(param.current);
                setSize(param.size);
                setDataSource(data.records);
            }

        })
    }

    //翻页
    function onPageChange(current, size){
        const values = form.getFieldsValue();
        const params = {...values,current,size};
        getTableData(params);
    }
    //表格渲染
    function RenderTable() {
        const columns = [
            { title: '全选',width:60, dataIndex: 'title', key: 'title' },
            { title: '姓名', dataIndex: 'name', key:'name'},
            { title: '电话号码', dataIndex: 'mobilePhone', key: 'mobilePhone' },
            { title: '所属组织', dataIndex: 'hospitalName', key: 'hospitalName' },
        ];
        const rowSelection = {
            /*getCheckboxProps:(record)=>{
                console.log(23,record)
            },*/
            selectedRowKeys:checkedIds,
            onChange:(selectedRowKeys,selectedRows)=>{
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
                setChecked(selectedRowKeys,selectedRows);
            }
        };
        return (
            <Table
                rowSelection={rowSelection}
                rowKey={record => record.hospitalId+"-"+record.id}
                columns={columns}
                dataSource={dataSource}
                pagination={{
                    showSizeChanger:true,
                    pageSizeOptions:[15,30,60,120],
                    defaultPageSize:size,
                    current: current,
                    size:'small',
                    total: total,
                    pageSize:size,
                    showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
                    onChange:onPageChange,
                }}
            />
        )

    }
    //筛选项渲染
    const [form] = Form.useForm();
    const onFinish = (values: any) => {
        getTableData(values);
    };
    const onReset = () => {
        form.resetFields();
        getTableData();
    };
    return (
        <div className='wrapper'>
            <div className="filter-box">
                <Form form={form} name="control-hooks" onFinish={onFinish}>
                    <Row gutter={24}>
                        <Col span={5} key={1}>
                            <Form.Item name="name" label="姓名">
                                <Input placeholder='姓名' allowClear/>
                            </Form.Item>
                        </Col>
                        <Col span={5} key={2}>
                            <Form.Item name="mobilePhone" label="手机号码">
                                <Input placeholder='手机号码' allowClear/>
                            </Form.Item>
                        </Col>
                        <Col span={7} key={3}>
                            <Form.Item name="hospitals" label="所属组织">
                                <TreeSelect
                                    showSearch={false}
                                    treeData={treeData}
                                    onChange={onChange}
                                    treeCheckable
                                    maxTagCount={1}
                                    showCheckedStrategy={SHOW_PARENT}
                                    placeholder="请选择组织"
                                    style={{ width: 240 }}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={7} key={4}>
                            <Form.Item>
                                <Button type="primary" htmlType="submit">
                                    查询
                                </Button>
                                <Button htmlType="button" onClick={onReset}>
                                    重置
                                </Button>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div className="table">
                <div className="table-header">
                    <h2 className="table-title">用户列表</h2>
                </div>
                <RenderTable />
            </div>
        </div>
    )
}

export default UserList;