// 主菜单维护
import React from 'react';
import '../../assets/css/system.css';
import store from '../../store';
import {
    Table, Input, Popconfirm, Row, Col, Button, Pagination, message, Divider, Spin, Icon
  } from 'antd';
import { $http } from '../../containers/config/https';
// 主菜单弹框
import MainMenuModal from './component/MainMenuModal.jsx';
import CommonPagination from 'components/pagination/index';
  
export default  class MainMenuMaintenance extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userInfo: {},
            // 主菜单列表数据
            data: [],
            // 抽屉显示
            visible: false,
            // 主菜单-代码
            code: '',
            // 主菜单-描述
            describe: '',
            // 主菜单分页数据
            total: 0,
            page: 1,
            pageSize: 10,
            flag: '',
            title: '',
            // 是否显示loading
            showLoading: true,
            // 表格loading
            loading: true,
            search: 'search',
            paginationLoading: false
        };
        this.columns = [
            {
                title: '代码',
                dataIndex: 'Code',
                width: '15%',
                align: "center"
            },
            {
                title: '描述',
                dataIndex: 'Descripts',
                width: '15%',
                align: "center"
            },
            {
                title: '英文描述',
                dataIndex: 'ENDesc',
                align: "center"
            },
            {
                title: '更新日期',
                dataIndex: 'UpdateDate',
                width: '15%',
                align: "center"
            },
            {
                title: '更新人',
                dataIndex: 'UpdateUserDrDesc',
                width: '15%',
                align: "center"
            },
            {
                title: '操作',
                dataIndex: 'operation',
                align: "center",
                width: 130,
                render: (text,record) => (
                    <span>
                        <Icon type="edit" style={{color: '#108EE9'}}></Icon>
                        <span className='span' onClick={this.handleCompile.bind(this, record)}>编辑</span>
                        {/* onConfirm-- 点击确认的回调*/}
                        {/* 分割线 */}
                        <Divider type="vertical" />
                        <Icon type="delete" style={{color: 'rgba(240,65,52,1)'}}></Icon>
                        <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={this.handleDetele.bind(this, record)} >
                            <span className='span' style={{color: 'rgba(240,65,52,1)'}}>删除</span>
                        </Popconfirm>
                    </span>
                )
            },
        ];
    }

    componentDidMount() {
        // 初始化列表数据
        this.handleQuery();
        // 初始化设置table的高度以及表体的高度
        document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y + 'px';
        // 数据异步请求，请求成功之后setState
		this.setState({
			showLoading: false
		})
    }

    componentWillUnmount() {
		// 组件销毁前将静止让setState修改state的状态
        this.setState = (state,callback)=>{ return; }
    }
    
    // 新增
    handleAdd = () => {
        // 显示弹框
        this.child.showModal()
        // 初始化数据
        this.setState({flag: 'add', title: '新增'})
    }

    getTableData (code, des) {
        this.setState({paginationLoading: true})
        let { page, pageSize} = this.state;
        let data = {
            params: [{
                Code: code,
                Descripts: des
            }],
            pagination:[{ 
                pageSize: pageSize,
                currentPage: page,
                sortColumn: "Code",
                sortOrder: "asc"
            }]
        };
        $http.post('urlS', this, {
            code: '2201',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0 && res.result) {
                    for(var i = 0; i < res.result.Data.length; i++) {
                        res.result.Data[i].key = i
                    }
                    this.setState({data: res.result.Data, total: res.result.TotalCount, loading: false, paginationLoading: false})
                } else {
                    this.setState({data: [], total: 0, loading: false, paginationLoading: false})
                }
            }
        })
    }

    // 查询
    handleQuery = () => {
        this.setState({page: 1, pageSize: 10}, () => {
            let {code, describe} = this.state;
            this.getTableData(code, describe);
        })
    }
  
    // 编辑
    handleCompile(record) {
        // console.log(record)
        // 初始化数据
        this.setState({flag: 'compile', userInfo: record, title: '编辑'}, () => {
            // 重置form表单
            this.child.resetFields()
            // 打开弹框
            this.child.showModal();
        });
    }
    
    // 删除
    handleDetele(record) {
        let data = {
            params: [{
                ID: record.ID
            }]
        }
        $http.post('urlADS', this, {
            code: '2204',
            data: data,
            success: function (res) { 
                if (+res.errorCode === 0) {
                    message.success('删除成功');
                    // 刷新列表数据
                    let {code, describe} = this.state;
                    this.getTableData(code, describe);
                }
            }
        })
    }

    // 查询条件 --- 代码
    onChangeCode = (e) => {
        this.setState({ code: e.target.value });
    }

    // 查询条件 --- 描述
    onChangeDescribe = (e) => {
        this.setState({ describe: e.target.value });
    }

    // 页码改变的回调，参数是改变后的页码及每页条数
    onChange = (page, pageSize)=> {
        this.setState({page: page, pageSize: pageSize}, () => {
            // 重新调用查询方法
            let {code, describe} = this.state;
            this.getTableData(code, describe);
        });
    }

		// 条数改变的回调
    onShowSizeChange = (current, size) => {
        this.setState({page: 1, pageSize: size}, () => {
            // 重新调用查询方法
            let {code, describe} = this.state;
            this.getTableData(code, describe);
        });
    }

    // 调用子组件的连接事件
    onRef = (ref) => {
        this.child = ref
    }

    // 重置userInfo
    resetUserInfo() {
        this.setState({userInfo: {}})
    }

    // 显示分页总条数
    showTotal(total) {
        return `共 ${total} 条`;
    }

    render() {
        return (
            <Spin tip="加载中..." spinning={this.state.showLoading}>
                <div>
                    <div className="table-operations">
                        <Row style={{height: '75px', lineHeight: '75px', padding: '0 24px'}}>
                            <Col span={18}>
                                    代码：<Input title="输入内容后可回车检索" placeholder="请输入( Enter )" value={this.state.code} style={{width: '150px', marginRight: '20px'}} onChange={this.onChangeCode} onPressEnter={this.handleQuery} />
                                    描述：<Input title="输入内容后可回车检索" placeholder="请输入( Enter )" value={this.state.describe} style={{width: '150px', marginRight: '20px'}} onChange={this.onChangeDescribe} onPressEnter={this.handleQuery} />
                                    <Button style={{ marginRight: '15px', background: 'rgba(255,255,255,1)'}} onClick={this.handleQuery}>查询</Button>
                            </Col>
                            <Col span={6} style={{textAlign: 'right'}}>
                                <Button icon="plus" onClick={this.handleAdd} style={{background: 'rgba(247,128,93,1)', color: '#fff'}}>新增主菜单</Button>
                            </Col>
                        </Row>
                    </div>
                    <div style={{widht: '100%', height: '10px', background: '#f0f2f5'}}></div>
                    <div style={{ padding: 24 }}>
                        <div>
                            <Table
                                style={{height: store.getState().tableHeight.y + 45 + 'px'}}
                                dataSource={this.state.data}
                                columns={this.columns}
                                rowClassName="editable-row"
                                pagination={false}
                                scroll={{ x: 1000, y: store.getState().tableHeight.y }}
                                bordered
                                loading={this.state.loading}
                                className="table-body-height"
                            />
                            {/* 分页: total--总条数  defaultCurrent--默认的当前页 hideOnSinglePage--只有一页时隐藏分页器 */}
                            <CommonPagination size="small" current={this.state.page} total={this.state.total} search={this.state.search}
                                onShowSizeChange={this.onShowSizeChange} complete={true} dataSource={this.state.data}
                                loading={this.state.paginationLoading} onChange={this.onChange} />
                        </div>
                    </div>

                    {/* 新增弹框 */}
                    <MainMenuModal
                        onRef={this.onRef}
                        userInfo={this.state.userInfo}
                        flag={this.state.flag}
                        handelThis={this}
                        title={this.state.title}
                    />
                </div>
            </Spin>
        );
    }
  }
  