import { Pagination, Dialog, Input, Button, Table, Select } from "@alifd/next";
import request from '../../../_server/index.js'
import React from "react";
import "./index.less";

const columns = [
    {
        title: "id",
        dataIndex: "id",
        width: 100,
    },
    {
        title: "系统",
        dataIndex: "sysName",
        width: 100,
    },
    {
        title: "业务类型编码",
        dataIndex: "typeCode",
    },
    {
        title: "业务类型",
        dataIndex: "typeName",
    },
    {
        title: "子类型编码",
        dataIndex: "code",
    },
    {
        title: "子类型名称",
        dataIndex: "name",
    },
];

class DatamapLayer extends React.Component<any, any>{
    constructor(props: any) {
        super(props);
        this.state = {
            result: [],
            pageNum: 1,
            systemList: [],
            typeList: []
        }

        this.getSystem()

    }

    componentDidMount() {
        this.onSubmit()
    }

    getSystem = () => {
        request.postUrl("/a/report/enum/getSystem").then((res: any) => {
            if (res.code === 0) {
                this.setState({
                    systemList: res.data,
                });
                return;
            }
        });
    };
    getBusinessType = (id: any) => {
        request
            .postUrl("/a/report/enum/getBusinessType", {
                id,
            })
            .then((res: any) => {
                if (res.code === 0) {
                    this.setState({
                        typeList: res.data,
                    });
                    return;
                }
            });
    };

    handleOk = () => {
        console.log('出发数据', this.state)
        this.props.setDatamapDetail(this.state.record);
    }
    closeDialog = () => {
        console.log('关闭')
        this.props.closeDatamapLayer();
    }
    onSubmit = () => {
        console.log('提交', this.state)
        let { sysId, typeId, pageNum, code, name } = this.state;
        request
            .postUrl("/a/report/enum/getDataEnumList", {
                sysId,
                typeId,
                name,
                code,
                pageSize: 10,
                pageNum,
            })
            .then((res: any) => {
                if (res.code === 0) {
                    this.setState({
                        result: res.data.result,
                        total: res.data.total,
                    });
                    return;
                }
            });
    };

    onChangeSelect = (e: any, name: string) => {
        this.setState({
            [name]: e,
        });

        if (name === "sysId") {
            this.getBusinessType(e);
        }
    }
    onChange = (e: any) => {
        console.log('选中数据', e)
        if (e && e.target) {
            this.setState({
                [e.target.name]: e.target.value,
            });
        }
    }

    render() {
        let _this = this
        return (
            <Dialog
                title="数据字典"
                footerAlign='right'
                visible={this.props.isModalVisible}
                onClose={this.closeDialog}
                onCancel={this.closeDialog}
                onOk={this.handleOk}
                width='1100'
            >
                <div>
                    <div className="formData">
                        <div className="formItemOne">
                            <div className="label">系统</div>
                            <div className="box">
                                <Select
                                    style={{ width: 100 + '%' }}
                                    name="sysId"
                                    placeholder="请选择"
                                    value={this.state.sysId}
                                    onChange={(e) => this.onChangeSelect(e, 'sysId')}
                                    dataSource={this.state.systemList.map((v: any) => ({
                                        label: v.name,
                                        value: v.id,
                                    }))}
                                >
                                </Select>
                            </div>

                        </div>
                        <div

                            className="formItemOne"
                        >
                            <div className="label">业务类型</div>
                            <div className="box">
                                <Select
                                    style={{ width: 100 + '%' }}
                                    placeholder="请选择"
                                    name="typeId"
                                    onChange={(e) => this.onChangeSelect(e, 'typeId')}
                                    dataSource={this.state.typeList.map((v: any) => ({
                                        label: v.name,
                                        value: v.id,
                                    }))}
                                >
                                </Select>
                            </div>

                        </div>
                        <div

                            className="formItemOne"
                        >
                            <div className="label">子类型编码</div>
                            <div className="box">
                                <Input style={{ width: 100 + '%' }} name="code" onChange={this.onChange} placeholder='请输入' />
                            </div>

                        </div>
                        <div className="formItemOne">
                            <div className="label">子类型名称</div>
                            <div className="box">
                                <Input style={{ width: 100 + '%' }} name="name" onChange={this.onChange} placeholder='请输入' />
                            </div>

                        </div>

                        <div>
                            <Button type="primary" onClick={this.onSubmit}>
                                搜索
                            </Button>
                        </div>
                    </div>
                    <Table
                        fixedHeader
                        columns={columns}
                        dataSource={this.state.result}
                        rowSelection={{
                            mode: 'single',
                            onSelect(selected, record) {
                                console.log('点击后', selected, record)
                                _this.setState({
                                    record,
                                });
                            }
                        }}
                    />
                </div>
                <div>
                    <Pagination
                        style={{
                            textAlign: 'center',
                            marginTop: '10px'
                        }}
                        total={this.state.total}
                        current={this.state.pageNum}
                        showJump={false}
                        onChange={(current: number) => {
                            this.setState({
                                pageNum: current
                            })
                            this.onSubmit()
                        }}
                    ></Pagination>
                </div>

            </Dialog>
        );
    }
}


export { DatamapLayer };