/**
 * 表单权限维护
 */
import React, { Component } from 'react';
import { Table, Row, Col, Button, Checkbox, message, Select, Input, Modal } from 'antd';
import { $http } from '../../containers/config/https';
import store from '../../store';

const Option = Select.Option;
let userData;
let language = JSON.parse(window.sessionStorage.userData) ? JSON.parse(window.sessionStorage.userData).language : {}
class SetFormOrderTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            compontName: '001',
            type: 'H',
            authList: [],
            languageSize: {},//中英翻译
            language: JSON.parse(window.sessionStorage.userData),
            columnsC: [{
                title: 'code',
                dataIndex: 'code',
                width: '150px',
                key: 'code',
            }, {
                title: language == 'EN'? 'descripts' :'列名',
                dataIndex: 'desc',
                width: '200px',
                key: 'desc',
                render: (text, record, index) => {
                    return (
                        <Input style={{ width: '80%' }} value={text} onChange={this.onChange.bind(this, record, 'desc')}></Input>
                    )
                },
            }, {
                title: language == 'EN'? 'display' :'显示',
                key: 'display',
                dataIndex: 'display',
                width: '80px',
                render: (text, record, index) => {
                    var displayFlag = record.display;
                    if (displayFlag === "Y") {
                        displayFlag = true
                    } else {
                        displayFlag = false
                    }
                    return (
                        <Checkbox checked={displayFlag} onChange={this.CheckOnChange.bind(this, record, index, 'display')}></Checkbox>
                    )
                },
            },
                {
                    title: language == 'EN'? 'Read only' :'只读',
                    key: 'readOnly',
                    dataIndex: 'readOnly',
                    width: '80px',
                    render: (text, record, index) => {
                        var displayFlag = record.readOnly;
                        if (displayFlag === "Y") {
                            displayFlag = true
                        } else {
                            displayFlag = false                        }
                        return (
                            <Checkbox checked={displayFlag} onChange={this.CheckOnChange.bind(this, record, index, 'readOnly')}></Checkbox>
                        )
                    },
                },
                {
                    title: language == 'EN'? 'Enter jump' :'回车跳转',
                    key: 'enterJump',
                    dataIndex: 'enterJump',
                    width: '80px',
                    render: (text, record, index) => {
                        var displayFlag = record.enterJump;
                        if (displayFlag === "Y") {
                            displayFlag = true
                        } else {
                            displayFlag = false
                        }
                        return (
                            <Checkbox checked={displayFlag} onChange={this.CheckOnChange.bind(this, record, index, 'enterJump')}></Checkbox>
                        )
                    }
                }, {
                    title: language == 'EN'? 'Enter to save' : '回车保存',
                    key: 'enterSave',
                    dataIndex: 'enterSave',
                    width: '80px',
                    render: (text, record, index) => {
                        var displayFlag = record.enterSave;
                        if (displayFlag === "Y") {
                            displayFlag = true
                        } else {
                            displayFlag = false
                        }
                        return (
                            <Checkbox checked={displayFlag} onChange={this.CheckOnChange.bind(this, record, index, 'enterSave')}></Checkbox>
                        )
                    }
                }],
            columns: [],
            data: [],
            selectedRowKeys: [],
            configType: "C",
        };
        userData = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
    }
    //文本内容改变时触发
    onChange = (record, field, e) => {
        record[field] = e.target.value;
        this.forceUpdate();
    };
    //复选框勾选触发
    CheckOnChange = (record, index, field) => {
        if (record[field] === "Y") {
            record[field] = "N"
        } else {
            record[field] = "Y"
        }
        var data = this.state.data
        data[index] = record
        this.setState({ data: data })
    };

    // 保存列权限
    saveData = () => {
        let data = {
            "params": [{
                compontName:this.props.parameter ? this.props.parameter : '',
                authType:this.state.type,
                listItem:this.state.data.length>0 ? this.state.data : []
            }]
        };
        $http.post('urlDeault', this, {
            code: "02020207",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    message.success('保存成功！');
                    this.props.handleThis.getEditField();
                    this.handleCancel();
                }
            }
        });
    }

    componentDidMount() {
        this.props.onRef(this);
        this.getEditAuth();
    }

    componentWillReceiveProps(nextprops) {
        this.setState({data: nextprops.editField, type: nextprops.typeID, languageSize: nextprops.languageSize});
        if (nextprops.visible) {
            this.setState({
                columns: [],
                data: [],
                selectedRowKeys: [],
            }, () => {
                this.getEditAuth();
            })
        }
    }
    // 获取编辑权限
    getEditAuth = () => {
        let data = { params: [{}] };
        $http.post('urlDeault', this, {
            code: "01040094",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({ authList: res.result.authList })
                }
            }
        });
    }
    //选择权限类型
    selectChage = (value) => {
        // console.log('valuevaluevalue123',value)
        this.setState({
                type: value,
                selectedRowKeys: []
            });
    };
    //上移
    handleUp = () => {
        var keys = this.state.selectedRowKeys
        var data = this.state.data
        var newKeys = []
        keys = keys.sort(function (m, n) {
            if (m < n) return -1
            else if (m > n) return 1
            else return 0
        });
        for (var i = 0; i < keys.length; i++) {
            if (keys[i] === 0) {
                newKeys.push(keys[i])
                continue
            }
            var curRowData = data[keys[i]]
            var curRowKey = curRowData.key
            var upRowData = data[keys[i] - 1]
            var upRowKey = upRowData.key
            upRowData.key = curRowKey
            curRowData.key = upRowKey
            data[keys[i]] = upRowData
            data[keys[i] - 1] = curRowData
            newKeys.push(keys[i] - 1)
        }
        this.setState(
            {
                data: data,
                selectedRowKeys: newKeys
            }
        )
    };
    //下移
    handleDown = () => {
        var keys = this.state.selectedRowKeys
        var data = this.state.data
        var newKeys = []
        keys = keys.sort(function (m, n) {
            if (m < n) return -1
            else if (m > n) return 1
            else return 0
        });
        for (var i = keys.length - 1; i >= 0; i--) {
            if (keys[i] === data.length - 1) {
                newKeys.push(keys[i])
                continue
            }
            var curRowData = data[keys[i]]
            var upRowData = data[keys[i] + 1]
            var curRowKey = curRowData.key
            var upRowKey = upRowData.key
            upRowData.key = curRowKey
            curRowData.key = upRowKey
            data[keys[i]] = upRowData
            data[keys[i] + 1] = curRowData
            newKeys.push(keys[i] + 1)
        }
        this.setState(
            {
                data: data,
                selectedRowKeys: newKeys
            }
        )
    };
    // 打开弹框
    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    // 关闭弹框
    handleCancel = () => {
        this.setState({
            visible: false,
        });
    };
    render() {
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({ selectedRowKeys: selectedRowKeys })
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
                name: record.name,
            }),
            selectedRowKeys: this.state.selectedRowKeys
        };
        let {languageSize}=this.state;

        return (
            <Modal
                className="authority"
                title={languageSize.EnterSequenceentryOrder ? languageSize.EnterSequenceentryOrder.descripts : '表单权限维护'}
                width='800px'
                onCancel={() => {
                    this.setState({
                        visible: false,
                    })
                }}
                onOk={this.handleCancel}
                visible={this.state.visible}
                footer={null}
                style={{
                    paddingBottom: '108px',
                    height: '700px',
                }}>
            <div>
                <div className="table-operations">
                    <Row>
                        <Col span={24}>
                            <Select value={this.state.type} style={{ width: 120 }} onChange={this.selectChage}>
                                {this.state.authList.map((item, index) => {
                                    return (<Option value={item.value} key={index + ""}>{item.descripts}</Option>);
                                })}
                            </Select>
                            <Button type="primary" onClick={this.handleUp} style={{ margin: '3px 10px 38px 13px' }}>{languageSize.EnterSequencemoveUp ? languageSize.EnterSequencemoveUp.descripts : '向上移动'}</Button>
                            <Button type="primary" onClick={this.handleDown} style={{ margin: '3px 10px 38px 13px' }}>{languageSize.EnterSequencemoveDown ? languageSize.EnterSequencemoveDown.descripts : '向下移动'}</Button>
                            <Button type="primary" className="margiRight16" onClick={this.saveData} style={{ margin: '3px 10px 38px 13px' }}>{languageSize.EnterSequencesave ? languageSize.EnterSequencesave.descripts : '保存'}</Button>
                        </Col>
                    </Row>
                </div>
                <Table
                    style={{ height: store.getState().tableHeight.y - 100 + 'px' }}
                    rowSelection={rowSelection}
                    columns={this.state.columnsC}
                    dataSource={this.state.data}
                    pagination={false}
                    rowKey={(data, index) => {
                        return index
                    }}
                    scroll={{ y: store.getState().tableHeight.y - 140 }}
                />
            </div>
            </Modal>
        );
    }
}

export default SetFormOrderTable;