import React from 'react';
import { Table, Button, Input, Spin, Message } from 'antd';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';

export default class Permission extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            selectedRowKeys: [],
            selectedRows: [],
            loading: false
        }
    }

    componentDidMount() {
        this.loadData();
    }

    loadData() {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/permissions',
            method: 'get',
            cache: false
        }).done((res) => {
            if (!res.error.length) {
                this.setState({
                    data: res.data
                })
            }
        }).always(() => {
            this.setState({
                loading: false
            });
        });
    }

    save() {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/permission',
            method: 'post',
            data: {
                data: JSON.stringify(this.state.data)
            }
        }).done((res) => {
            if (!res.error.length) {
                Message.success("保存成功");
                this.loadData();
            } else {
                Message.error(res.error[0].message);
            }
        }).always(() => {
            this.setState({
                loading: false
            });
        })
    }

    remove() {
        let deletedIds = [];
        for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
            let rowItem = this.state.selectedRows[idx];
            if (rowItem.id) {
                deletedIds.push(rowItem.id)
            }
        }
        this.state.selectedRowKeys.sort((a, b) => { return b - a });
        for (let idx = 0; idx < this.state.selectedRowKeys.length; idx++) {
            let dataIndex = this.state.selectedRowKeys[idx];
            this.state.data.splice(dataIndex, 1);
        }
        this.setState({
            data: this.state.data,
            selectedRowKeys: [],
            loading: deletedIds.length > 0
        });
        if (deletedIds.length) {
            $.ajax({
                url: globalConfig.context + '/api/permission/delete',
                method: 'post',
                data: {
                    data: JSON.stringify(deletedIds)
                }
            }).done((res) => {
                if (!res.error.length) {
                    Message.success("删除成功");
                } else {
                    Message.error(res.error[0].message);
                }
            }).always(() => {
                this.setState({
                    loading: false
                });
            })
        }
    }

    addNew() {
        this.state.data.push({
            id: '',
            name: '',
            url: ''
        });
        this.setState({
            data: this.state.data
        })
    }

    render() {
        const columns = [{
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            width: '10%'
        }, {
            title: '权限名字',
            dataIndex: 'name',
            key: 'name',
            render: (text, record, index) => {
                return <Input value={record.name} onChange={(e) => { record.name = e.target.value; this.setState({ data: this.state.data }); }} />
            },
            width: '40%'
        }, {
            title: '接口路径',
            dataIndex: 'url',
            key: 'url',
            render: (text, record, index) => {
                return <Input value={record.url} onChange={(e) => { record.url = e.target.value; this.setState({ data: this.state.data }); }} />
            },
            width: '50%'
        }];
        const rowSelection = {
            type: 'checkbox',
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRows: selectedRows,
                    selectedRowKeys: selectedRowKeys
                });
            }
        }
        return (
            <Spin spinning={this.state.loading}>
                <div>
                    <Button type="primary" onClick={this.save.bind(this)}>保存修改</Button>
                    <Button onClick={this.addNew.bind(this)}>新增</Button>
                    <Button onClick={this.remove.bind(this)}>删除选中</Button>
                </div>
                <Table columns={columns} dataSource={this.state.data} pagination={false} scroll={{ y: 450 }} rowSelection={rowSelection} />
            </Spin>
        );
    }
};
