// 字段维护
import React, { Component } from 'react';
import { Switch, Checkbox, Input, Row, Col, Button, message, Table, DatePicker, Select, Card } from 'antd';
import { $http } from '../../containers/config/https';
import ReactDOM from 'react-dom'
class TableDataEditField extends Component {
    constructor(props) {
        super(props);
        this.state = {
            ClassData: [],
            FieldData: [],
            ClassName: "",
            ClassTitle: "",
            selectedRowKeys: [],
            code: "",
            desc: "",
            total: 0,
            page: 1,
            pageSize: 10,
            editdata: "",
            TableData: {},
            selectRowid: ""
        };
        this.clientWidth = 1400

        this.fieldColumns = [
            {
                key: 1,
                title: '字段名',
                dataIndex: 'Code',
                width: 50,
                align: "center"
            },
            {
                key: 2,
                title: '字段描述',
                dataIndex: 'Descripts',
                width: 80,
                align: "center",
                render: (text, record, index) => {
                    var Descripts = record.Descripts
                    return (
                        <Input value={Descripts} onChange={this.DescriptsChange.bind(this, record, index)}></Input>
                    )
                }
            },
            {
                key: 3,
                title: '字段类型',
                dataIndex: 'CompType',
                width: 50,
                align: "center",
                render: (text, record, index) => {
                    if (record.CompType === "Text") {
                        return (
                            <Input disabled={true} />
                        )
                    } else if (record.CompType === "Radio") {
                        return (
                            <Switch checkedChildren="是" unCheckedChildren="否" />
                        )
                    } else if (record.CompType === "Date") {
                        return (
                            <DatePicker disabled={true} format="YYYY-MM-DD" />
                        )
                    } else if (record.CompType === "DR") {
                        return (
                            <Select style={{ width: 80 }} disabled={true} />
                        )
                    } else if (record.CompType === "Select") {
                        return (
                            <Select style={{ width: 80 }} disabled={true} />
                        )
                    }
                    else {
                        return (
                            <Input disabled={true} />
                        )
                    }
                }
            },
            {
                key: 4,
                title: '查询标志',
                dataIndex: 'FindFlag',
                width: 40,
                align: "center",
                render: (text, record, index) => {
                    var FindFlag = record.FindFlag
                    if (FindFlag === "Y") {
                        FindFlag = true
                    } else {
                        FindFlag = false
                    }
                    return (
                        <Checkbox checked={FindFlag} onChange={this.CheckOnChange.bind(this, record, index, 'FindFlag')}></Checkbox>
                    )
                }
            },
            {
                key: 5,
                title: '编辑标志',
                dataIndex: 'EditFlag',
                width: 40,
                align: "center",
                render: (text, record, index) => {
                    var EditFlag = record.EditFlag
                    if (EditFlag === "Y") {
                        EditFlag = true
                    } else {
                        EditFlag = false
                    }
                    var disabled = false
                    if (+record.ChangeEditFlag === 0) {
                        disabled = true
                    }
                    return (
                        <Checkbox checked={EditFlag} disabled={disabled} onChange={this.CheckOnChange.bind(this, record, index, 'EditFlag')}></Checkbox>
                    )
                }
            },
            {
                key: 6,
                title: '列输出标志',
                dataIndex: 'ColumnFlag',
                width: 40,
                align: "center",
                render: (text, record, index) => {
                    var ColumnFlag = record.ColumnFlag
                    if (ColumnFlag === "Y") {
                        ColumnFlag = true
                    } else {
                        ColumnFlag = false
                    }
                    return (
                        <Checkbox checked={ColumnFlag} onChange={this.CheckOnChange.bind(this, record, index, 'ColumnFlag')}></Checkbox>
                    )
                }
            }, {
                key: 7,
                title: '只读标志',
                dataIndex: 'ReadOnlyFlag',
                width: 40,
                align: "center",
                render: (text, record, index) => {
                    var ReadOnlyFlag = record.ReadOnlyFlag
                    if (ReadOnlyFlag === "Y") {
                        ReadOnlyFlag = true
                    } else {
                        ReadOnlyFlag = false
                    }
                    return (
                        <Checkbox checked={ReadOnlyFlag} onChange={this.CheckOnChange.bind(this, record, index, 'ReadOnlyFlag')}></Checkbox>
                    )
                }
            },
            {
                key: 8,
                title: '列宽',
                dataIndex: 'ColumnWidth',
                width: 50,
                align: "center",
                render: (text, record, index) => {
                    var ColumnWidth = record.ColumnWidth
                    if (ColumnWidth === "") {
                        //ColumnWidth=50
                    }
                    return (
                        <Input value={ColumnWidth} onChange={this.ColumnWidthChange.bind(this, record, index)}></Input>
                    )
                }
            }
        ]

    }

    componentDidMount() {
        var obj = ReactDOM.findDOMNode(this)
        if (obj) {
            this.clientWidth = obj.clientWidth
        }
        var className = this.props.className
        this.setState({
            ClassName: className
        })
        this.getFieldData(className)
    }

