// 发票类型维护
import React from 'react';
import '../../assets/css/system.css';
import store from '../../store';
import {
    Table, Input, Popconfirm, Row, Col, Button, Pagination, message, Divider, Spin,Tabs,Form
  } from 'antd';
import { $http } from '../../containers/config/https';
import { disposeData } from '../../tools';
// 主菜单弹框
import InvTypeRelatedPersonTypeModal from './InvTypeRelatedPersonTypeModal.jsx';
///import { CompositeDisposable } from 'rx';
  
export default  class InvTypeRelatedPersonTypeMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userInfo: {},
            // 主菜单列表数据
            data: [],
            //选中行数据
            rowData:[],
            //选中行的rowid
		    rowId:'',
            // 抽屉显示
            visible: false,
            // 人员类型ID
            personTypeID: '',
            //发票类型ID
            invoiceTypeID: '',
            invTypeRlatedpersonTypeID:'',
            key:'',
            // 主菜单分页数据
            total: 0,
            page: 1,
            pageSize: 10,
            flag: '',
            title: '',
            // 是否显示loading
            showLoading: true,
            // 表格loading
            loading: true
        };
        this.columns = [
            {
                title: '人员类型关联发票类型ID',
                dataIndex: 'ID',
                width: 200,
                align: "center"
            },
            {
                title: '人员类型ID',
                dataIndex: 'UserType',
                width: 200,
                align: "center"
            },
            {
                title: '人员类型描述',
                dataIndex: 'UserDesc',
                width: 200,
                align: "center"
            },
            {
                title: '发票类型ID',
                dataIndex: 'InvTypeDr',
                width: 200,
                align: "center"
            },
            {
                title: '发票类型描述',
                dataIndex: 'InvTypeDesc',
                width: 200,
                align: "center"
            },
            ,
            {
                title: '操作',
                dataIndex: 'operation',
                align: "center",
                width: 200,
                render: (text,record) => (
                    <span>
                        <span className='span' onClick={this.handleCompile.bind(this, record)}>修改</span>
                        {/* onConfirm-- 点击确认的回调*/}
                        {/* 分割线 */}
                        <Divider type="vertical" />
                        <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={this.handleDetele.bind(this, record)} >
                            <span className='span'>删除</span>
                        </Popconfirm>
                    </span>
                )
            },
            {
                title: '生效时间',
                dataIndex: 'StDate',
                width: 200,
                align: "center"
            },
            {
                title: '失效时间',
                dataIndex: 'EndDate',
                width: 200,
                align: "center"
            },
            {
                title: '创建日期',
                dataIndex: 'CreateDate',
                width: 200,
                align: "center"
            },
            {
                title: '创建时间',
                dataIndex: 'CreateTime',
                width: 200,
                align: "center"
            },
            {
                title: '更新人',
                dataIndex: 'CreateUserName',
                width: 200,
                align: "center"
            }
        ];
    }
    

    handleOnSelect = () => {
        // console.log('选中了')
        // console.log(this.myRef2)
        this.myRef2.current.focus();
    }

    handleOnBlur = () => {
        this.myRef2.current.focus();
    }

    // 新增
    handleAdd = () => {
        // 显示弹框
        this.child.showModal()
        // 初始化数据
        this.setState({flag: 'add', title: '新增'})
    }

    // 查询
    handleQuery = () => {
        let {personTypeID, page, pageSize} = this.state;
        var {invoiceTypeID}=this.state;
        invoiceTypeID=this.props.invoiceTypeID;

        let data = {}
        if (invoiceTypeID||personTypeID) {
            data = {
                params: [{
                    userType:personTypeID,
                    invType: invoiceTypeID
                }],
                pagination:[{
                    pageSize: 10,
                    currentPage: 1,
                    sortColumn: "Code",
                    sortOrder: "asc"
                }]
            }
        } else {
            data = {
                params: [{
                    userType:personTypeID,
                    invType: invoiceTypeID
                }],
                pagination:[{
                    pageSize: pageSize,
                    currentPage: page,
                    sortColumn: "Code",
                    sortOrder: "asc"
                }]
            }
        }
        $http.post('urlS', this, {
          code: '5005',
          data: data,
          success: function (res) {
            console.log(res);
            if (+res.errorCode === 0 && res.invType) {
              for(var i = 0; i < res.invType.length; i++) {
                res.invType[i].key = i;
              }
              this.setState({data: res.invType, total: res.invType.length, loading:false})
            } else {
                setTimeout(() => {
                    this.setState({data: [], total: 0, loading: false})
                }, 3000)
            }
          }
        })


        this.setState({invoiceTypeID: this.props.invoiceTypeID})
    }
  
    



    // 编辑
    handleCompile(record) {
        // 重置form表单
        this.child.resetFields()
        // 打开弹框
        this.child.showModal();
        // 初始化数据
        this.setState({flag: 'compile', userInfo: record, title: '编辑'});
    }
    
    // 删除
    handleDetele(record) {
        let obj ={};
        obj.updateUserDr = this.flag === 'add' ? 1 : record.CreateUserName;
        let data = {
            params: [{
                id: record.ID,
                updateUserDr:obj.updateUserDr
            }]
        }
        $http.post('urlADS', this, {
            code: '5008',
            data: data,
            success: function (res) { 

                if (+res.errorCode === 0) {
                    message.success('删除成功');
                    // 刷新列表数据
                    this.handleQuery()
                } else {
                    message.error('删除失败：' + res.errorMessage);
                }
            },
            error:function (error) {
                message.error('删除失败：' + error);
            }
        })
    }

    
	// 点击切换tabs的回调
	callback = (activeKey) => {
		// 当点击切换为菜单授权必须选中一条数据
		if (+activeKey === 2) {
			if (this.state.rowData.length >= 1) {
				this.setState({key: '2'})
			} else {
				message.info('请选择需要操作的第1步数据');
			}
			
		} else if(+activeKey === 3) {
			if (this.state.rowData.length >= 1) {
				this.setState({key: '3'})
			} else {
				message.info('请选择需要操作的第2步数据');
			}
		}else {
			this.setState({key: activeKey})
		}
		
		
    }
    

    onClickRow = (record) => {
		return {
			// 单击行选中
			
			onClick: () => {
				if (this.state.rowId === '') {
					// 保存行数据以及ID
                    this.setState({rowData: [record],rowId: record.ID })
                    console.log("回传");
                    this.props.handelThis.getBackData(record.ID);
				} else {
                    this.setState({rowData: [record],rowId: record.ID })
                    console.log("回传");
                    this.props.handelThis.getBackData(record.ID);
				}
			},
		}
	}
   // 表格行的类名
	setRowClassName = (record) => {
        return record.ID === this.state.rowId ? 'clickRowStyle' : '';
	}

    // 查询条件 --- 人员类型ID
    onChangePersonTypeID = (e) => {
        this.setState({ personTypeID: e.target.value });
    }

    // 查询条件 --- 发票类型ID
    onChangeInvoiceTypeID = (e) => {
        this.setState({ invoiceTypeID: e.target.value });
    }

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

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

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

    componentDidMount() {
        // 初始化列表数据
        this.handleQuery();
        // 初始化设置table的高度以及表体的高度
        document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y + 'px';
        // 数据异步请求，请求成功之后setState
		this.setState({
			showLoading: false
		})
    }
    componentWillReceiveProps(){
        // 初始化设置table的高度以及表体的高度
        document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y + 'px';
        // 数据异步请求，请求成功之后setState
		this.setState({
            showLoading: false,
		},() => {
            this.handleQuery(); 
         })
    }
    render() {
        return (
            <Spin tip="加载中..." spinning={this.state.showLoading}>
                <div>
                    <div style={{ padding: 24, marginBottom: 24 }}>
                        <div className="table-operations" style={{marginBottom: '30px'}}>
                            <Row>
                                <Col span={24}>
                                    发票类型ID：<Input placeholder="请输入" value={this.state.invoiceTypeID} style={{width: '150px', marginRight: '60px'}} onChange={this.onChangeInvoiceTypeID} />
                                    人员类型ID：<Input placeholder="请输入" value={this.state.personTypeID} style={{width: '150px', marginRight: '10px'}} onChange={this.onChangePersonTypeID} />
                                    <Button type="primary" className="margiRight16" onClick={this.handleQuery}>查询</Button>
                                    <Button type="primary" onClick={this.handleAdd} invoiceTypeID={this.props.invoiceTypeID}>新增</Button>
                                </Col>
                            </Row>
                        </div>
                        <div>
                            <Table
                                style={{height: store.getState().tableHeight.y + 45 + 'px'}}
                                dataSource={this.state.data}
                                onRow={this.onClickRow}
                                columns={this.columns}
                                //rowClassName="editable-row"
                                rowClassName={this.setRowClassName}
                                pagination={false}
                                scroll={{ x: 1500, y: store.getState().tableHeight.y }}
                                bordered
                                loading={this.state.loading}
                            />
                            {/* 分页: total--总条数  defaultCurrent--默认的当前页 hideOnSinglePage--只有一页时隐藏分页器 */}
                            <Pagination
                                size="small"
                                showQuickJumper
                                showSizeChanger
                                defaultCurrent={1}
                                total={this.state.total}
                                onChange={this.onChange}
                                onShowSizeChange={this.onShowSizeChange}
                                style={{textAlign: "right", marginTop: '13px'}}
                            />
                        </div>
                    </div>

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