    componentWillReceiveProps(nextProps) {
        var className = ""
        if (nextProps.className !== undefined) {
            className = nextProps.className
        } else {
            className
        }
        if (className !== "") {
            this.setState({
                ClassName: className
            })
            this.getFieldData(className)
        }
    }

    getFieldData = (className) => {
        //var className=this.props.className
        let data = {
            params: [{ ClassName: className }]
        }
        $http.post("urlS", this, {
            code: "4008",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    var data = res.result
                    this.setState({ FieldData: data }, () => {

                    })
                } else {
                    message.error('失败：' + res.errorMessage);
                }
            },
            error: function (error) {
                message.error('失败：' + error);
            }
        })
    }

    handleUp = () => {
        var keys = this.state.selectedRowKeys
        var data = this.state.FieldData
        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(
            {
                FieldData: data,
                selectedRowKeys: newKeys
            }
        )
    }

    handleDown = () => {
        var keys = this.state.selectedRowKeys
        var data = this.state.FieldData
        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(
            {
                FieldData: data,
                selectedRowKeys: newKeys
            }
        )
    }

    saveRecordEdit = () => {
        var tableData = this.state.FieldData
        var idStr = ""
        var EditData = []
        for (var i = 0; i < tableData.length; i++) {
            var id = tableData[i].ID
            if (idStr === "") {
                idStr = id
            } else {
                idStr = idStr + "^" + id
            }
            if (tableData[i].Descripts === "") {
                message.error("字段" + tableData[i].Code + "的描述不能为空");
                return
            }
            var itemEditData = {}
            itemEditData.ID = id
            itemEditData.Descripts = tableData[i].Descripts
            itemEditData.FindFlag = tableData[i].FindFlag
            itemEditData.EditFlag = tableData[i].EditFlag
            itemEditData.ColumnFlag = tableData[i].ColumnFlag
            itemEditData.ColumnWidth = tableData[i].ColumnWidth
            itemEditData.ReadOnlyFlag = tableData[i].ReadOnlyFlag


            EditData.push(itemEditData)
        }
        var className = this.state.ClassName
        let data = {

            params: [
                {
                    ClassName: className,
                    FieldSort: idStr,
                    EditData: EditData
                }
            ]
        }
        $http.post("urlADS", this, {
            code: "4009",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    message.success('保存成功');
                } else {
                    message.error('失败：' + res.errorMessage);
                }
            },
            error: function (error) {
                message.error('失败：' + error);
            }
        })
    }

    CheckOnChange = (record, index, field) => {
        if (record[field] === "Y") {
            record[field] = "N"
        } else {
            record[field] = "Y"
        }
        var data = this.state.FieldData
        data[index] = record
        this.setState({ FieldData: data })
    }

    DescriptsChange = (record, index, e) => {
        record.Descripts = e.target.value
        var data = this.state.FieldData
        data[index] = record
        this.setState({ FieldData: data })
    }

    ColumnWidthChange = (record, index, e) => {
        record.ColumnWidth = e.target.value
        var data = this.state.FieldData
        data[index] = record
        this.setState({ FieldData: data })
    }

    resetEditFieldData = () => {
        this.setState({
            ClassName: "",
            ClassTitle: "",
            selectRowid: "",
            FieldData: []
        });
    }

    onClose = () => {
        this.setState({
            editdata: 0,
        });
    };

    UpdateField = () => {
        var className = this.state.ClassName
        if (className === "") {
            return
        }
        let data = {
            params: [
                {
                    className: className
                }
            ]
        }
        $http.post("urlADS", this, {
            code: "4031",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    message.success('字段更新成功');
                    this.getFieldData(this.state.ClassName)
                } else {
                    message.error('失败：' + res.errorMessage);
                }
            }
        })
    }

    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
        };
        return (
            <div>
                <div className="table-operations">
                    <Row type="flex" justify="space-between">
                        <Col span={4}>
                            <Button type="primary" onClick={this.saveRecordEdit}>保存修改</Button>
                        </Col>
                        <Col span={4}>
                            <Button type="primary" onClick={this.handleUp}>向上移动</Button>
                        </Col>
                        <Col span={4}>
                            <Button type="primary" onClick={this.handleDown}>向下移动</Button>
                        </Col>
                        <Col span={4}>
                            <Button type="primary" onClick={this.UpdateField}>字段同步</Button>
                        </Col>
                    </Row>
                </div>
                <Row type="flex" >
                    <Col span={18}> </Col>
                    <Col span={6}> </Col>
                </Row>
                <br />
                <div>
                    <Table ref="edittable"
                        rowSelection={rowSelection}
                        bordered
                        columns={this.fieldColumns}
                        dataSource={this.state.FieldData}
                        pagination={false}
                        rowKey={row => row.key}
                    // style={{height: store.getState().tableHeight.y + 45 + 'px'}}
                    />
                </div>
            </div>
        );
    }
}
export default TableDataEditField;